Fermez Google PageSpeed ! Dépannage des principaux messages d'erreur

Tobias Schüring Dernière mise à jour le 21.10.2020
11 Min.
Messages d'erreur GooglePageSpeed Insights
Dernière mise à jour le 21.10.2020

Google PageSpeed Insightsest un excellent outil pour avoir un aperçu rapide du potentiel d'optimisation de votre site. Aujourd'hui, je vais vous montrer comment vous pouvez 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 sont pas toujours utile.

Il y a quelque temps, notre collègue Caspar Hübinger l'un des articles de son blogdisons, des mots très clairs pour son Google PageSpeed Insights-résultat trouvé. Et il critique non seulement l'outil, mais aussi l'utilisation de l'outil par les utilisateurs. Car si vous ne savez pas comment interpréter et corriger les différentes suggestions d'optimisation, vous pouvez rapidement vous perdre dans la chasse absurde à la note 100. Ce serait toutefois imprudent. Parce qu'un taux élevé et utopique de Google PageSpeed est généralement une perte de temps. L'optimisation du temps de chargement est plus importante.

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

Mais avant de vous montrer comment interpréter les différents messages d'erreur et comment corriger les erreurs, je voudrais vous expliquer comment utiliser Google PageSpeed Insightscorrectement. Car nous avons souvent vu que les utilisateurs sont très fixés sur leur score de PageSpeed sans garder un œil sur le temps de chargement de leur page.

Si cette section ne vous intéresse pas, Il suffit de le sauter 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 GooglePageSpeed Insights . L'outil Google ne mesure pas le paramètre le plus important de votre page : le temps de chargement de la page. Afin de mesurer correctement cet aspect, je recommande webpagetest.org.

Ce n'est que si vous gardez un œil sur le temps de chargement des pages dès le début de l'optimisation de votre site que vous pourrez faire des déclarations significatives sur le succès de l'optimisation. Parce que l'objectif de toute optimisation devrait toujours être d'améliorer 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.

AVIS !

Mesurez toujours d'abord le temps de chargement de la page avant d'optimiser les performances de votre page. C'est la seule façon d'estimer le succès de l'optimisation.

Du point de vue de l'utilisateur, un temps de chargement de page plus rapide et une taille de page plus petite sont toujours un avantage. La patience et la capacité d'attention de l'utilisateur moyen ne cessent de diminuer (comme le montre cette étude de Microsoft) - c'est particulièrement crucial pour le commerce électronique - et de plus en plus de visiteurs viennent par le biais d'appareils mobiles. Déjà en 2016 56 % utilisent régulièrement l'internet via des smartphones ou des tablettes a appelé. Ici, les vitesses de connexion et les volumes de données ne sont pas toujours illimités. Des côtés minces et rapides sont donc appropriés.

Google PageSpeed, cependant, ne donne que des indications sur le potentiel d'optimisation de votre site 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 immobilisé dans certaines zones ou seulement à un coût 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 intégrées. Mais ces ressources ne peuvent pas être couvertes par la mise en cache du navigateur de votre site. Le message d'erreur n'a donc aucun rapport avec l'expérience de l'utilisateur de votre site, 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 jugez donc pas d'abord par le classement de Google, mais par le temps de chargement. Il s'agit de la seule variable vraiment importante.

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

L'exemple de la mise en cache manquante du navigateur montre très clairement pourquoi vous ne devriez pas être perturbé par un résultat PageSpeed supposé mauvais.

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

Messages d'erreur typiques de Google PageSpeed Insights: La mise en cache du navigateur ne serait pas utilisée correctement

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

Donc, chaque fois que nous PageSpeed Insightstestons notre site, ce point est marqué à la craie. 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 référencement de votre site, cela signifie que le temps de chargement et l'expérience de l'utilisateur sont beaucoup plus importants que la vitesse de la page (PageSpeed rating).

En effet, si vous optimisez le temps de chargement de votre page, vous modifierez automatiquement un grand nombre de zones importantes pour Google. Ainsi, l'amélioration du temps de chargement et le PageSpeed-Score de Google sont liés d'une certaine manière.

Mais à mon avis, vous ne devriez pas vous perdre dans la chasse à la cote 100.

Mais passons maintenant 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 effrayants de Google PageSpeed Insights.

Fermez Google PageSpeed ! Dépannage des principaux messages d'erreur

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

Mise en œuvre : même si cette référence a un effet dissuasif, la mise en œuvre est très simple. En principe, il y a deux solutions possibles pour cette affaire : Si vous êtes vous-même apte à utiliser le CSS, vous pouvez réduire manuellement le nombre de fichiers CSS et créer un Formulaire abrégé l'utilisation. Vous pouvez également consulter les fichiers CSS à l'aide d'outils en ligne, tels que Compresseur CSS ou Minificateur CSS...la réduire à la main.

Fermez Google PageSpeed ! Dépannage des principaux messages d'erreur

Bien entendu, il existe également une solution confortable utilisant la miniaturisationPlugins CSS en WordPress . Certains Plugins d'entre eux font directement un habillage complet et peuvent comprimer et optimiser non seulement le CSS, mais aussi le JavaScript et le HTML.

Informations complémentaires

Pour une explication détaillée des moyens de réduction en WordPress HTML, CSS et JavaScript, voir dans cet article.

Avec HTTP/2, il n'est pas forcément judicieux de combiner le CSS

Les Mini-MinistèrePlugins que nous venons de mentionner sont largement utilisés. Parce qu'ils sont confortables et prennent en charge la compression et le résumé des 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 le Norme HTTP/2 Les navigateurs sont capables de charger plusieurs fichiers simultanément à partir du serveur web.

Cela signifie que les données ne doivent plus être combinées, puisque HTTP/2 permet d'échanger plusieurs paquets de données simultanément. HTTP/2 doit avoir été configuré par l'hébergeur, par exemple, et ne peut être lancé qu'avec Certificat SSL peuvent être utilisés.

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

Car un autre Pluginpeut ralentir votre site dans certaines circonstances. Surtout si les autres fonctions des polyvalents nePlugins peuvent pas développer tout leur potentiel.

Message d'erreur 2 : Supprimer les ressources bloquant l'équarrissage

Ce message fait également transpirer de nombreux utilisateurs, car il n'est pas si facile à mettre en œuvre et constitue également l'une des éternelles critiques de Google PageSpeed.

Fermez Google PageSpeed ! Dépannage des principaux messages d'erreur

Signification : Une page web est construite dans un certain ordre. Cette séquence de chargement peut être optimisée. PageSpeed se plaint presque toujours que les fichiers CSS bloquent cet ordre de chargement optimal. Et cela s'applique également aux pages qui ont déjà été très bien optimisées (comme le montre l'affaire Caspar Hübinger). Néanmoins, ces informations peuvent être très précieuses 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é. Il ne sera donc pas affiché tant que la commande CSS correspondante n'aura pas été chargée. Cela augmente le temps de chargement de votre page, mais affecte principalement l'expérience de l'utilisateur, car la page semble se charger plus longtemps.

Mise en œuvre : Une solution courante consiste à mettre en œuvre une règle empirique : le CSS dans l'en-tête. Cela signifie que vous déplacez le code CSS du corps du document HTML, le , vers le haut du document, le , et que vous l'y sous la forme .

Cet exemple montre clairement ce que je veux dire. Le code ci-dessous définit notre couleur de fond spécifique pour le blog. L'



Vous pouvez mettre en œuvre cette mesure d'optimisation de deux manières : Vous pouvez toucher le code vous-même et déplacer le code CSS dans l'en-tête, ou vous pouvez laisser quelqu'un Plugin faire le travail. Là encore, vous pouvez utiliserPlugins Mieux WordPress Minifier Continuez.

PageSpeed InsightsMessages d'erreur Google - extrait du PluginBetter WordPress Minify

Le Minify-Plugin 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.

Messages d'erreur de Google PageSpeed Insights- extrait du plugin d'optimisation Autoptimize

L'Plugin Autoptimisation, en revanche, prend un virage pour le mieux : Vous sélectionnez ici les options pour tous les fichiers CSS non exclus du processus.

Les extraits des options de la Plugins montrer : Même la variante du plugin ne peut être mise en œuvre sans une compréhension de base du processus. Aussi dans le Plugins donc tu vas devoir t'y habituer.

Message d'erreur 3 : Codage efficace des images

À ce stade également, il y a beaucoup de plaintesPageSpeed Insights. Cependant, ce cas 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 ! Dépannage des principaux messages d'erreur

Signification intentionnelle : de nombreux utilisateurs sous-estiment le rôle de la taille de l'image pour 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 des images individuelles, le volume total sauvegardé peut représenter une quantité considérable de données.

Parce qu'une image est rarement une seule 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 de ceux-ci, c'est-à-dire des vignettes ou Images en vedettealors il faut bien sûr les optimiser également. Ainsi, une image devient rapidement plusieurs fichiers, ce qui implique également un chargement de données multiples.

Mise en œuvre : En principe, vous avez deux possibilités 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, vous le faites via les outils correspondants WordPress Plug-ins d'amélioration de l'image.

Si vous pouvez raisonnablement intégrer la compression dans votre flux de travail, il est logique d'optimiser les images avant de les télécharger. Il existe à cet effet des outils en ligne, tels que Octopus.io. Vous pouvez également réduire la qualité et donc la taille de vos images hors ligne, par exemple directement dans Photoshop. Ainsi, vous vous épargnez le travail supplémentaire Pluginet votre site reste mince.

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

Ils Pluginstravaillent entre autres avec un soi-disant "compression sans perte". Cela signifie que bien que la taille des fichiers des images soit réduite, leur qualité visible ne diminue pas.

Message d'erreur 4 : Activer la compression de texte

Ce message d'erreur de Google PageSpeed peut être corrigé très rapidement et peut réduire considérablement le temps de chargement de votre page.

Fermez Google PageSpeed ! Dépannage des principaux messages d'erreur

Signification intentionnelle : vous avez déjà réduit la taille des images et des CSS de votre site autant que possible. Bravo ! Mais ce n'est pas la fin de l'histoire. Parce que maintenant, vous pouvez utiliser un autre mécanisme de compression. Vous connaissez probablement le processus de téléchargement de gros paquets de données : Ils sont généralement disponibles sous forme de fichiers zippés, c'est-à-dire compressés. Cela réduit la taille des données pendant le téléchargement et accélère donc le téléchargement. Cependant, les paquets de données doivent encore être déballés après le téléchargement. La même chose se produit lors de la mise en page : 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à définie du côté du serveur, soit vous devez l'activer vous-même. Si vous êtes un RAIDBOXES client, vous n'avez à vous soucier de rien. Parce que nous avons la particulièrement forte Compression Brotli active.

Avec l'entrée suivante dans votre .htaccess, vous pouvez également activer manuellement la compression dite GZIP. En supposant que vous ayez un serveur web Apache.


 mod_gzip_on Oui
 mod_gzip_dechunk Oui
 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.*
 
 
 
 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
 

Message d'erreur 5 : Fournir un contenu statique avec une politique de mise en cache efficace 

À mon avis, la référence à la mise en cache du navigateur est de loin la plus ennuyeuse sur Google PageSpeed Insights. Parce que 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.

Fermez Google PageSpeed ! Dépannage des principaux messages d'erreur

Signification : La mise en cache du navigateur signifie que le navigateur stocke une version statique de votre page et ne doit pas demander au serveur web de répéter la visite, mais que 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.


ExpireActif le
ExpiresDéfaut "accès 60 secondes
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 "accès 1 mois
ExpiresByType text/javascript "accès 1 mois
ExpiresByType application/javascript "accès 1 mois
ExpiresByType application/x-shockwave-flash "accès 1 mois

Il en va de même pour le cas suivant : si vous êtes RAIDBOXES client, la mise en cache du navigateur est déjà active par défaut.

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

Eh bien, vous avez maintenant optimisé les images de votre site, réduit les CSS, compressé et mis dans le bon ordre et fait en sorte que les navigateurs de vos visiteurs mettent la page en cache. Toutes ces mesures permettent de réduire le temps de chargement des pages de votre site.

Signification intentionnelle : Sans une cachette adéquate, vous pardonnez cependant 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 WordPress page et garantit que la page entière ne doit pas être rechargée à chaque fois. Au lieu de cela, une version statique, déjà rendue, de votre page est livrée à partir d'un cache. Cela contourne notamment la lenteur du PHP et de la base de données.

Mise en œuvre : Là encore, les conditions suivantes s'appliquent : soit votre hébergeur a déjà caches côté serveur ou vous pouvez utiliser une mise en cachePlugin. Voici des outils très puissants Pluginsqui permettent de mettre en cache de grandes parties de votre page et de réduire considérablement le temps de chargement pour les visiteurs qui reviennent.

La grande puissance de la mise en cachePlugins est également sa plus grande faiblesse. Il se pourrait bien que la mise en cachePlugin ralentisse votre site pour les premiers visiteurs. Plus votre blog ou votre site est compliqué, plus le moteur de cache qui met votre blog en cache doit être complexe et étendu. Ceci est particulièrement pertinent pour les magasins.

Si vous gérez un site web relativement simple, des solutions minimalistes peuvent être préférables à la mise en cache de tous les éléments. L'une de ces Plugins solutions minces est par exemple outil de mise en cache.

Vous devez noter que la mise en cachePlugins prennent généralement aussi en charge la réduction et la fusion des CSS ou des JavaScript. Vous devez donc vérifier si votre mise en cachePlugin n'utilise pas déjà le Plugins pour l'optimisation des CSS est superflue.

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

Conclusion : bouger Pluginsbeaucoup avec peu

Vous l'avez déjà remarqué en lisant : Pour l'optimisation des CSS, des images et de l'ordre de chargement, il existe Pluginsqui vous déchargent de beaucoup de travail. Mais pas tout le travail. La mise en cache égalementPlugins produisent rapidement un effet perceptible, mais sont parfois très étendus et offrent de nombreuses possibilités de configuration et des fonctions partiellement redondantes.

N'oubliez pas d'examiner de plus près la Pluginsque vous utilisez. Ce n'est que si vous savez ce qui se passe lorsque vous utilisez certaines fonctions que vous pouvez optimiser de manière judicieuse. Surcharger la page avec l'optimisation-Plugins a tendance à apporter peu.

Et vous devez vous assurer que vous mesurez correctement vos succès lorsque vous optimisez. Peu importe que vous optimisiez à la main ou via Plugin Internet. Utilisez-le PageSpeed Insights comme premier point d'orientation pour identifier les faiblesses de votre site. Mesurez ensuite le temps de chargement de votre site avant de l'optimiser. Ce n'est qu'une fois que la situation initiale a été enregistrée qu'il est vraiment judicieux d'optimiser votre site pas à pas. Car c'est seulement à ce moment-là, si vous connaissez le temps de chargement avant et après chaque étape d'optimisation, que vous pouvez déterminer ce que les différentes mesures d'optimisation ont permis d'obtenir.

En tant qu'administrateur système, Tobias veille sur notre infrastructure et trouve tous les moyens possibles pour optimiser les performances de nos serveurs. Grâce à ses efforts inlassables, il est souvent Slack retrouvé la nuit.

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .