Comment atteindre 100 dans Google PageSpeed ​​Insights (sur WordPress)

Ne serait-ce pas formidable s'il y avait un outil pour vous aider à rendre votre site Web plus rapide ? Eh bien, il y en a! Google PageSpeed ​​​​Insights est le nom, et c'est un service gratuit qui est à votre disposition pour résoudre les problèmes de lenteur de votre site Web. Dans cet article, nous verrons ce que c'est, comment cela fonctionne et comment vous pouvez atteindre le score insaisissable de Google PageSpeed ​​Insights 100/100 dans WordPress.

Qu'est-ce que Google PageSpeed Insights ?

Google PageSpeed ​​Insights est un outil en ligne permettant de mesurer la vitesse et l'expérience utilisateur de votre site Web. Il mesure le temps de chargement d'un site sur ordinateur et mobile et affiche diverses mesures sur les performances d'un site. Si les mesures sont jugées sous-optimales, l'outil donne des suggestions sur la façon de les améliorer.

Accédez simplement à Google PageSpeed ​​Insights, entrez une URL et cliquez sur Analyser. Google juge votre site à la fois sur mobile et sur ordinateur. Vous constaterez peut-être que vous obtenez de meilleurs résultats pour l'un que pour l'autre.

Google avait l'habitude de donner une note globale sur 100 pour une page Web, mais ils ne le font plus.

Au lieu de cela, Google mesure trois statistiques qu'il appelle Core Web Vitals . Ceux-ci sont:

• Largest Contentful Paint (LCP) : la vitesse à laquelle le contenu principal du site se charge. Cela devrait être de 2,5 secondes ou moins pour une bonne expérience utilisateur.
• First Input Delay (FID) : la réactivité du site aux entrées de l'utilisateur. Le FID doit être de 100 millisecondes ou moins.
• Cumulative Layout Shift (CLS) : mesure la stabilité visuelle d'une page web. Un score CLS de 0,1 ou moins est préférable.

En outre, Google mesure les éléments suivants :

• First Contentful Paint (FCP) : le temps qu'il faut pour que la page Web commence à s'afficher à l'écran. Un bon score FCP est de 1,8 seconde ou moins.
• Interaction to Next Paint (INP) : mesure la réactivité de la page aux interactions de l'utilisateur. Un site Web vraiment réactif a un INP de 200 millisecondes ou moins.
• Time to First Byte (TTFB) : le temps mis pour que le premier octet de données soit envoyé après une requête du serveur. Un TTFB de 0,8 seconde ou moins est idéal.

En dessous, dans la section Diagnostiquer les problèmes de performances, Google PageSpeed ​​Insights vous donne quatre scores - Performances, Accessibilité, Meilleures pratiques et SEO. 90 ou plus est un bon score, 50 à 89 indique qu'une amélioration peut être apportée et tout ce qui est inférieur à 50 est mauvais.

En dessous se trouvent les opportunités et les diagnostics de Google. Ce sont des moyens d'améliorer indirectement votre score de performance. La mesure de performance a le plus d'influence sur la vitesse de votre site.

Avant d'aborder la façon d'améliorer les performances de votre site Web, examinons pourquoi la vitesse du site Web est importante.

Pourquoi la vitesse du site Web est-elle importante ?

La vitesse du site Web a un impact énorme sur le comportement des utilisateurs et des consommateurs.

Le temps moyen nécessaire pour charger complètement une page de destination mobile est de 22 secondes [1] .

La probabilité de rebond augmente de 32 % lorsque le temps de chargement de la page passe de 1 seconde à 3 secondes [2] .

53% des visites sont abandonnées si un site mobile met plus de 3 secondes à se charger [3] .

De toute évidence, si vous exploitez un site de commerce électronique, un site lent entraîne une diminution des conversions, et c'est quelque chose que vous voudrez régler. Le taux de conversion baisse avec le temps de chargement d'un site [4] :

• Les pages qui se chargeaient en 2,4 secondes avaient un taux de conversion de 1,9 %
• À 3,3 secondes, le taux de conversion était de 1,5 %
• À 4,2 secondes, le taux de conversion était inférieur à 1 %
• À plus de 5,7 secondes, le taux de conversion était de 0,6 %

Score PageSpeed ​​Insights élevé par rapport à la vitesse réelle de la page

Google calcule le score PageSpeed ​​Insights à partir des données de laboratoire (collectées dans des conditions contrôlées) et des données de terrain (collectées auprès d'utilisateurs réels dans la nature).

Pour tester la vitesse réelle de votre page, vous pouvez utiliser des outils en ligne tels que GTmetrix ou le test de vitesse de Pingdom.

Grâce à ces outils, vous pouvez tester votre site à différents endroits.

Vous pouvez voir sur GTmetrix que le temps de chargement de la page pour un serveur de test à San Antonio, Texas est de 666 ms – un très bon score.

A Hong Kong, le temps de chargement des pages est un peu plus long – 1,4s.

Pingdom affiche également un temps de chargement rapide de 850 ms pour un test à Washington DC mais un temps de chargement plus lent de 1,06 s à Tokyo, au Japon.

L'outil Uptrends vous permet de tester sur mobile et sur ordinateur. Voici le résultat pour le site WP Shout de Paris, France sur iPad Air – un temps de chargement de 1,9s :

Il semble donc y avoir une corrélation entre le score Google PageSpeed ​​Insights et la vitesse réelle de la page.

Comment obtenir le score Google PageSpeed ​​Insights 100 idéal sur WordPress

Maintenant que vous savez pourquoi un score Google PageSpeed ​​Insights élevé est important, il est temps de chercher des moyens de l'améliorer.

Les moyens d'améliorer le score de Google PageSpeed ​​Insights

1. Optimisez les images

L'optimisation de vos images pour le Web est un moyen simple d'améliorer votre score de performance.

Vous aurez besoin d'un plugin de compression d'image tel que Optimole.

Ce plugin peut compresser vos images dans une taille de fichier plus petite afin qu'elles soient plus rapides à charger. Vous pouvez les utiliser pour tous les nouveaux téléchargements d'images ainsi que pour ceux qui existent déjà. Ce qui est génial avec Optimole, c'est qu'il livrera également vos images via un CDN, ce qui rendra la livraison encore plus rapide.

Il peut également convertir vos images au format WebP, qui a une taille plus petite que les fichiers JPG ou PNG. Cela vous aidera à passer la recommandation Servir les images dans les formats de nouvelle génération . De plus, vous pouvez redimensionner toutes les images plus grandes que vous avez en leur définissant une largeur maximale.

Assurez-vous que vos images ont les attributs de largeur et de hauteur spécifiés pour satisfaire les éléments d'image qui n'ont pas d'opportunité explicite de largeur et de hauteur .

Le plugin Optimole inclut également le chargement paresseux, qui charge uniquement les images ou les vidéos lorsqu'un utilisateur les fait défiler. Cela aide avec l'opportunité Différer les images hors écran , illustrée ci-dessous.

Une autre méthode pour réduire la taille du fichier image consiste à utiliser des images SVG. Les SVG sont des fichiers vectoriels, ils peuvent donc être facilement redimensionnés sans impact sur leur taille de fichier. Ils ne sont pas pris en charge nativement dans WordPress mais vous pouvez les ajouter à votre médiathèque avec un plugin tel que SVG Support ou Safe SVG.

2. Evitez une taille de DOM excessive

Qu'est-ce que le DOM ? DOM signifie Document Object Model et est une structure arborescente avec tous les éléments HTML, les attributs et le texte de la page inclus.

Deux stratégies pour réduire la taille du DOM consistent à diviser les longues pages Web en sections plus petites et à éviter de masquer les nœuds DOM avec la déclaration {display:none;} dans CSS.

Un facteur qui peut augmenter la taille du DOM est l'utilisation d'un constructeur de page. Les constructeurs de pages ont tendance à augmenter le nombre d'éléments <div> sur une page.

Si vous utilisez Elementor, depuis la version 3.0, certains wrappers HTML ont été supprimés, ce qui a réduit la taille du DOM.

Ou vous pouvez passer à l'utilisation de Gutenberg au lieu d'un constructeur de page, comme l'a fait Chris Lema.

Vous pouvez trouver plus de conseils pour éviter une taille DOM excessive dans cet article.

3. Optimisez JavaScript et CSS

Les fichiers CSS et JS peuvent être minifiés et compressés pour améliorer les performances. La minification supprime tous les espaces d'un fichier CSS ou JS, tandis que la compression GZIP supprime les caractères répétés tels que {.

Les plugins WordPress qui vous permettent de minifier CSS ou JS incluent Autoptimize (gratuit) et WP Rocket (payant).

La minification peut casser votre site, donc les plugins qui minifient ont une option d'exclusion des fichiers de la minification si vous avez un problème.

WP Rocket a également la possibilité de combiner vos fichiers CSS et JS en un seul fichier, réduisant ainsi les demandes. Cependant, vous ne voudrez pas le faire si votre serveur Web utilise HTTP/2. Vous pouvez tester si votre serveur exécute HTTP/2 pour vérifier en premier.

Vous pouvez activer la compression GZIP avec la plupart des plugins de mise en cache. Si votre serveur Web est Apache ou LiteSpeed, le plug-in peut écrire directement dans votre fichier .htaccess ou fournir des lignes à copier et coller. Si vous utilisez NGINX ou IIS, Hummingbird fournit également la configuration pour activer la compression sur ces serveurs.

S'il y a du CSS ou du JS sur votre site qui n'est pas utilisé, il est temps de le supprimer. Vous pouvez utiliser Chrome DevTools pour trouver les CSS et JS inutilisés, qui proviennent très probablement d'un plugin.

Vous pouvez également utiliser CSS Saver de Rapidload pour voir quel CSS vous pouvez perdre sur votre site Web :

4. Éliminer les ressources bloquant le rendu

Les CSS et JS bloquant le rendu sont des fichiers qui sont signalés comme bloquant la première peinture de votre page Web.

Le plugin Autoptimize peut remédier à ce problème et, par conséquent, améliorer vos scores First Contentful Paint et Largest Contentful Paint.

5. Réduire le temps de réponse initial du serveur

Le temps de réponse du serveur dépend de quelques facteurs : le thème et les plug-ins que vous utilisez, ainsi que le type d'hébergement Web dont vous disposez.

Envisagez de supprimer les plugins en excès que vous n'utilisez pas ou de passer à un thème léger, tel qu'Astra.

Pour l'hébergement, nous recommandons l'hébergement WordPress géré plutôt que l'hébergement Web partagé. Les hôtes WordPress gérés incluent l'optimisation du serveur dans le cadre du service.

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

Si vous utilisez des polices Web, la recommandation de Google empêchera le texte de vos pages d'être invisible pendant leur chargement.

La recommandation suggère d'ajouter font-display : swap; à votre déclaration @font-face dans votre feuille de style.

La capture d'écran ci-dessous montre comment ajouter cette propriété à l'aide du plugin Asset CleanUp.

7. Gardez le nombre de demandes bas et les tailles de transfert petites

Google PageSpeed ​​Insights enregistre le nombre de fichiers demandés par le serveur Web et la taille de ces fichiers.

Si vous avez de grands nombres ici, vous pouvez les réduire en :

• Optimisation de vos images et fichiers multimédias. Il est recommandé d'utiliser des fichiers vidéo à la place des GIF animés.
• Optimisation de votre CSS et JS
• Optimisation de vos polices et scripts tiers
• Réduire la taille du fichier HTML

8. Évitez d'enchaîner les demandes critiques

Les requêtes critiques sont des requêtes indispensables au chargement de la page. Par exemple, un logo pourrait être une demande critique.

Les longues chaînes et les chaînes contenant de gros téléchargements sont considérées comme mauvaises pour la vitesse de votre site Web. Ils ont un impact sur la première peinture de contenu et la plus grande peinture de contenu.

Selon Google, pour éviter d'enchaîner les requêtes critiques, il faut :

• Minimisez le nombre de ressources critiques : éliminez-les, différez leur téléchargement, marquez-les comme asynchrones, etc.
• Optimiser le nombre d'octets critiques pour réduire le temps de téléchargement (nombre d'allers-retours).
• Optimisez l'ordre dans lequel les ressources critiques restantes sont chargées : téléchargez tous les actifs critiques le plus tôt possible pour raccourcir la longueur du chemin critique.

Vous pouvez le faire en :

• Précharger les requêtes de clé, les images et les polices en utilisant "link rel="preload" dans le HTML qui les référence.
• Minimiser votre CSS et JavaScript.
• Éliminez les ressources bloquant le rendu.

Vous pouvez utiliser un plugin comme WP Rocket pour effectuer ces tâches à votre place.

9. Évitez les longues tâches de thread principal et minimisez le travail du thread principal

Les longues tâches de thread principal sont des tâches JavaScript (plus de 50 ms) qui retardent le temps d'interactivité pour l'utilisateur.

Minimiser le travail du thread principal signifie réduire le temps d'analyse, de compilation et d'exécution de JS.

Vous pouvez réduire la durée et la durée des tâches JavaScript en :

• minimiser votre utilisation de plugins gonflés
• héberger vos polices et vos scripts d'analyse localement
• minifier ou différer JS et CSS
• chargement paresseux des images d'arrière-plan

Consultez l'article suivant pour plus de conseils sur la réduction du travail du thread principal dans WordPress.

10. Évitez les grands changements de mise en pageÉvitez les grands changements de mise en page

Les changements de mise en page contribuent à la métrique Cumulative Layout Shift et donnent l'impression aux utilisateurs que la page saute.

Vous pouvez remédier à ce problème en :

• Ajouter des dimensions à vos médias
• Précharger vos polices
• Optimiser votre contenu dynamique, par exemple, les formulaires d'inscription à la newsletter

Pour plus d'informations, lisez ce guide sur la correction du changement de mise en page cumulatif dans WordPress.

11. Réduire l'impact du code tiers

Les scripts tiers sont ceux hébergés ailleurs, tels que le suivi Google Analytics ou les intégrations YouTube.

Dans la mesure du possible, essayez d'héberger les scripts localement. Vous ne pouvez pas faire cela avec YouTube, mais vous pouvez héberger votre code d'analyse et vos polices localement.

Vous pouvez utiliser le plug-in Local Google Fonts pour héberger Google Fonts sur votre propre serveur.

Le plug-in Local Google Analytics for WordPress – caches external requests hébergera votre Google Analytics localement.

12. Utilisez un CDN

Un réseau de diffusion de contenu est un réseau distant de serveurs qui stockent et diffusent du contenu Web aux utilisateurs.

Un CDN peut améliorer la vitesse de votre site en mettant en cache des fichiers statiques (par exemple, HTML, CSS et JavaScript) et en les diffusant à proximité d'un utilisateur. Cela permet de réduire vos scores First Contentful Paint et Largest Contentful Paint.

Nous utilisons Cloudflare CDN chez WP Shout. Vous pouvez commencer gratuitement.

En savoir plus sur les raisons pour lesquelles vous devriez utiliser un CDN et les meilleures options.

Conclusion sur la façon d'atteindre le score Google PageSpeed ​​Insights 100

Nous avons vu qu'il y a pas mal de facteurs dans le jeu qui déterminent la vitesse du site. Ces conseils vous aideront à obtenir un score parfait.

Vous ne devriez pas trop vous attarder à marquer 100, cependant - un score de 90+ est toujours très bon. Lisez l'article de David sur l'optimisation des performances du site pour voir ce que nous avons fait pour améliorer nos scores.