Vitesse de chargement, passez de 10s à 2s : 10 techniques simples pour un site web supersonique !

Dans le monde numérique actuel, tout est question de vitesse. Et une chose est certaine : les internautes sont de moins en moins patients.

Si un site web met trop de temps à s’afficher, ils s’en iront sans demander leur reste ! 🏃💨

Lorsqu'un utilisateur clique sur un lien, il s'attend à ce que l'action se déroule rapidement. Voir un écran blanc ou une roue qui tourne indéfiniment sera généralement frustrant et décourageant. 😩

Dans ce contexte, il est donc essentiel de veiller à ce que vos pages web se chargent et répondent le plus vite possible. Peu importe que vous ayez le plus beau site internet du monde, s'il met une éternité à s’afficher, il ne sera pas visité.

Pour vous aider, voici un guide qui explore les méthodes permettant d'améliorer la vitesse de chargement des pages et les temps de réponse des serveurs. ⏱️

Qu'est-ce que le temps de chargement d'une page web ?

Le temps de chargement d'une page (PLT = Page Load Time) désigne le temps nécessaire à une page web pour devenir entièrement interactive pour l'utilisateur. 

Le processus de chargement d'un site comporte plusieurs étapes : 

1. Il commence lorsque vous cliquez sur un lien ou que vous saisissez une adresse web (= URL) dans votre navigateur. À ce stade, vous demandez des ressources au serveur qui héberge le site que vous souhaitez consulter. 

2. Suite à votre demande, le serveur collecte des données et exécute des scripts et des requêtes de base de données. 

3. Ensuite, il envoie les fichiers essentiels, tels que les images, le code HTML, le CSS, etc.

4. Une fois que le navigateur a reçu les fichiers, il passe à l'étape du rendu : il interprète le code, affiche les images et les autres éléments de la page web. 

Facteurs influençant le “Page Load Time”

Les facteurs suivants affectent la vitesse de chargement d'une page web :

• Appareils mobiles : certaines limitations peuvent affecter le temps de chargement des pages pour les utilisateurs mobiles. Ces appareils ont généralement des écrans plus petits, des processeurs plus lents et moins de mémoire que les ordinateurs de bureau. Il en résulte des temps de chargement plus longs. Les sites web mobiles doivent donc utiliser des techniques d'optimisation comme la modification du code. 

• Taille des fichiers : le chargement d'un fichier volumineux prend plus de temps. Les éléments tels que les images, les vidéos et les scripts tiers contribuent à la taille d'une page web. De plus, si la vitesse de connexion internet est lente, les fichiers peuvent mettre un temps fou à atteindre le navigateur des utilisateurs depuis le serveur. ⌛

Ce qui affecte la vitesse d'un site

Il existe plusieurs raisons pour lesquelles le temps de chargement de votre site peut être lent.

Les plus courantes sont les suivantes :

• Utilisation de polices spéciales et usage intensif de CSS et JavaScript. Ces ressources sont généralement placées dans la section head du document HTML. Ainsi, un navigateur doit les charger et les traiter entièrement avant d'afficher la page. 

• Serveur/hébergement de mauvaise qualité

• Images de grande taille

• Non-utilisation du cache du navigateur

• Trop de widgets et de plugins

• Grand volume de trafic

• Navigateurs anciens

• Connexion réseau lente (appareils mobiles)

Cela signifie qu'il existe toute une série de mesures que vous pouvez prendre pour améliorer la vitesse de vos pages.

Mais avant toute chose, il est nécessaire de tester vos temps de chargement…

Indicateurs-clés pour mesurer le temps de chargement et l'expérience-utilisateur

La mesure du PLT (Page Load Time) et de l'expérience-utilisateur repose sur plusieurs indicateurs-clés. Ceux-ci permettent d'évaluer la rapidité avec laquelle les utilisateurs peuvent interagir avec le contenu d'un site…

1. First Contentful Paint

Le First Contentful Paint (FCP) mesure le délai avant que le premier élément de contenu (texte, image) n'apparaisse à l'écran, après un clic sur un lien. 

Un score rapide maintient l'intérêt des utilisateurs, tandis qu'un FCP lent peut provoquer de l'agacement et le départ anticipé. La durée idéale de cet indicateur devrait être inférieure à 1,8 seconde.

2. Largest contentful paint

Le Largest Contentful Paint (LCP) mesure le temps nécessaire pour que le contenu le plus important (une image ou un texte) apparaisse à l'écran. 

Un LCP rapide est essentiel pour que les utilisateurs puissent voir immédiatement l'attraction principale. Un temps de chargement ralenti donne une impression de lenteur et d'incomplétude. La durée idéale pour cet indicateur devrait être inférieure à 2,5 secondes.

De plus, un LCP rapide peut améliorer le classement de votre site web dans les moteurs de recherche, car il s'agit d'un Core Web Vital. 

Définition

Les Core Web Vitals sont des indicateurs d'expérience-utilisateur utilisés par Google pour déterminer le classement SEO d'un site web. 🔎🌐

3. Temps d'interactivité

Le temps d'interactivité (TTI = Time To Interactive) mesure la durée nécessaire à une page web pour devenir interactive et réactive aux actions de l’internaute. Il s'agit du moment où une page est complètement chargée, tant sur le plan visuel que fonctionnel. Elle est alors prête à être utilisée par les utilisateurs, qui peuvent interagir avec ses éléments, cliquer sur des boutons, remplir des formulaires, etc.

Si le TTI est plus rapide, les visiteurs sont plus enclins à rester sur le site web et à l'explorer plus longtemps. Cela se traduit par un meilleur engagement, des taux de rebond plus faibles et de meilleures conversions. La durée idéale pour le TTI devrait être inférieure à 5 secondes.

4. Déplacement cumulatif de la mise en page (CLS)

Le déplacement cumulatif de la mise en page (CLS = Cumulative Layout Shift) est une mesure de la performance web qui évalue la stabilité visuelle d'une page internet. 

Il quantifie l'ampleur des déplacements inattendus de la mise en page pendant le chargement (par exemple des boutons et des images qui se décalent inopinément). Lorsque de tels incidents arrivent, cela peut semer la confusion ou provoquer des clics accidentels de la part des utilisateurs.

Un score CLS faible (0,1 ou moins) indique des changements minimaux, ce qui se traduit par une expérience utilisateur plus fluide. Et un score élevé (0,25 ou plus) indique une expérience de chargement plus irrégulière. 

Le CLS fait également partie des Core Web Vitals de Google.

Pour créer un site web rapide à charger, sans vous préoccuper des aspects techniques...

...Vous avez SiteW ! 🙌
Sur notre plateforme, nous nous occupons de tout : vous concevez vos pages sur notre éditeur web, simplement à l'aide de votre souris d'ordinateur. Et votre site sera automatiquement optimisé par nos soins, pour avoir les meilleures performances possibles en matière de vitesse de chargement ! 🖱️✨

Créer un site

Quelle est la vitesse idéale pour un site web ?

Le temps de chargement est généralement mesuré en millisecondes ou en secondes. 

Selon un rapport publié en 2018 par Portent, la vitesse d’affichage moyenne optimale d'une page se situe entre 0 et 4 secondes. En clair, cela signifie que vous devez vous efforcer d'afficher votre contenu en moins de 4 secondes.

A noter

Lorsque vous mesurez le temps de chargement d'une page, il est préférable d'essayer de collecter autant de données que possible, provenant de tous les types de visites.
Par exemple, observer les résultats pour les ordinateurs de bureau et les appareils mobiles. 📱💻

Importance du temps de chargement d’un site web

Voici les principales raisons pour lesquelles il est crucial de considérer le temps de chargement des pages comme une priorité :

• Taux de conversion : il s'agit du pourcentage de visiteurs d'un site web qui effectuent l'action souhaitée. Il peut s'agir d'une inscription à une newsletter ou d'une vente en ligne. 

• Réduction des taux de rebond : le taux de rebond est le pourcentage de visiteurs qui quittent un site web sans effectuer aucune action. Lorsque le temps de chargement d'un site est rapide, ce chiffre diminue. Cela indique que le contenu du site est attrayant pour les internautes.

• Optimisation pour les moteurs de recherche (SEO) : plus une page se charge rapidement, mieux elle est positionnée dans les résultats. L'algorithme de Google considère la vitesse comme un facteur de classement important. 

SEO : la vitesse d'un site web est-elle un facteur de classement Google ?

En effet, un site trop lent peut être perçu comme négatif par Google. 

En 2017, le Géant du Web a déclaré : « Pour Googlebot, un site rapide est le signe de serveurs en bonne santé, ce qui lui permet d'obtenir plus de contenu pour un même nombre de connexions. À l'inverse, un nombre important d'erreurs ou de délais d'expiration de connexion indique le contraire, et l'exploration ralentit. »

Donc, si votre Google Search Console affiche le message « Votre site ne contient aucune URL offrant une bonne expérience de page », vous devez impérativement prendre des mesures.

Qu'advient-il de votre classement Google lorsque vous améliorez les scores de vitesse de vos pages ?

L'optimisation pour les moteurs de recherche est un sujet complexe.

Améliorer les scores de vitesse de votre site web sans développer une expérience-utilisateur convaincante ne vous permettra pas, comme par magie, d'obtenir un meilleur classement dans Google à court terme. 🙅‍♂️

En revanche, un site plus rapide devrait améliorer le niveau de satisfaction des visiteurs et le nombre de conversions. Et cela pourrait très bien avoir un effet secondaire sur votre classement au fil du temps. C’est en tout cas ce que pensent de nombreux spécialistes du référencement. 👍

Les 10 meilleures pratiques pour accélérer votre site web

Comme on l’a vu, de nombreux facteurs influencent le temps de chargement de votre site internet. 

Mais il existe tout autant de moyens d'améliorer vos performances web…

1. Réduisez le nombre de requêtes HTTP

Les requêtes HTTP sont utilisées par le navigateur pour récupérer différentes parties de la page, telles que les images, les feuilles de style et les scripts, à partir d'un serveur web. Chaque requête peut entraîner une surcharge lors de l'établissement de la connexion entre le navigateur et le serveur.

De plus, les navigateurs ont généralement une limite sur le nombre de requêtes réseau parallèles. Ainsi, si vous avez de nombreuses requêtes en attente, certaines d'entre elles seront bloquées.

La première étape consiste à éliminer celles qui sont inutiles. 

Vous devez supprimer toutes les images, fichiers JavaScript, feuilles de style, polices, plugins, etc. qui ne servent pas.

L'étape suivante consiste à optimiser le reste : compresser vos fichiers CSS et JavaScript. 

2. Optimisez la taille des images

Si vos images ne sont pas compressées ou si vous utilisez une résolution trop élevée, cela ralentira les performances de votre site web.

Par exemple, on utilise parfois des images avec une résolution 2x ou même 3x afin qu'elles s'affichent correctement sur des écrans Retina, par exemple. Mais si vos utilisateurs n'utilisent pas d'écran HiDP, vous ne faites que gaspiller de la bande passante et augmenter le temps de chargement pour vos visiteurs, en particulier s'ils disposent d'une connexion mobile lente. 🤷

En spécifiant plusieurs tailles d'image, le navigateur pourra sélectionner l'image appropriée en fonction de la résolution de l'écran.

Attention

Veillez également à utiliser le bon type de fichier ! Utilisez le format JPEG pour les images comportant beaucoup de couleurs (par exemple, les photos) et le format PNG pour les graphiques plus simples.

3. Utilisez un réseau de diffusion de contenu (CDN)

La diffusion de fichiers statiques (= CSS, images, polices et JavaScript) peut s'avérer délicate. Il est judicieux d'externaliser cette partie de votre infrastructure à un prestataire tiers : il existe des services spécialement conçus à cet effet. Ce sont les réseaux de diffusion de contenu (ou CDN = Content Delivery Network).

Ils utilisent des serveurs répartis géographiquement. Cela signifie que c’est le serveur le plus proche de votre visiteur qui diffusera les fichiers. Ainsi, le temps de chargement des images, par exemple, sera le même, quel que soit l'endroit où l'internaute se connecte. 🌍

4. Privilégiez le « mobile first »

En général, les développeurs testent les sites web sur des ordinateurs de bureau, et ce n'est que dans un second temps qu'ils optimisent pour les appareils mobiles. Or, il se trouve que cela peut s’avérer fastidieux. 👨‍💻

Utiliser un émulateur permet de commencer par l’optimisation mobile. 

L'ajustement du site web pour les ordinateurs de bureau est alors un processus plus simple. Car on peut améliorer progressivement l'expérience pour les appareils plus puissants et dotés d'un écran plus grand. 

5. Réduire le temps de réponse du premier octet

Le temps de réponse du premier octet, ou TTFB (= Time To First Byte), est le temps nécessaire au navigateur pour recevoir le premier octet de données du serveur. Cet indicateur joue un rôle important dans les performances globales de votre site web.

Le principal facteur que vous pouvez contrôler est le temps de traitement du serveur. 

Voici les astuces recommandées par Google pour améliorer le TTFB :

• Optimisez la logique d'application du serveur pour préparer les pages plus rapidement. 

• Optimisez la manière dont votre serveur interroge les bases de données ou migrez vers des systèmes plus rapides.

• Mettez à niveau votre serveur pour disposer de plus de mémoire ou de puissance.

• Un TTFB inférieur à 200 ms est considéré comme excellent. Une plage comprise entre 200 et 500 ms est considérée comme normale et acceptable. Un TTFB constamment supérieur à 600 ms devra faire l'objet d'une investigation. 

Hmm…Un peu compliqué ? 🤔

Heureusement, sur SiteW, nous prenons toutes ces problématiques techniques en charge pour vous ! Ainsi, votre site est performant et rapide à charger, grâce à nos serveurs sécurisés et à nos data centers répartis partout dans le monde. 😌

Créer un site rapide et performant avec SiteW

6. Choisissez bien votre hébergement

Si vous utilisez un hébergeur mutualisé, il est très probable que les performances globales soient médiocres. Vous devriez envisager de mettre votre plan d'hébergement à niveau.

Vous disposez de 4 possibilités :

• Partagé : traditionnellement, l'option d'hébergement la moins chère consiste à partager les ressources du serveur avec d'autres.

• VPS : un serveur privé virtuel est nettement plus rapide, mais au lieu d'utiliser une seule machine, il en utilise plusieurs.

• Dédié : les serveurs dédiés sont évidemment les plus chers. Avec cette option, vous louez une machine entière qui peut généralement être configurée selon vos envies les plus folles.

• Sans serveur : depuis peu, le “sans serveur" s'est imposé car il offre une évolutivité inégalée à un coût réduit.

7. Réduire et combiner les fichiers CSS, JavaScript et HTML

Essayez  de charger à la fois JS et CSS en une seule requête pour chacun. Pour ce faire, il faut réduire et combiner les fichiers séparés en un seul ensemble.

Parallèlement, la minification est le processus d'optimisation de la taille des fichiers JavaScript et CSS en supprimant ou en raccourcissant les symboles dans le code source. 

8. Charger JavaScript de manière asynchrone

Lorsque le navigateur atteint une balise script qui charge JavaScript à partir d'une source distante, il attend que le fichier soit chargé avant de poursuivre le rendu du site web. C'est ce qu'on appelle le chargement synchrone.

Si vous définissez l'indicateur async sur la balise script, le navigateur chargera le script de manière asynchrone. Il continuera à analyser la page pendant le chargement du script.

9. Réduire le nombre de plugins

Les plugins sont des fonctionnalités réutilisables, généralement utilisées sur des logiciels comme WordPress ou d'autres plateformes. Ils offrent des fonctions supplémentaires telles que des analyses ou la possibilité de laisser des commentaires.

Mais certains plugins augmenteront le temps TTFB, car ils nécessitent un traitement supplémentaire sur le serveur pour chaque demande de page.

Donc, passez en revue votre liste de plugins et assurez-vous que vous avez vraiment besoin de chacun d'entre eux. Supprimez ceux qui ne sont pas essentiels pour votre site web.

10. Utilisez la mise en cache du site web

Définition

La mise en cache est le processus qui consiste à enregistrer une version de vos fichiers dans un emplacement de stockage temporaire (un cache) qui peut être consulté plus rapidement. 

L'activation de la mise en cache du navigateur présente de nombreux avantages, car elle permet de réduire la consommation de bande passante, d'améliorer les temps de chargement, de diminuer la latence et la charge de travail du serveur. 👌

Pour aller plus loin

Une fois que vous avez optimisé votre site techniquement et boosté ses performances SEO (et SXO, grâce à une meilleure expérience-utilisateur), découvrez comment faire apparaître vos pages dans Google Discover, en lisant notre guide dédié !

Pour offrir un site fluide à vos visiteurs, il est nécessaire d'optimiser les temps de chargement des pages web et les temps de réponse. 

La mise en œuvre des diverses techniques que nous venons d’évoquer peut améliorer considérablement vos performances digitales. 

N'oubliez pas que chaque seconde compte pour fidéliser vos visiteurs, stimuler vos conversions et augmenter le succès de votre site web. 🏆