Google PageSpeed Insights : votre site Web est-il rapide ?

Un site Web avec un long temps de char­ge­ment sera non seulement vu d’un mauvais œil par les uti­li­sa­teurs, mais également par Google. La vitesse de char­ge­ment d’un site Web fait partie depuis 2018 des facteurs de clas­se­ment Google. Les pages lentes, que ce soit pour l’affichage mobile ou desktop, seront donc sanc­tion­nées par l’al­go­rithme. C’est par­ti­cu­liè­re­ment vrai dans la mesure où les pages qui mettent plus de deux secondes à s’afficher sont com­plè­te­ment ignorées par le robot d’in­dexa­tion Google. Il est également avéré que 32 % des uti­li­sa­teurs quittent un site Web si le temps de char­ge­ment excède les trois secondes.

Avec Google PageSpeed Insights, Google propose un outil dans le ré­per­toire qui permet d’aider à analyser la vitesse de char­ge­ment d’un site Web et si besoin de l’optimiser.

PageSpeed Insights est un outil de SEO Google, qui mesure et analyse en premier lieu le temps de char­ge­ment d’une URL. Pour cela, il suffit de rentrer l’adresse Internet dans le champ prévu à cet effet et de cliquer sur « Analyser ». Les résultats, ou « PageSpeed Insights » (en français : aperçu de la vitesse d’un site) sont ensuite affichés de manière claire et struc­tu­rée et répartis entre la version mobile et la version desktop. Il est possible de passer à l’un ou l’autre des aperçus très fa­ci­le­ment. Il est possible d’analyser n’importe quelle URL valide avec cet outil.

Les vé­ri­tables ex­pé­riences uti­li­sa­teurs issues de Chrome User Ex­pe­rience (aussi appelé CrUX) sont incluses dans l’analyse. Google reçoit les données d’uti­li­sa­teurs qui utilisent Chrome, son na­vi­ga­teur pro­prié­taire, et partagent vo­lon­tai­re­ment leurs données d’uti­li­sa­tion avec Google.

En outre, les données de Ligh­thouse viennent compléter l’analyse. Cet outil évalue l’accès, la per­for­mance et la facilité d’uti­li­sa­tion du site Web.

Le résultat de l’analyse Google PageSpeed Insights est affiché à l’aide d’une valeur de per­for­mance sur une échelle de 0 à 100. Cela permet d’obtenir une vue d’ensemble et aide ap­pré­hen­der en quelques secondes la puissance et les per­for­mances d’un site Web. Les résultats de PageSpeed Insights ne se limitent pas à ces seules valeurs. Ils proposent dif­fé­rents chiffres clés.

La valeur de per­for­mance s’affiche en haut, sur une échelle de 0 à 100 divisée en trois parties :

Viennent ensuite les données de terrain issues de CrUS (données des 28 derniers jours) si elles sont dis­po­nibles pour l’URL analysée. Si elles ne le sont pas, le message suivant s’affiche : « Le rapport d’ex­pé­rience uti­li­sa­teur Chrome ne contient pas assez de données réelles sur la vitesse pour cette page. »

Si les données de terrains existent pour ce site Web, les valeurs suivantes sont évaluées :

• First Con­tent­ful Paint (FCP) indique le temps écoulé avant que la première image ou le premier texte ne s’affiche en­tiè­re­ment.
• First Input Delay (FID) mesure le temps écoulé avant que l’uti­li­sa­teur puisse interagir avec le contenu du site Web.
• Largest Con­tent­ful Paint (LCP) mesure le temps écoulé avant que le plus gros élément du contenu ne soit visible dans la fenêtre.
• Cu­mu­la­tive Layout Shift (CLS) est le dé­pla­ce­ment inattendu d’éléments de la page alors que le site Web est encore en cours de char­ge­ment.

Les valeurs des données de terrain sont également classées par vitesse :

Rapide (vert)

• FCP : entre 0 et 1 seconde.
• FID : entre 0 et 0,1 seconde.
• LCP : entre 0 et 2,5 secondes.
• CLS : le dé­pla­ce­ment cumulé des éléments se situe entre 0 et 10 %.

Moyenne (orange) :

• FCP : entre 1 et 3 secondes.
• FID : entre 0,1 et 0,3 seconde.
• LCP : entre 2,5 et 4 secondes.
• CLS : le dé­pla­ce­ment se situe entre 10 et 25 pour cent.

Lente (rouge) :

• FCP : supérieur à 3 secondes.
• FID : supérieur à 0,3 seconde.
• LCP : supérieur à 4 secondes.
• CLS : le dé­pla­ce­ment est supérieur à 25 pour cent.

Google PageSpeed Insights obtient les données de la­bo­ra­toire grâce à l’outil en open source Ligh­thouse. Celui-ci indique la per­for­mance du site Web en par­cou­rant l’URL.

Les ca­té­go­ries « rapide », « moyenne », « lente » sont également affichées ici, de même que les rubriques FCP, LCP, CLS. Celles-ci ont des valeurs dif­fé­rentes pour les données de la­bo­ra­toire. Deux valeurs viennent s’ajouter aux pré­cé­dentes : Time to in­te­rac­tive (TTI), c’est-à-dire le temps jusqu’à l’in­te­rac­ti­vité et la durée totale du blocage, le Total Blocking Time (TBT).

La sixième valeur des données de la­bo­ra­toire est le Speed Index. L’index de vitesse mesure la vitesse à laquelle le contenu s’affiche vi­suel­le­ment lors du char­ge­ment d’un site Web. Ligh­thouse en­re­gistre d’abord une vidéo du processus de char­ge­ment de la page dans le na­vi­ga­teur et calcule la séquence visuelle entre les images.

Un aperçu des critères d’éva­lua­tion des données de la­bo­ra­toire :

Rapide (vert)

• FCP : entre 0 et 2 secondes.
• LCP : entre 0 et 2 secondes.
• CLS : entre 0 et 10 pour cent.
• TTI : entre 0 et 3,8 secondes.
• TBT : entre 0 et 0,3 seconde.
• Speed index : entre 0 et 4,3 secondes.

Moyenne (orange)

• FCP : entre 2 et 4 secondes.
• LCP : entre 2 et 4 secondes.
• CLS : entre 10 et 25 pour cent.
• TTI : entre 3,9 et 7,3 secondes.
• TBT : entre 0,3 et 0,6 seconde.
• Speed index : entre 4,4 et 5,8 secondes.

Lente (rouge)

• FCP : supérieur à 4 secondes.
• LCP : supérieur à 4 secondes.
• CLS : le dé­pla­ce­ment est supérieur à 25 %.
• TTI : supérieur à 7,3 secondes.
• TBT : supérieur à 0,6 seconde.
• Speed index : supérieur à 5,8 secondes.

L’affichage de captures d’écran est une fonc­tion­na­lité pratique de Ligh­thouse, par­ti­cu­liè­re­ment pour l’analyse du dé­pla­ce­ment des éléments cumulés (CLS) qui indique le dé­rou­le­ment de la cons­truc­tion de la page, y compris les in­for­ma­tions tem­po­relles.

Depuis quelques années déjà, la vitesse de char­ge­ment d’un site Web est un facteur important de l’op­ti­mi­sa­tion pour les moteurs de recherche. Les experts en SEO font toujours référence à l’im­por­tance de la vitesse de char­ge­ment pour le clas­se­ment. Les per­for­mances d’un projet Web sont calculées non seulement en fonction du temps de char­ge­ment, mais également du temps de réponse réduit, de la taille des pages et de la vitesse de té­lé­char­ge­ment. Google prend tout cela en compte dans son analyse.

La vitesse d’un site Web est une donnée relative. De manière générale, un temps de char­ge­ment de 1,5 à 3 secondes est considéré comme moyen, au-dessus l’on considère que le char­ge­ment est lent et en dessous, rapide et c’est ce vers quoi il faut tendre. Ces valeurs changent en fonction des évo­lu­tions tech­no­lo­giques. En 2016 par exemple, le temps moyen de char­ge­ment d’un site Web était supérieur à 3 secondes.

La vitesse seule ne suffit cependant pas pour que Google PageSpeed Insights évalue le site comme rapide. Cela ne dépend pas des mil­li­se­condes, mais de l’ex­pé­rience uti­li­sa­teur générale. C’est par­ti­cu­liè­re­ment vrai pour les versions mobiles dont la per­for­mance re­pré­sente un facteur de clas­se­ment à part entière pour Google.

Un site Web peut être classé comme rapide dans la version desktop, mais cela ne signifie pas que sa version mobile l’est aussi. Dans la mesure où de plus en plus d’uti­li­sa­teurs vont sur internet prin­ci­pa­le­ment avec leur smart­phone, le rôle de la version mobile ne doit pas être sous-estimé. Les mesures suivantes sont par­ti­cu­liè­re­ment per­ti­nentes pour que votre site Web soit également optimisé dans sa version mobile :

• Retirer le Ja­vaS­cript inutile afin de réduire la quantité de données né­ces­saires lors des activités en ligne.
• Utiliser des images dans des formats modernes. Les formats comme JPEG 2000, JPEG XR et WebP offrent souvent une meilleure op­ti­mi­sa­tion que les formats PNG ou JPED, un té­lé­char­ge­ment plus rapide et une uti­li­sa­tion moindre des données.
• Re­di­men­sion­ner les images à un format adapté pour éco­no­mi­ser les données mobiles et améliorer le temps de char­ge­ment.
• Éliminer les res­sources qui bloquent le rendering (rendu pho­to­réa­liste). Le Ja­vaS­cript et le CSS im­por­tants doivent être spécifiés en ligne et tous les scripts et styles non critiques doivent être reportés.
• Supprimer le code CSS non utilisé pour minimiser la quantité de données né­ces­saires lors de l’activité en ligne.
• Coder ef­fi­ca­ce­ment les images. Les images op­ti­mi­sées chargent plus ra­pi­de­ment et né­ces­si­tent moins de données mobiles.
• S’assurer que le texte reste visible pendant le char­ge­ment de la police Web en utilisant la fonction CSS d’affichage des polices. Ainsi, le texte est visible pour les uti­li­sa­teurs pendant que la police Web charge.
• Réduire les effets des codes tiers. Les codes tiers peuvent altérer con­si­dé­ra­ble­ment la vitesse de char­ge­ment.
• Fournir un contenu statique avec des consignes efficaces de mise en cache. Une durée de vie prolongée du cache permet d’accélérer le char­ge­ment des pages lors de visites répétées.
• Supprimer les images qui ne sont pas visibles.
• Com­pres­ser le Ja­vaS­cript
• Activer la com­pres­sion de texte.
• Établir un lien pré­li­mi­naire avec les sources requises.
• Éviter les re­di­rec­tions su­per­flues.

Les résultats de Google PageSpeed Insights pour la version mobile devraient être aussi im­por­tants pour le clas­se­ment que les résultats de la version desktop. En ce qui concerne son impact exact cependant, Google ne dévoile pas ses cartes. Mais dans la mesure où l’ex­pé­rience uti­li­sa­teur a une forte influence sur PageSpeed, on peut supposer que ce facteur est important dans le clas­se­ment. Dans tous les cas, dans la mesure où la per­ti­nence et la qualité du contenu in­fluen­cent le clas­se­ment, il est possible d’obtenir un bon clas­se­ment avec une vitesse de char­ge­ment moyenne. Dans l’idéal votre site sera aussi qua­li­ta­tif sur le plan technique que du point de vue du contenu.

Google PageSpeed Insights offre un premier aperçu des per­for­mances, problèmes présents et possibles solutions pour une URL spé­ci­fique ou pour le domaine entier. Ci-dessous, nous revenons en détail sur trois facteurs qui jouent un rôle décisif.

Les images sont gé­né­ra­le­ment ce qui demande le plus de res­sources sur un site Web. La plupart sont trop grandes, dans le mauvais format et ont gé­né­ra­le­ment de mauvais titres. Cela pose non seulement des problèmes avec Google, mais également avec les visiteurs qui quittent les sites Web si les images ne sont pas en­tiè­re­ment chargées au bout de quelques secondes.

La plupart des images sont aux formats JPEG ou PNG. Cependant, pour un site Web, les formats JPEG 2000, JPEG XR et WebP sont beaucoup plus adaptés, car ils se com­pres­sent fa­ci­le­ment sans perdre en qualité d’affichage. Une image de 440,7 ko en .jpeg peut n’en faire que 135,1 ko avec JPEG 2000. Cette dif­fé­rence cumulée est notable, surtout pour les sites Web avec de nom­breuses images.

À l’ère des images en haute ré­so­lu­tion, il est pri­mor­dial de com­pres­ser chaque image avant de la charger sur le site Web. Les images dont la taille excède plusieurs mé­gaoc­tets n’ont pas leur place sur un site Web ordinaire. Les pro­grammes de trai­te­ment d’image comme Photoshop offrent donc des fonctions comme « En­re­gis­trer pour le Web » qui per­met­tent de sau­ve­gar­der la photo avec une ré­so­lu­tion optimisée pour un affichage Web.

Ce sont parfois les détails qui font toute la dif­fé­rence. La mise en cache dans le na­vi­ga­teur allège le transfert de données des serveurs aux clients ce qui améliore la vitesse des sites Web. Pour que toutes les données d’un site Web n’aient pas à être té­lé­char­gées à chaque visite, le na­vi­ga­teur peut avoir accès aux données en­re­gis­trées dans la mémoire tem­po­raire.

Le cache ne fonc­tionne de manière optimale que lorsque le na­vi­ga­teur sait combien de temps il doit conserver les données. Les données d’un site Web doivent donc avoir une date de pé­remp­tion. Un code HTML dynamique doit, dans la mesure où il change con­ti­nuel­le­ment, être réen­re­gis­tré plus fré­quem­ment que les images, par exemple.

La solution la plus fréquente pour régler la mise en cache dans le na­vi­ga­teur est d’utiliser le module « mod_expires », au moins lorsque le site Web est hébergé sur un serveur Apache. La commande « IfModule » permet de vérifier si le module est déjà activé. Les dif­fé­rents types de fichiers peuvent alors être traités grâce à la commande « Ex­pi­res­By­Type ». La date de pé­remp­tion se définit ex­clu­si­ve­ment avec la commande « Access plus 7 days », qui fixe la durée minimale de con­ser­va­tion des fichiers pour le na­vi­ga­teur à sept jours. Une fois ce délai expiré, les données seront à nouveau té­lé­char­gées. Ce délai peut être réglé in­di­vi­duel­le­ment et varier selon les types de fichiers. Une semaine est cependant le délai re­com­mandé.

La mise en cache peut notamment être activée avec le code suivant dans le fichier .htaccess-Datei

Le temps de char­ge­ment moyen d’un site Web (dans le cas de visites répétées par l’uti­li­sa­teur) peut ainsi être con­si­dé­ra­ble­ment amélioré. Vérifier Google PageSpeed Insights est re­com­mandé lors des réglages afin de dé­ter­mi­ner le délai idéal pour les dif­fé­rents types de fichiers.

Il y a beaucoup à faire et à améliorer de ce point de vue. La plupart des serveurs sont sur des pla­te­formes d’hé­ber­ge­ment mutualisé et disposent de res­sources limitées. Cela peut ralentir l’accès et le temps de char­ge­ment des sites Web. Le problème peut se résoudre en réservant plus de puissance (pro­ces­seur, mémoire de travail, etc.) ou trans­fé­rer le site Web sur un serveur dédié. Dans ce cas, cependant, le pa­ra­mé­trage du matériel doit être pensé en fonction du site Web. Un serveur d’hé­ber­ge­ment adapté peut con­si­dé­ra­ble­ment augmenter les per­for­mances d’un site Web. Pour en savoir plus et comparer les options, consultez notre article « Hé­ber­ge­ment mutualisé ou dédié : com­pa­ra­tif des deux modèles ».