Avez-vous besoin d'un score de 100 % dans Google PageSpeed Insights ?

Nous n'aimons pas attendre. Si les gens doivent attendre pour visiter votre site Web, ils en auront assez et iront en visiter un autre. Votre chargement Web rapide est une exigence essentielle de nos jours. Mais comment savoir si un site Web est lent ou rapide ?

Je sais, cette question semble un peu stupide. Vous pouvez savoir si un site Web est rapide ou lent en mesurant son temps de chargement, duh. La difficulté est de savoir si la valeur issue de cette analyse peut être qualifiée de « lente » ou de « rapide ». Attendre 2 secondes n'est peut-être pas un problème, mais si mon site Web se charge en deux fois moins de temps, ce serait absolument mieux, n'est-ce pas ? Surtout si vous tenez compte du fait que votre site Web ne prend que 2 secondes à se charger sur votre connexion Internet, mais qu'en est-il de ceux qui ont des connexions lentes ?

Tout cela est un problème plus complexe qu'il n'y paraît au premier abord. Afin d'établir des mesures comparables, il existe des évaluateurs du niveau d'optimisation des sites Web, tels que Google PageSpeed ​​Insights ou GTMetrix, pour n'en citer que quelques-uns.

Ces évaluateurs sont capables d'analyser une page web et de lui attribuer une note sur une échelle de 0 à 100 selon son niveau d'optimisation. De plus, ils détectent les caractéristiques du Web et indiquent des suggestions que nous pouvons effectuer pour améliorer sa qualité et, soi-disant, sa vitesse.

Cependant, rechercher la perfection peut être contre-productif. La recherche de l'excellence dans Google PageSpeed ​​Insights peut négliger d'autres aspects de votre site Web qui sont également importants, tels que l'expérience utilisateur.

À la recherche de l'excellence dans Google PageSpeed ​​Insights

Nous avons récemment réécrit le thème de notre site Web à partir de zéro et avons transformé toutes nos pages en utilisant des blocs du nouvel éditeur de blocs WordPress . Cela a été un exercice pour mieux comprendre les caractéristiques de l'éditeur de blocs et aussi voir leurs lacunes, en apprenant par la pratique.

Profitant de cette tâche, nous avons analysé notre site Web avec Google PageSpeed ​​Insights pour essayer d'améliorer sa note finale et de nous rapprocher le plus possible des 100 souhaités. Nous verrons ensuite certains des points que nous avons améliorés grâce aux indications de Google et nos conclusions à ce sujet.

Utilisez une taille appropriée pour les images

Nous avons déjà abordé ce sujet dans notre blog. N'oubliez pas que vous devez essayer d'utiliser des tailles d'image compatibles avec les besoins de votre thème. N'utilisez pas d'images géantes car elles ne sont pas nécessaires.

Si Google PageSpeed ​​Insights se plaint de vos images, la bonne chose est qu'il vous dira quelles images causent les problèmes afin que vous puissiez les résoudre. C'est un travail laborieux à faire mais dont les résultats ont un impact direct sur le temps de chargement de votre web.

Différer le chargement des images qui n'apparaissent pas à l'écran

Pour toutes ces images de votre page que le visiteur doit faire défiler vers le bas pour être vues, il est recommandé d'appliquer le chargement paresseux .

Ce que vous obtenez en utilisant le chargement paresseux, c'est que vous ne demandez au serveur une image que lorsque le visiteur fait défiler et a besoin de la voir. De cette façon, nous évitons de surcharger le serveur lors de la demande initiale et réduisons le temps, ce qui accélère le chargement du Web. Je vous recommande cet article à ce sujet. Si vous souhaitez utiliser un plugin pour le chargement paresseux, peut-être que celui-ci vous aidera.

Dans notre cas, le plugin d'optimisation SiteGround inclut le chargement différé, nous n'avons donc besoin de rien d'autre pour activer cette technique sur notre site Web.

Assurez-vous que le texte reste visible pendant le chargement de la police Web

Si vous utilisez Google Webfonts, comme nous le faisons, il est ironique de vérifier comment le script que Google vous donne pour charger les polices est détecté par Google PageSpeed ​​Insights comme améliorable.

Selon Google, vous devez utiliser l' font-display CSS dans @font-face pour que les utilisateurs voient le texte lors du chargement de la police Web. Il faut notamment mettre font-display:swap dans le chargement des polices pour que le navigateur ne bloque pas le rendu du texte tant que la police n'est pas disponible. Vous pouvez télécharger les polices Google et les importer directement en utilisant font-display comme expliqué ici.

Avec cela, le visiteur peut voir le texte depuis le début, même si la police spécifique de Google n'est pas chargée. Au moment où la police devient disponible, le navigateur l'appliquera au texte, transformant son style en celui souhaité.

Supprimer les ressources qui bloquent le rendu

Les styles CSS et les scripts JavaScript sont de plus en plus utilisés pour modifier la conception du contenu et le rendre dynamique, respectivement.

Si nous chargeons le CSS et le JS dans le <header> du Web, la chose normale est que le rendu du contenu est bloqué et que le Web ne charge pas le contenu tant que les styles et les fichiers JavaScript ne sont pas traités.

Une option pour éviter cela consiste à déplacer ces fichiers vers le <footer> du site Web. En faisant cela, tout le contenu qui va dans le <body> se chargera et s'affichera en premier, sans être bloqué.

Il est également recommandé d'utiliser les attributs defer et async dans les scripts JavaScript afin que le chargement soit différé ou effectué de manière asynchrone.

Un autre aspect qui contribue à améliorer le score final de Google PageSpeed ​​Insights est le fait de minifier et de compresser les fichiers CSS et JS, ainsi que de les combiner respectivement dans un seul fichier CSS et JS. Cependant, soyez très prudent avec la combinaison car si vous les combinez dans un ordre incorrect, vous pouvez subir des défauts dans les styles et casser l'exécution du code JavaScript.

Vous pouvez utiliser ce plugin pour obtenir de meilleurs résultats, mais encore une fois, utilisez-le avec précaution.

Inconvénients de l'amélioration de la vitesse de votre site Web

Après avoir appliqué des solutions aux suggestions proposées par Google à l'aide des rapports Google PageSpeed ​​Insights, le temps de chargement du site Web est réduit. Cependant, cela a un prix qu'il n'est pas clair si nous voulons payer.

L'un des effets secondaires de l'allégement de notre site Web est que l'expérience utilisateur d'un visiteur peut ne pas être aussi bonne qu'elle l'était. Permettez-moi de développer davantage…

Pour que le contenu de notre site soit restitué au plus vite dans le navigateur de nos visiteurs, nous avons reporté le chargement des JavaScripts et des styles CSS dans le footer de notre web (ils sont passés du header au footer ). Et nous avons également autorisé le chargement du texte avant d'avoir la police Web.

Tout cela amène le visiteur à voir rapidement le contenu du Web sans style. Ce qui veut dire qu'ils voient tout assez plat et laid. De plus, ils remarqueront comment la police du texte est modifiée lorsqu'elle est déjà disponible. Les visiteurs verront également un scintillement lorsque les styles CSS et JavaScript sont appliqués et exécutés.

Avant, dans une installation WordPress commune, le visiteur voyait le web se charger sans aucun problème. Maintenant, il verra qu'il se charge un peu plus vite, mais tout ce scintillement qu'il subit réduit l'expérience utilisateur et il est possible que cela fasse penser au visiteur que le Web se charge bizarrement. Ou même que quelque chose est cassé sur le Web parce que chaque fois que vous naviguez sur une page, le scintillement apparaît pendant un instant.

Vaut-il la peine de fournir ce sentiment étrange aux visiteurs juste pour gagner une poignée de millisecondes en temps de chargement et quelques points supplémentaires dans Google PageSpeed ​​Insights ? Nous ne le pensons pas. Et pour cette raison, nous sommes revenus à la manière courante de charger les styles et les scripts que WordPress utilise par défaut.

Que cela ait ou non un effet négatif sur d'autres aspects, tels que le référencement , la vérité est que nous ne le savons pas (et nous ne pensons pas que quiconque le sache avec certitude). Nous ne savons pas non plus si l'évaluation de Google PageSpeed ​​Insights a autant de poids que certaines personnes le croient.

Il est clair qu'il y a des aspects qui doivent être améliorés, comme la taille correcte des images, utiliser des fichiers minifiés pour réduire leur poids ou éviter de charger tout ce qui ne va pas être utilisé sur la page.

Ne devenez pas fou avec les évaluateurs de l'optimisation de votre site Web et avec l'obtention du score maximum. Après tout, votre visiteur cible est fait de chair et de sang, incapable d'apprécier les différences minimales en dixièmes de seconde. Une fois que votre note est généralement correcte, concentrez-vous sur autre chose.

Image en vedette de Taun Stewart sur Unsplash .