L’indice de vitesse Google insight

Votre indice de vitesse sur Google PageSpeed Insights n’est pas bon ? Vous souhaitez améliorer le temps de chargement de votre site, que vous trouvez trop lent ? Optimisez la vitesse de votre site est la prochaine étape sur laquelle vous voulez travailler pour optimiser votre référencement ? Cet article est fait pour vous.

Notez que l’indice de vitesse est un critère très important pour Google, Notamment parce qu’il est modifié par l’ensemble des actions mises en places et qu’il est à la fois représentatif du temps chargement technique de la page et du ressenti de l’utilisateur qui consulte votre site Internet.

Au cas ou vous ne nous connaitriez pas encore, nous sommes l’agence 36 Pixels, spécialiste de la création de site Internet super performants, optimisés pour le temps de chargement, notamment en utilisant la technologie WordPress et/ou Vue.js. Accélérer le temps de chargement d’une page est tout un art ! Lisez attentivement cet article pour découvrir nos conseils pour améliorer votre indice de vitesse sur Google PageSpeed Insights ou sur Lighthouse.

Au programme de cet article :

• Définition de l’indice de vitesse.
• Optimiser son indice de vitesse
• Amélioration sur WordPress de la vitesse de son site

Qu’est ce que l’indice de vitesse de Google PageSpeed Insights ?

L’indice de vitesse est l’une des 6 données fournies par le test Google Page Speed Insights pour vous indiquer le temps de chargement de votre page. En voici sa définition.

Que mesure l’indice de vitesse ?

L’indice de vitesse d’un site Internet mesure la vitesse à laquelle le contenu de votre page est affiché à l’écran pendant le chargement de la page. Le plugin Lighthouse capture une vidéo du chargement de la page dans le navigateur puis calcule la progression de ce dernier, notamment sur le chargement des images. A un niveau un peu plus technique Lighthouse utilise ensuite le module Speedline Node.js pour générer le score de l’indice de vitesse.

Ce score obtenu est comparé à une base de donnée de milliers d’autres site pour obtenir un indice de vitesse moyen par rapport à l’ensemble du web. Voici l’échelle actuellement utilisée :

• Indice de vitesse entre 0 et 4.3s : site rapide (vert) avec un indice de vitesse entre 75 et 100
• Indice de vitesse entre 4.4 et 5.8s : site dans la moyenne (orange) avec un indice de vitesse entre 50 et 74
• Supérieur à 5.8 : site lent avec un indice entre 0 et 49.

Comment optimiser son indice de vitesse ?

L’indice de vitesse est une note globale, aussi tout ce que vous pourriez mettre en place comme solution devrait avoir un impact positif sur le temps de chargement. Voici tout de même quelques exemples qui devrait avoir un effet significatif sur cette indice et améliorer le temps de chargement de votre site :

Améliorer le processus de rendu de la page.

Le processus de rendu de la page peut générer des ralentissement dans le chargement de la page et l’accès aux interactions dans celle-ci. Pour afficher une page, le moteur de rendu analyse le HTML, construit le DOM (l’arborescence de la page), analyse le CSS pour mette en forme la page, puis s’occupe du JS pour mettre en place toute les interactions dans la page, on appelle cela le thread principal. Le pauvre, cela lui fait pas mal de boulot. Protégeons nos navigateurs, arrêtons de leurs demander d’afficher des pages !

Dès que le navigateur est trop sollicité durant le chargement de la page, il n’est pas en mesure de répondre directement aux interactions effectuées par l’utilisateur, qui sont donc stockées dans une queue et seront effectués dès que votre navigateur aura eu un peu le temps de souffler.

Comment diminuer le thread principal ?

Le principe de réduction du thread principal est à la fois simple et compliqué, cool non ? En voici les grands principes :

• Fragmenter son code pour n’envoyer que ce qui est requis pour afficher la page.
• Réduire et compresser son code source.
• Supprimer le code non utilisé.
• Réduire les connexions sur le réseau en mettant en cache le code avec le modèle PRPL

Avouons-le, ces solutions sont compliquées à mettre en place pour le commun des mortels, il faut un minimum de niveau technique, surtout pour fragmenter son code en fonction de ce qui est pré-requis ou non. Le mieux serait d’avoir une vision globale de tout cela et de mettre en place ces solutions au fur et à mesure du développement. Chacun de ces points seront sans doute l’objet d’articles futurs sur le blog.

Améliorer l’indice de vitesse sur WordPress.

Sur WordPress, les plugins de cache feront leurs effets sur l’indice de vitesse, mais aussi les plugins pour générer du critical path ou pour minifier le CSS et le JS. Notons par exemple :

• W3 Cache Total
• Autoptimize

Les différents tests existants pour mesurer la vitesse de son site.

L’indice de vitesse de Google Page Speed Insight est un bon indicateur pour mesurer la rapidité de chargement de son site Internet. Sachez tout de même qu’il y a d’autres test qui permettent de mesurer la célérité de votre site Web. Voici par exemples d’autres sites :

• Pingdom Tool
• GT Metrix
• WebPage Test

Pas de performance web sans un bon indice de vitesse.

En conclusion, sachez que n’importe quelle action positive que vous mènerez pour améliorer le chargement de votre site aura une incidence sur l’indice de vitesse. Par exemple, tout plugin WordPress agissant sur la minification, le cache ou autre solution pour améliorer le chargement de votre site aura une incidence sur l’indice de vitesse.

Cet indice de vitesse n’est pas à négliger lors d’une stratégie de réduction du temps de téléchargement d’un site. Sachez que pour Google, l’indice fait partie des critères les plus important en matière de performance web, avec le Time to Interactive. A titre d’exemple, une bonne note sur l’indice de vitesse est 4 fois plus importante qu’une bonne note sur le first meaningful paint et 2 fois plus importante qu’une bonne note sur le first cpu idle.

Si vous souhaitez vous faire accompagner dans une stratégie d’optimisation du chargement de votre site Internet, n’hésitez pas à nous contacter.