Arrêter Google PageSpeed

Fermez Google PageSpeed ! Corriger les messages d'erreur les plus importants

Google PageSpeed Insights est un excellent moyen d'obtenir rapidement un aperçu du potentiel d'optimisation de ton site web. Je te montre aujourd'hui comment utiliser ce potentiel et augmenter ton PageSpeed Score. Tu ne dois cependant pas te conformer servilement aux résultats de Google. En effet, les messages d'erreur PageSpeed ne sont pas toujours utiles.

Il y a quelque temps, le collègue Caspar Hübinger a été très clair dans l'un de ses billets de blog sur son résultat Google PageSpeed Insights. Et il ne critique pas seulement l'outil, mais aussi l'utilisation de l'outil lui-même. En effet, si l'on ne sait pas comment interpréter et corriger les différentes propositions d'optimisation, on peut vite se perdre dans une course insensée pour obtenir un score de 100. Mais ce serait imprudent. En effet, les scores utopiques de Google PageSpeed sont souvent une perte de temps. Il est plus important d'optimiser le temps de chargement.

Je te montre aujourd'hui comment interpréter les principaux messages d'erreur de Google PageSpeed Insights et comment optimiser ton site en conséquence.

Mais avant de te montrer comment interpréter les différents messages d'erreur et corriger les erreurs, j'aimerais d'abord revenir sur la façon dont tu utilises correctement Google PageSpeed Insights . En effet, nous avons déjà vu des personnes se focaliser sur leur PageSpeed Score sans se soucier du temps de chargement de leur site.

Si cette section ne t'intéresse pas, saute-la et apprends directement comment résoudre le message d'erreur "Compresser CSS".

Les messages d'erreur Google PageSpeed ne sont pas toujours corrects et importants

Tu ne dois jamais te fier uniquement aux résultats ou aux messages d'erreur de Google PageSpeed Insights . Car l'outil Google ne mesure pas la valeur la plus importante de ton site web : le temps de chargement des pages. Pour le mesurer correctement, je te recommande Webpagetest.org.

Ce n'est qu'en gardant à l'esprit le temps de chargement des pages dès le début de l'optimisation de ton site web que tu pourras faire des déclarations pertinentes sur le succès de l'optimisation. Car l'objectif de toute optimisation devrait toujours être d'améliorer l'expérience utilisateur. Dans le cas de l'optimisation des performances, il s'agit bien sûr du temps de chargement des pages et du temps de chargement des pages ressenti.

RAPPEL.

Mesure toujours le temps de chargement des pages avant d 'optimiser la performance de ton site web. C'est la seule façon d'évaluer le succès de l'optimisation.

Pour l'expérience utilisateur, un temps de chargement de page plus rapide et une taille de page plus petite sont toujours des avantages. La patience et la durée d'attention des gens diminuent de plus en plus(comme le montre cette étude de Microsoft) - ce qui est particulièrement crucial pour le commerce électronique - et de plus en plus de trafic provient des appareils mobiles. En 2016 déjà, 56% des Allemands ont régulièrement consulté Internet via des smartphones ou des tablettes. Ici, les vitesses de connexion et les volumes de données ne sont pas toujours illimités. Il est donc conseillé d'avoir des sites Internet légers et rapides.

Mais Google PageSpeed ne donne que des indications sur les potentiels d'optimisation de ton site web et ne permet que peu de conclusions sur l'expérience utilisateur. La faible valeur informative des messages d'erreur de Google PageSpeed est renforcée par le fait que l'outil ne peut pas être mis au repos dans certains domaines ou seulement au prix d'un effort supplémentaire considérable.

Par exemple, la référence à la mise en cache du navigateur apparaîtra chaque fois que des ressources externes - y compris les services propres à Google - seront intégrées. Mais ces ressources ne peuvent pas être couvertes par la mise en cache du navigateur de ton site Web. Le message d'erreur n'est donc pas pertinent pour l'expérience utilisateur de ton site web, mais est produit par la logique de l'outil lui-même. Dans le pire des cas, le message est interprété comme si la mise en cache du navigateur n'était pas active.

Ne vous concentrez donc pas principalement sur le classement de Google, mais sur le temps de chargement. C'est le seul paramètre vraiment important.

Mais qu'en est-il de mon classement Google ?

L'exemple du message concernant l'absence de mise en cache du navigateur montre clairement pourquoi tu ne dois pas te laisser déstabiliser par un prétendu mauvais résultat PageSpeed.

Si tu as intégré Google Maps ou Google Analytics sur ton site Web, par exemple, ils provoqueront le message d'erreur suivant :

Même chose pour d'autres services de tiers. Par exemple, notre chat d'assistance.

C'est pourquoi, à chaque fois que nous testons notre site web sur PageSpeed Insights , ce point est mis en cause. Cela signifie que nous savons que ce facteur fausse toujours nos résultats de manière négative et que nous l'ignorons donc tout simplement.

Pour le SEO de ton site web, cela signifie que même pour le classement sur Google, le temps de chargement et l'expérience utilisateur sont bien plus importants que le score PageSpeed concret.

En effet, si tu optimises le temps de chargement de ton site, tu travailleras automatiquement sur de nombreux domaines importants pour Google. L'amélioration du temps de chargement et du score Google PageSpeed sont donc liés d'une certaine manière.

Mais à mon avis, il ne faut pas se perdre dans la chasse au score de 100.

Maintenant, passons aux étapes d'optimisation !

Message d'erreur 1 : Compresser le CSS

D'après notre expérience, il s'agit de l'un des messages d'erreur les plus décourageants de Google PageSpeed Insights.

Fermez Google PageSpeed ! Corriger les messages d'erreur les plus importants

Signification : ce message d'erreur indique que les fichiers CSS de ton site web peuvent encore être comprimés (ou, dans le cas ci-dessus, que cela a déjà été fait avec succès). Lors d'une telle réduction, le nombre de caractères dans les documents est diminué. Ainsi, la taille du fichier diminue. Les commentaires, les espaces et le formatage sont par exemple supprimés.

Mise en œuvre : même si cette remarque peut sembler dissuasive, la mise en œuvre est très simple. Dans ce cas, il existe en principe deux solutions : Si tu es toi-même compétent en CSS, tu peux réduire manuellement le nombre de fichiers CSS et utiliser une écriture courte lors de leur création. Tu peux également réduire la taille des fichiers CSS à l'aide d'outils en ligne tels que le CSS Minifier.

Fermez Google PageSpeed ! Corriger les messages d'erreur les plus importants

Bien sûr, il existe aussi la solution confortable des plugins de minification CSS dans WordPress. Certains plugins font directement un tour complet et peuvent comprimer et optimiser non seulement le CSS, mais aussi le JavaScript et le HTML.

Plus d'infos

Pour une explication détaillée des façons dont vous pouvez réduire le HTML, le CSS et le JavaScript dans WordPress , voir cet article.

Avec HTTP/2, la fusion des CSS n'a pas nécessairement de sens.

Les plugins Minify mentionnés ci-dessus sont très répandus. Car ils sont confortables et se chargent de la compression et du regroupement des CSS (et bien plus encore) de manière entièrement automatique. Jusqu'il y a peu, le regroupement de fichiers CSS avait aussi beaucoup de sens. Aujourd'hui, les choses ont changé : depuis l'apparition du standard HTTP/2, les navigateurs sont capables de charger plusieurs fichiers en même temps à partir du serveur web.

Cela signifie que les données ne doivent plus obligatoirement être regroupées, car avec HTTP/2, plusieurs paquets de données peuvent être échangés simultanément. HTTP/2 doit par exemple avoir été mis en place par l'hébergeur et ne peut être utilisé qu'avec un certificat SSL.

Donc, avant de vous décider pour un Plugin avec plusieurs dizaines de fonctions et d'options de configuration, réfléchissez bien si vous en avez besoin. Surtout si vous êtes sûr de pouvoir optimiser le CSS par vous-même.

Car un plugin supplémentaire peut éventuellement ralentir ton site web. Surtout si les autres fonctions des plug-ins à tout faire ne peuvent pas atteindre leur plein potentiel.

Message d'erreur 2 : Supprimer les ressources qui bloquent l'affichage

Cette annonce donne également des sueurs froides à de nombreuses personnes, car elle n'est pas si facile à mettre en œuvre et constitue en outre l'une des éternelles critiques de Google PageSpeed.

Fermez Google PageSpeed ! Corriger les messages d'erreur les plus importants

Signification : un site web se construit dans un certain ordre. Cet ordre de chargement peut être optimisé. PageSpeed déplore presque toujours que les fichiers CSS bloquent cet ordre de chargement optimal. Et ce, même sur des sites déjà très bien optimisés(comme le montre le cas de Caspar Hübinger). Néanmoins, cette indication peut être très précieuse pour l'optimisation du temps de chargement. En principe, cette indication te dit que le code JavaScript ou CSS qui est important pour un élément à charger - par exemple une couleur de fond - n'est pas encore disponible au moment du chargement de l'élément. Il ne sera donc pas affiché tant que la commande CSS correspondante n'aura pas été chargée. Cela n'augmente pas le temps de chargement de ton site Web, mais cela affecte surtout l'expérience utilisateur, car le site Web semble se charger plus longtemps.

Mise en œuvre : une solution courante consiste à appliquer une règle du pouce : placer le CSS dans l'en-tête. Cela signifie que tu déplaces le code CSS de la partie principale du document HTML, le "body", vers le début du document, le "head", où tu l'intègres en tant que "style".

Cet exemple illustre bien ce que je veux dire. L'extrait de code ci-dessous définit une couleur de fond pour un blog. L'élément "style" est chargé dans le "head" du document HTML. Ainsi, l'arrière-plan de la page ne se charge pas à la fin du document et crée un saut de couleur inesthétique ou bloque même le rendu.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

Tu peux à nouveau mettre en œuvre cette mesure d'optimisation de deux manières : Tu peux toucher toi-même au code et déplacer les codes CSS dans l'en-tête, ou tu peux laisser un plugin faire le travail.

Le plugin Autoptimize, par exemple, fait le tour de la question : Tu sélectionnes ici les options pour tous les fichiers CSS qui ne sont pas exclus du processus.

L'extrait des options du plugin le montre : Même la variante du plugin n'est pas réalisable sans une compréhension de base du processus. Tu dois donc aussi te familiariser avec les plugins.

"*" indique les champs requis

Je souhaite m'abonner à la newsletter pour être informé des nouveaux articles de blog, des ebooks, des fonctionnalités et des nouvelles de WordPress. Je peux retirer mon consentement à tout moment. Merci de prendre connaissance de notre politique de confidentialité.
Ce champ sert à la validation et ne doit pas être modifié.

Message d'erreur 3 : Encodage efficace des images

C'est un autre point sur lequel PageSpeed Insights se plaint souvent. Toutefois, cette affaire est presque toujours rapide et facile à mettre en œuvre et apporte généralement des avantages tangibles en termes de temps de chargement.

Fermez Google PageSpeed ! Corriger les messages d'erreur les plus importants

Importance : Beaucoup de gens sous-estiment le rôle de la taille de l'image dans le temps de chargement de leur site web. Pourtant, les images sont souvent l'un des principaux freins au temps de chargement. Même si les images individuelles ne permettent d'économiser qu'une petite quantité de données, le volume total économisé peut s'élever à une quantité de données considérable.

Parce qu'une image est rarement une simple image. WordPress génère automatiquement plusieurs vignettes de l'image lors du téléchargement. Donc, si vous n'utilisez pas les originaux sur votre page d'accueil, mais des versions plus petites, c'est-à-dire des vignettes ou des images vedettes, alors celles-ci doivent bien sûr être optimisées. Une image se transforme rapidement en plusieurs fichiers, qui entraînent également une charge de données multiples.

Mise en œuvre : En principe, vous avez deux options pour optimiser vos images. Soit vous optimisez les images avant le téléchargement, soit après ou pendant le téléchargement. Dans le premier cas, vous pouvez le faire via des outils en ligne ou hors ligne, dans le second cas, vous pouvez le faire via lesplugins d'optimisation d'images correspondants de WordPress .

Si tu peux intégrer la compression dans ton processus de travail, il est logique d'optimiser les images avant de les télécharger. Il existe des outils en ligne pour cela, comme Kraken.io, ou tu peux réduire la qualité et donc la taille de tes images hors ligne, par exemple directement dans Photoshop. Tu économises ainsi le plugin supplémentaire et ton site reste léger.

La solution la plus confortable est bien sûr un plugin. Les plugins comme Optimus ou Smush optimisent non seulement l'image principale, mais aussi toutes les variations de celle-ci. De plus, Smush est également capable d'optimiser toutes tes images existantes après coup.

Entre autres choses, Plugins fonctionne avec une compression dite "sans perte". Cela signifie que la taille des fichiers des images est réduite, mais que leur qualité visible ne diminue pas.

Message d'erreur 4 : Activer la compression de texte

Ce message d'erreur de Google PageSpeed est très rapide à corriger et peut réduire considérablement le temps de chargement de ton site.

Fermez Google PageSpeed ! Corriger les messages d'erreur les plus importants

Signification : tu as déjà réduit autant que possible les images et les CSS de ton site web. C'est bien ! Mais ce n'est pas tout. Tu peux maintenant utiliser un autre mécanisme de compression. Tu connais probablement ce processus en téléchargeant de gros paquets de données : Tu les as généralement sous forme zippée, c'est-à-dire compressée. Cela rend les données plus petites lors du téléchargement et donc le téléchargement plus rapide. Cependant, les paquets de données doivent encore être décompressés après le téléchargement. La même chose se produit lors de la construction de la page : Le serveur web livre les paquets de données compressés, le serveur web les décompresse. Cela rend le transfert de données plus rapide et réduit le temps de chargement des pages.

Mise en œuvre : soit la compression des données est déjà configurée sur le serveur, soit tu dois l'activer toi-même. Chez Raidboxes , tu ne dois plus t'occuper de rien. Car nous avons activé par défaut la compression Brotli, particulièrement puissante.

Avec l'entrée suivante dans ton .htaccess, tu peux aussi activer manuellement la compression GZIP. A condition que tu aies un serveur web Apache.

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Message d'erreur 5 : fournir un contenu statique avec une politique de cache efficace 

A mon avis, la mention de la mise en cache du navigateur est de loin la plus agaçante sur Google PageSpeed Insights. Car tu ne peux configurer la mise en cache du navigateur que pour tes propres ressources. Pour les ressources externes, la mise en cache du navigateur n'est pas possible.

Fermez Google PageSpeed ! Corriger les messages d'erreur les plus importants

Signification : La mise en cache du navigateur signifie que le navigateur enregistre une version statique de ton site web et que, lors d'une visite répétée, il n'a plus besoin de demander au serveur web, car le site web est déjà chargé.

Mise en œuvre : soit ton hébergeur a déjà activé la mise en cache du navigateur côté serveur, soit tu peux la régler en manipulant le fichier .htaccess (n'oublie pas : ce réglage ne fonctionne que sur les serveurs web Apache). Par exemple, le code d'exemple ci-dessous définit le cache du navigateur sur un mois, ce qui signifie que la version statique de ton site web est stockée dans le navigateur du visiteur pendant un mois.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Là encore, si tu es client de Raidboxes , la mise en cache du navigateur est déjà active par défaut.

My 2 Cents : Sans cache, tout n'est rien

Bien, maintenant tu as optimisé les images de ton site, réduit, compressé et mis en ordre les CSS, et fait en sorte que le navigateur de tes visiteurs mette le site en cache. Toutes ces mesures réduisent le temps de chargement de ton site web.

Importance : Sans une bonne mémoire cache, tu perds beaucoup de ce potentiel. La mise en cache est et reste de loin le facteur de performance le plus important. Un cache stocke temporairement le contenu de ton site WordPress et permet de ne pas avoir à recharger l'ensemble du site à chaque fois. Au lieu de cela, une variante statique, c'est-à-dire déjà rendue, de ton site web est livrée à partir d'une mémoire tampon. Cela permet notamment de contourner la lenteur de PHP et de la base de données.

Mise en œuvre : là encore, soit ton hébergeur a déjà mis en place un cache côté serveur, soit tu utilises un plugin de cache. Il existe ici quelques plugins très puissants qui mettent en cache de grandes parties de ton site web et permettent de réduire considérablement le temps de chargement des visites récurrentes du site web.

La grande puissance des plugins de cache est aussi leur plus grande faiblesse. Il est tout à fait possible qu'un plugin de mise en cache ralentisse ton site web pour les premiers visiteurs. En effet, plus ton blog ou ton site web est compliqué, plus le moteur de cache qui met ton blog en cache doit être compliqué et étendu. Ceci est particulièrement important pour les boutiques.

Si tu gères un site web relativement simple, les solutions minimalistes peuvent être meilleures que les solutions de mise en cache à tout faire. Un de ces plugins légers est par exemple Cache Enabler.

Il faut savoir que les plugins de mise en cache se chargent généralement aussi de la réduction et du regroupement des CSS ou JavaScript. Tu devrais donc vérifier si ton plugin de mise en cache ne rend pas déjà les plugins d'optimisation CSS superflus.

Si tu utilises la mise en cache côté serveur, il est recommandé de désactiver les fonctions de mise en cache des plugins comme Autoptimize ou de tester si elles apportent un avantage supplémentaire en termes de performances.

Conclusion : bouger beaucoup avec peu Plugins

Tu l'as déjà remarqué pendant ta lecture : pour l'optimisation des CSS, des images et l'optimisation de l'ordre de chargement, il existe des plugins qui font beaucoup de travail pour toi. Mais pas tout le travail. Les plugins de mise en cache fournissent aussi rapidement un effet notable, mais ils sont parfois très complets et offrent de nombreuses possibilités de configuration et des fonctions parfois redondantes.

Il est important que tu t'intéresses de plus près aux plugins que tu utilises. Ce n'est que si tu sais ce qui se passe lorsque tu utilises certaines fonctions que tu peux optimiser de manière judicieuse. Surcharger ton site avec des plugins d'optimisation n'est pas très utile.

Et tu dois veiller à mesurer correctement tes succès lors de l'optimisation. Peu importe que tu optimises à la main ou via un plugin. Utilise PageSpeed Insights comme premier point de repère pour identifier les points faibles de ton site. Mesure ensuite le temps de chargement de ton site avant l'optimisation. Ce n'est qu'après cette évaluation de la situation initiale que l'optimisation de ton site Web étape par étape prend tout son sens. En effet, ce n'est qu'en connaissant le temps de chargement avant l'optimisation et après chaque étape d'optimisation que tu peux déterminer ce que les différentes mesures d'optimisation ont apporté.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Un commentaire sur "Shut up Google PageSpeed ! Corriger les messages d'erreur les plus importants"

  1. Hi Martin,
    du hast total Recht, dass es auf unserer Website noch einiges an Optimierungsbedarf gibt. Durch unseren Website Relaunch und unser Mehrsprachigkeitsplugin haben wir leider einige 404er und andere Errors, die Google zurecht schlecht bewertet. Wir sind aber dran 😁
    VG aus Münster
    Leefke

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un *.