Google PageSpeed Insights est un excellent moyen d'avoir un aperçu rapide du potentiel d'optimisation de votre site. Aujourd'hui, je vais vous montrer comment utiliser ce potentiel et augmenter votre score de PageSpeed. Mais vous ne devez pas suivre servilement les résultats de Google. Parce que les messages d'erreur PageSpeed ne sont pas toujours utiles.

Le collègue Caspar Hübinger a trouvé il y a quelque temps dans l'un de ses blogs des mots très clairs, disons, pour son résultat sur Google PageSpeed Insights. Et il critique non seulement l'outil, mais aussi l'utilisation de l'outil par les utilisateurs. Après tout, si vous ne savez pas comment interpréter et corriger chaque suggestion d'optimisation, vous pouvez rapidement vous perdre dans la poursuite absurde d'un score de 100. Ce serait toutefois imprudent. Parce que les cotes PageSpeed de Google, utopiquement élevées, sont le plus souvent une perte de temps. L'optimisation du temps de chargement est plus importante.

Entièrement réactif, se charge en 500 ms, et le brillant outil de merde de Google me dit que les performances de mon mobile sont "correctes", bc de rendu-fucking-blockhead CSS.

- Caspar Hübinger (Glueckpress)

Aujourd'hui, je vais vous montrer comment interpréter les messages d'erreur les plus importants de Google PageSpeed Insights et optimiser votre site en conséquence.

Mais avant de vous montrer comment interpréter les différents messages d'erreur et corriger les erreurs, j'aimerais vous expliquer comment utiliser correctement Google PageSpeed Insights . Parce que nous avons souvent constaté que les utilisateurs étaient fortement fixés sur leur score de vitesse de page sans avoir un œil sur le temps de chargement de leur page.

Si cette section ne vous intéresse pas, sautez la et apprenez directement comment corriger le message d'erreur "Compresser le CSS".

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

Vous ne devez jamais vous fier uniquement aux résultats ou aux messages d'erreur de Google PageSpeed Insights . Parce que l'outil Google ne mesure pas le paramètre le plus important de votre site : le temps de chargement des pages. Pour bien mesurer cela, je recommande Webpagetest.org.

Ce n'est que si vous avez le temps de chargement des pages à l'esprit dès le début lorsque vous optimisez votre site que vous pouvez faire des déclarations significatives sur le succès de l'optimisation. Parce que l'objectif de toute optimisation devrait toujours être une amélioration de l'expérience de l'utilisateur. Dans le cas de l'optimisation des performances, il s'agit bien sûr du temps de chargement de la page et du temps de chargement perçu de la page.

Du point de vue de l'utilisateur, un temps de chargement plus rapide et une taille de page plus petite sont toujours bénéfiques. La patience et la capacité d'attention de l'utilisateur moyen continuent à diminuer(comme le montre cette étude de Microsoft) - ce qui est particulièrement crucial pour le commerce électronique - et de plus en plus de visiteurs viennent par le biais d'appareils mobiles. En 2016 déjà, 56 % des Allemands accédaient régulièrement à Internet via des smartphones ou des tablettes. Ici, les vitesses de connexion et les volumes de données ne sont pas toujours illimités. Des pages simples et rapides sont donc appropriées.

Google PageSpeed, cependant, ne donne que des indications sur les potentiels d'optimisation de votre page et ne permet que peu de conclusions sur l'expérience de l'utilisateur. La faible importance des messages d'erreur de Google PageSpeed est renforcée par le fait que l'outil ne peut pas être arrêté dans certaines zones, ou seulement avec un effort supplémentaire considérable.

Par exemple, la référence à la mise en cache du navigateur apparaîtra toujours lorsque des ressources externes - y compris les propres services de Google - sont incluses. Cependant, ces ressources ne peuvent pas être couvertes par la mise en cache du navigateur de votre page. Le message d'erreur n'a donc aucun rapport avec l'expérience de l'utilisateur de votre site, mais il 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 sur Google ?

L'exemple de la mise en cache manquante du navigateur montre très bien pourquoi vous ne devez pas vous laisser décourager par un résultat PageSpeed supposé mauvais.

Par exemple, si vous avez intégré Google Maps ou Google Analytics sur votre site, ils généreront le message d'erreur suivant :

Il en va de même pour les autres services de tiers. Par exemple, notre chat de soutien.

Par conséquent, chaque fois que nous testons notre site PageSpeed Insights , ce point est mis en évidence. C'est-à-dire que nous savons que ce facteur fausse toujours négativement nos résultats, donc nous l'ignorons tout simplement.

Pour le référencement de votre site, cela signifie que le temps de chargement et l'expérience de l'utilisateur sont également beaucoup plus importants pour le classement Google que le score spécifique de la vitesse de la page.

En effet, si vous optimisez le temps de chargement de votre page, vous travaillerez automatiquement sur de nombreux domaines importants pour Google. Une amélioration du temps de chargement et le score de 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.

Signification : Ce message d'erreur indique que les fichiers CSS de votre page peuvent encore être compressés (ou, dans le cas ci-dessus, que cela a déjà été fait avec succès). Une telle réduction réduit le nombre de caractères des documents. Cela permet de réduire la taille du fichier. Les commentaires, les espaces et le formatage, par exemple, sont supprimés.

Mise en œuvre : même si cette allusion semble décourageante, la mise en œuvre est en principe simple. En principe, il y a deux solutions possibles pour cette affaire : Si vous êtes vous-même apte au CSS, vous pouvez réduire manuellement le nombre de fichiers CSS et utiliser une notation sté nographique lors de leur création. Vous pouvez également réduire vous-même les fichiers CSS à l'aide d'outils en ligne tels que le compresseur CSS ou le miniaturiseur CSS.

Bien sûr, il y a aussi la solution confortable par le biais de la minification CSSPlugins dans WordPress . Certains Plugins font directement un coup d'éclat et peuvent comprimer et optimiser non seulement les CSS, mais aussi les JavaScript et les HTML.

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

Les Minify-Plugins que nous venons de mentionner sont largement utilisés. En effet, ils sont pratiques et se chargent de compresser et de fusionner les CSS (et bien plus encore) de manière entièrement automatique. Jusqu'à récemment, la fusion des fichiers CSS était également très judicieuse. Maintenant, c'est différent : depuis que la norme HTTP/2 existe, les navigateurs peuvent charger plusieurs fichiers du serveur web en même temps.

Cela signifie que les données ne doivent plus nécessairement être combiné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.

Parce qu'un Plugin supplémentaire peut rendre votre page plus lente dans certaines circonstances. Surtout si les autres fonctions du site polyvalentPlugins ne peuvent pas se développer pleinement.

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

De plus, ce message entraîne chez de nombreux utilisateurs des perles de sueur sur le front, car il n'est pas si facile à mettre en œuvre et c'est aussi l'un des éternels points de critique de Google PageSpeed.

Signification : Une page web est construite dans un certain ordre. Cet ordre de chargement peut être optimisé. PageSpeed se plaint presque toujours que les fichiers CSS bloquent cet ordre de chargement optimal. Et cela est vrai même pour des pages qui sont déjà très bien optimisées(comme le montre le cas de Caspar Hübinger ). Néanmoins, l'indice peut être très précieux pour l'optimisation du temps de chargement. En gros, cet indice vous indique que le code JavaScript ou CSS qui est important pour le chargement d'un élément - par exemple, une couleur de fond - n'est pas encore disponible au moment où l'élément est chargé. Par conséquent, il ne sera pas affiché tant que la commande CSS appropriée n'aura pas été chargée. Cela augmente le temps de chargement de votre page, mais surtout, cela affecte l'expérience de l'utilisateur car la page semble plus longue à charger.

Umsetzung: Eine gängige Lösung ist die Umsetzung einer Daumenregel: CSS in den Header. Das bedeutet, dass du CSS-Code vom Hauptteil des HTML Dokuments, dem <body>, an den Anfang des Dokuments, den <head>, verschiebst und dort als <style> einbindest.

An diesem Beispiel wird deutlich, was ich meine. Der Codeschnipsel unten definiert unsere spezifische Hintergrundfarbe für den Blog. Das <style>-Element wird im head des HTML-Dokuments geladen. So lädt der Seitenhintergrund nicht erst am Ende des Dokuments und erzeugt einen unschönen Farbsprung oder blockiert gar das Rendering.

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

Là encore, vous pouvez mettre en œuvre cette mesure d'optimisation de deux manières : Vous pouvez toucher le code vous-même et déplacer les codes CSS dans l'en-tête, ou vous pouvez laisser un Plugin faire le travail. Encore une fois, Plugins comme Better WordPress Minify vous aidera dans ce domaine.

La fonction "MinifyPlugin " indique dans les options, par exemple, quels fichiers CSS ont déjà été déplacés dans l'en-tête. Vous pouvez également ajouter manuellement d'autres ressources CSS ici.

Le site Plugin Autoptimize, en revanche, fait tout son possible : Vous sélectionnez ici les options pour tous les fichiers CSS qui ne sont pas exclus du processus.

Les extraits des options du spectacle Plugins : Même la variante du plugin ne peut être mise en œuvre sans une compréhension de base du processus. Vous devez donc aussi vous familiariser avec Plugins .

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.

Importance : De nombreux utilisateurs sous-estiment le rôle de la taille de l'image dans le temps de chargement de leur page. Les images sont très souvent l'un des plus grands freins au temps de chargement. Même si seules de petites quantités de données sont sauvegardées pour les images individuelles, le volume total sauvegardé peut représenter une quantité considérable de données.

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 vous pouvez intégrer la compression dans votre flux de travail, il est logique d'optimiser vos images avant de les télécharger. Il existe des outils en ligne pour cela, comme Kraken.io. Ou vous pouvez réduire la qualité et donc la taille de vos images hors ligne, par exemple directement dans Photoshop. Ainsi, vous économisez le surplus de Plugin et gardez votre site mince.

La solution la plus confortable est bien sûr aussi ici un Plugin. Des modules complémentaires comme Optimus ou Smush optimisent non seulement l'image principale, mais aussi toutes ses variations. Smush est également capable d'optimiser toutes vos images existantes par la suite.

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 votre page.

Signification : Vous avez déjà réduit les images et les CSS de votre page autant que possible. Bien ! Mais ce n'est pas tout. Parce que maintenant, vous pouvez utiliser un autre mécanisme de compression. Vous connaissez probablement ce processus grâce au téléchargement de gros paquets de données : Vous les avez généralement sous forme de fichier zip, c'est-à-dire comprimé. Les données sont ainsi plus petites et le téléchargement plus rapide. Cependant, les paquets de données doivent encore être décompressés après le téléchargement. Il se passe exactement la même chose lors du chargement des pages : Le serveur web livre les paquets de données compressés, le serveur web les décompresse. Le transfert de données est ainsi plus rapide et le temps de chargement des pages est réduit.

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. Si tu es client de 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 votre .htaccess, vous pouvez également activer manuellement la compression dite GZIP. À condition que vous disposiez d'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 : Livraison de contenu statique avec une politique de cache efficace 

À mon avis, la référence à la mise en cache du navigateur est de loin la plus ennuyeuse sur Google PageSpeed Insights. En effet, vous ne pouvez configurer la mise en cache du navigateur que pour vos propres ressources. La mise en cache du navigateur n'est pas possible pour les ressources externes.

Signification : La mise en cache du navigateur signifie que le navigateur stocke une version statique de votre page et ne doit pas demander la page au serveur web lorsque vous la visitez à nouveau. La page est déjà chargée.

Mise en œuvre : soit votre hébergeur a déjà activé la mise en cache du navigateur côté serveur, soit vous pouvez la définir en manipulant le fichier .htaccess (souvenez-vous : ce paramètre ne fonctionne que sur les serveurs web Apache). Par exemple, l'exemple de code ci-dessous fixe le cache du navigateur à un mois, ce qui signifie que la version statique de votre page sera 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>

Ici aussi, 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 vous avez optimisé les images de votre page, réduit les CSS, compressé et mis dans le bon ordre, et fait en sorte que le navigateur de votre visiteur mette la page en cache. Toutes ces mesures permettent de réduire le temps de chargement de votre page.

Signification : Mais sans un véritable cache, on renonce à une grande partie 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 votre page WordPress et garantit que la page entière ne doit pas être rechargée à chaque fois. Au lieu de cela, une version statique, c'est-à-dire déjà rendue, de votre page est livrée à partir d'un cache. Cela permet de contourner la lenteur du PHP et de la base de données en particulier.

Mise en œuvre : Là encore, soit votre hébergeur a déjà mis en place un cache côté serveur, soit vous utilisez un cachePlugin. Vous trouverez ici de très puissants Plugins, qui mettent en cache de grandes parties de votre page et permettent de réduire considérablement le temps de chargement pour les visiteurs qui reviennent sur le site.

La grande puissance de la mise en cachePlugins est également sa plus grande faiblesse. Il se pourrait bien qu'une mise en cache dePlugin rende votre site plus lent pour les premiers visiteurs au début. En effet, plus votre blog ou votre site est compliqué, plus le moteur de mise en cache de votre blog doit être complexe et étendu. Ceci est particulièrement pertinent pour les magasins.

Si vous gérez un site web relativement simple, les solutions minimalistes pourraient bien être meilleures que la mise en cache de mastodontes. L'un de ces minces Plugins est par exemple Cache Enabler.

Notez que la mise en cache dePlugins prend généralement en charge la réduction et la fusion de CSS ou de JavaScript. Par conséquent, vous devriez vérifier si votre mise en cache dePlugin ne rend pas déjà superflu le Plugins pour l'optimisation CSS.

Si vous utilisez la mise en cache côté serveur, il est recommandé de désactiver les fonctions de mise en cache de Plugins, telles que l'Autoptimisation, ou de tester une fois si elles apportent un avantage supplémentaire en termes de performances.

Conclusion : bouger beaucoup avec peu Plugins

Vous l'avez déjà remarqué en lisant : pour l'optimisation des CSS, des images et de l'ordre de chargement, il y a Plugins, ce qui vous épargnera beaucoup de travail. Mais pas tout le travail. Caching-Plugins a également un effet rapide, mais il est en partie très étendu et offre de nombreuses possibilités de configuration et des fonctions en partie redondantes.

En tout cas, regardez de plus près le site Plugins, que vous utilisez. Ce n'est que si vous savez ce qui se passe lorsque vous utilisez certaines fonctions que vous pouvez également optimiser de manière judicieuse. La surcharge de la page avec l'optimisationPlugins tend à apporter peu.

Et vous devez vous assurer de bien mesurer vos succès lorsque vous optimisez. Peu importe si vous optimisez à la main ou via Plugin . Utilisez PageSpeed Insights comme premier point de référence pour identifier les points faibles de votre page. Mesurez ensuite le temps de chargement de votre page avant l'optimisation. Ce n'est qu'après cet enregistrement de la situation initiale qu'il est vraiment judicieux d'optimiser votre page pas à pas. En effet, ce n'est que si vous connaissez le temps de chargement avant l'optimisation et après chaque étape d'optimisation que vous pouvez également déterminer ce que les différentes mesures d'optimisation ont apporté.