Quels sont les principaux bénéfices d'avoir un site rapide ?
La vitesse de chargement d'un site Internet est pris en compte dans le référencement naturel. Il s'agit d'un critère secondaire. C'est la raison pour laquelle vous verrez peut-être des sites plus lents être devant vous sur une requête donnée. Néanmoins, toute chose égale par ailleurs, le vitesse de chargement est utilisée par Google pour discriminer 2 pages.
S'agissant d'une optimisation sur site, autant faire le maximum directement !
Par ailleurs, la vitesse améliore directement l'expérience utilisateur de vos internautes. Autrement dit, un site rapide chargé, c'est moins d'attente pour le visiteur et une expérience navigation plus agréable. La conséquence directe se traduit par :
- un taux de rebond plus faible
- un temps sur site plus long
En conséquence, la vitesse est un facteur qui peut vous aider à atteindre plus rapidement votre objectif de conversion. Ces propos sont d'autant plus vrais qu'aujourd'hui, une part majoritaire du trafic en ligne est réalisé en situation de mobilité. L'appareil des internautes est moins puissant, et la connexion internet potentiellement plus limitée. Un site Internet performant garantit ainsi une expérience optimale de navigation indépendamment de l'origine et du matériel de vos visiteurs. Ce n'est pas un hasard si Google prend en priorité la version mobile de vos pages depuis la mise à jour du "Mobile Index First".
Vitesse de chargement : définition et exemples concrets
Définition de la vitesse de chargement
La question de la vitesse de chargement n'est pas si simple. Derrière "vitesse", on retrouve souvent un bon nombre d'acronymes plus ou moins utiles, et qui peuvent différer en fonction des outils que vous utilisez. Lorsqu'un navigateur se connecte à votre site, il interroge le serveur qui l'héberge, et télécharge les fichiers sources nécessaires à son affichage. En général, cela ressemble donc à cela :
La logique est somme toute simple :
- Lorsque le navigateur interroge un nom de domaine, un certain laps de temps se passe avant que celui-ci ne réponde
- Puis, de fichiers sont ensuite téléchargés de manière plus ou moins longue en fonction de leur poids.
- La page est entièrement affichée lorsque tous les fichiers nécessaires sont chargés (HTML, CSS et Javascript).
Chaque téléchargement de fichiers est lui même découpé en plusieurs étapes qui illustrent le parcours de votre connexion et des données échangées entre votre navigateur et le site web que vous consultez.
On retrouve ainsi les étapes suivantes, pour chaque ressource d'une page :
- DNS : le navigateur regarde les informations de localisation du serveur web
- SSL : le navigateur récupère les informations de sécurité
- Connect : le navigateur se connecte au serveur
- Send : le navigateur envoie des données au serveur
- Wait : le navigateur attend la réponse du serveur
- Receive : le navigateur reçoit les données du serveur
- Blocked : le navigateur est bloqué dans une étape.
Chaque étape requiert un certain temps, plus ou moins long (on parle ici de quelques millisecondes à quelques secondes). Une des premières stratégies est de réduire le temps de chaque étape pour augmenter la vitesse de chargement de la page !
Quels sont les leviers pour réduire chacune des étapes ?
Il existe des solutions pour optimiser le temps de réalisation de chaque étape.
Par exemple, utiliser un CDN permet de réduire le temps de connexion au serveur, car celui-ci est plus proche de vous physiquement. Pour que le temps de réponse du serveur (Etape Wait) soit la plus courte possible, il faut un hébergement de qualité et performant. Les plugins de cache permettent également de réduire le temps de réponse du serveur, puisqu'il n'est pas nécessaire pour ce dernier de solliciter la base de données.
Pour que l'étape "Receive" soit la plus courte possible, les fichiers doivent être les plus petits. De l'intérêt de la minification par exemple et de l'optimisation de vos images ! Enfin, un plugin comme Autoptimize permet de fusionner certains fichiers ensemble, ce qui évite au navigateur de recommencer les 6 étapes pour chaque fichier source.
Le chargement différé
Mais Google va plus loin dans son analyse de la vitesse, car il fait la distinction entre le chargement total réel, et la perception de la vitesse. Cet indicateur est appelé FCP (First Contentful Paint). En effet, au delà de chaque étape unitaire de téléchargement de chaque fichier de votre navigateur, il est possible de prioriser les fichiers afin de montrer certains contenus en priorité.
Google incite les webmasters à proposer des expériences de navigation où le contact avec l'internaute se fait le plus rapidement possible, en affichant des informations au plus vite au dessus de la ligne de flottaison (partie haute du site, visible par l'internaute). C'est l'un des principaux avantags du lazy loading qui ne bloque pas le chargement de ressources invisibles (images) au profit d'un contenu plus prioritaire en haut de page.
Les meilleurs outils pour suivre la rapidité de son site web
Google Speed Test
Le Google Speed Test, intitulé également PageSpeed Insights, est l'outil en ligne proposé par Google.
Il s'agit de la version en ligne d'un outil plus complet et Open Source, Lighthouse. PageSpeed mélange deux types d'information :
- Le test "en laboratoire" qui est une analyse directement réalisée par l'outil
- Les données agrégées d'internautes qui utilisent le navigateur Chrome, appelé : "Rapport d'expérience des utilisateurs de Chrome". Ainsi, Google donne une vision plus objective de la vitesse expérimentée par un pourcentage de vos visiteurs.
Ce test met en avant différentes métriques établies par Google (dont le FCP évoqué plus haut) afin d'évaluer la vitesse d'un site, et propose ensuite des recommandations très pertinentes sur la manière de corriger les problèmes.
Pour avoir une version complète de Lighthouse, vous pouvez lancer un audit directement depuis le navigateur de Chrome de manère suivante :
- Bouton droit de la souris -> Inspecter
- Onglets "Audits" -> Generate Report. Vous pouvez, sur cette interface, choisir le type précis de tests que vous souhaitez effectuer.
La page que vous visitez se recharge alors, et un audit très complet s'affiche pour vous donner des recommandations d'optimisation.
Conclusion : PageSpeed de Google est un outil absolument indispensable à connaître. C'est mon premier réflexe lorsque je souhaite avoir une bonne idée de la vitesse de mon site, et l'impact des changements que j'effectue sur la performance.
GT Metrix
GT Metrix est un outil ancien mais très efficace, qui répond parfaitement au besoin d'analyse de la performance. J'aime bien doubler une analyse Page Speed avec GT Metrix, qui donne des analyses également très terre à terre, et parfois un peu plus techniques sur les problèmes de chargement d'une page.
Le seul problème : il est parfois victime de son succès, et il n'est pas rare de devoir attendre un peu avant de pouvoir profiter d'une analyse complète de sa page !
A garder à l'esprit : les tests de vitesse sont effectués depuis un serveur Canada. Si votre site est en France et que vous ne disposez d'un CDN, le temps de chargement peut donc être plus lent !
Les résultats sont complets, et clairs, à condition de maîtriser la langue de Shakespear.
Pingdom Tools
Pingdom Tools est, pour faire simple, un concurrent direct de GT Metrix à mon goût. L'interface est un peu plus élégante et les résultats sont présentés de manière plus pédagogique. Il présente l'avantage de pouvoir choisir l'emplacement du serveur depuis lequel vous souhaitez réaliser votre test de performance. C'est donc un outil plutôt bien adapté aux néophytes qui veulent bien comprendre ce que signifient tous ces résultats techniques d'optimisation !
KeyCDN Tools
Le test de performance de KeyCDN est très utile pour vérifier la vitesse de réponse de votre serveur sur différents emplacements d'un coup. Le TTBF (Time To First Bye) est un élément important dans l'appréciation de la vitesse, et KeyCDN vous donne une lecture précise du temps de réponse (et non le temps de chargement total) de votre serveur en fonction de l'emplacement de l'internaute. KeyCDN réalise ce test à partir de 14 emplacements différents dans le monde ! C'est donc particulièrement lorsque votre audience est internationale.
Outil marketing très malin de la part de KeyCDN, qui est un fournisseur de Content Delivery Network comme son nom l'indique, il met le doigt sur la réalité de l'impact de la distance physique d'un serveur.
Je regarde de très près les résultats de cet outil, car c'est le seul qui permet d'avoir une vision "objective" de la performance de son hébergement (indépendamment de l'optimisation de son site).
Webpagetest
Webpagetest.org est un ancêtre ! Mais il est bien vivant, et est encore aujourd'hui une véritable référence dans l'appréciation de la vitesse d'un site. Comme ses acolyes GT Metrix et Pingdom Tools, WebPageTest met à disposition le détail de téléchargement des fichiers. Il permet de choisir l'emplacement du serveur de test, et d'avoir des résultats du TTBF, ainsi que de 3 des métriques crées par Google intitulées les "Web Vitals".
Les Web Vitals sont au nombre de 3 à l'heure actuelle :
- LCP (Largest Contentful Paint) : comme évoqué précédemment, il s'agit de la vitesse perçue par l'internaute. Pour être considrée comme bonne, cette valeur doit être inférieure à 2,5 secondes.
- FID (First Input Delay) : il s'agit du temps de réactivité de votre site. Dit autrement, il s'agit du temps entre la première interactivité sur le site (par exemple un lien cliqué) et du temps de réponse du site navigateur (début du chargement de la page). Ce temps doit être inférieur à 100ms. Typiquement, il arrive que du code source ralentissent ou gênent l'exécution de certains comportements sur un site. Webpagetest.org fournit la valeur la plus proche à ce stade : TBT (Total Blocking Time) pour des raisons techniques.
- CLS (Cumulative Layout Shift) : cette métrique mesure la stabilité visuelle. Il arrive parfois qu'en cliquant sur un bouton ou en réalisant une action sur un site, le design de ce dernier soit amené à bouger un peu (un bouton qui se déplace, un paragraphe qui se rétrécit ...). Le CLS tente de quantifier ce manque de stabilité. Le CLS doit être inférieur à 0,1 pour être considéré comme Bonne.
Pour le moment, notre site oudini.fr s'en sort plutôt bien !
