Google PageSpeed Insights : ce que c'est, cas pratique et solutions

Qu'est-ce que PageSpeed Insights

Google PageSpeed Insights analyse une page et vous indique ce que vous pouvez améliorer pour qu'elle se charge plus vite et offre une meilleure expérience. Vous saisissez une URL et il génère deux rapports, un pour mobile et un pour ordinateur, chacun avec un score sur 100 et la liste des problèmes détectés, avec leur explication.

Le score a trois couleurs :

Vert (90-100) : bon.
Orange (50-89) : acceptable, mais améliorable.
Rouge (0-49) : insuffisant ; il vaut la peine d'examiner le site en profondeur.

Le rapport comporte deux parties :

Données des utilisateurs réels (en haut, « Découvrez l'expérience de vos utilisateurs réels ») : mesures de visiteurs réels avec Chrome au cours des 28 derniers jours. Elles n'apparaissent que si la page ou le site a suffisamment de trafic. Ce sont elles que Google utilise pour évaluer l'expérience.
Diagnostic de laboratoire (le score sur 100) : un test simulé avec Lighthouse à ce moment-là. C'est lui qui change dès que vous appliquez une amélioration.

C'est pourquoi, après une optimisation, le score s'améliore immédiatement, mais les données réelles mettent jusqu'à 28 jours à en tenir compte.

Ne soyez pas obsédé par le 100/100

Google tient compte de la vitesse et de l'expérience pour le référencement, et PageSpeed Insights est un excellent guide. Mais de nombreuses recommandations sont générales et ne peuvent pas toujours être suivies.

Un exemple : ajouter Google Analytics fait déjà perdre des points. Le script se charge depuis les serveurs de Google, avec un cache court que vous ne pouvez pas modifier, et le navigateur doit le traiter. Il en va de même pour la publicité, les chats, les vidéos intégrées ou les pixels des réseaux sociaux.

Appliquez toutes les recommandations possibles, mais ce qui compte vraiment, c'est que le site se charge vite pour vos visiteurs et ait un bon contenu, pas le chiffre du rapport.

Les métriques

Les trois Core Web Vitals sont celles que Google utilise pour évaluer l'expérience d'une page :

Métrique	Ce qu'elle mesure	Bon
LCP (Largest Contentful Paint)	Le temps d'affichage de l'élément le plus grand de l'écran, généralement l'image principale ou un titre	2,5 s ou moins
INP (Interaction to Next Paint)	Le temps de réaction de la page lorsque vous cliquez, touchez ou tapez	200 ms ou moins
CLS (Cumulative Layout Shift)	L'ampleur du déplacement des éléments pendant le chargement de la page	0,1 ou moins

Un exemple de CLS : une page avec un en-tête, une image et un pied de page. Pendant le chargement de l'image, l'en-tête et le pied de page apparaissent l'un contre l'autre ; quand l'image arrive, le pied de page saute vers le bas. Pour réussir, chaque élément doit occuper sa place dès le départ.

Le rapport de laboratoire affiche aussi :

FCP (First Contentful Paint) : temps jusqu'à l'apparition du premier texte ou de la première image.
Speed Index : rapidité avec laquelle l'écran se remplit visuellement.
TBT (Total Blocking Time) : temps total pendant lequel le navigateur est bloqué à exécuter du JavaScript et ne peut pas répondre. Il est étroitement lié à l'INP.

L'explication complète se trouve dans la référence des Web Vitals.

Cas pratique avec WordPress et LiteSpeed Cache

Nous allons résoudre les avertissements les plus fréquents et ceux qui ont le plus d'impact. Nous partons du cas le plus courant : un WordPress ou WooCommerce avec un nombre moyen d'extensions et un thème commercial avec un constructeur comme Elementor ou Divi. Presque tout se résout avec l'extension gratuite LiteSpeed Cache, qui fonctionne sur toutes nos offres d'hébergement.

Activez les réglages un par un et, après chacun, vérifiez le site (menus, formulaires, panier, paiement). Chaque installation est différente et une option peut entrer en conflit avec votre thème ou une extension. En cas de problème, désactivez le dernier réglage.

Avant de commencer

Installez et activez LiteSpeed Cache depuis Extensions > Ajouter une extension.
Dans LiteSpeed Cache > Cache, onglet Cache, vérifiez que Activer le cache est sur On. Dans ce même onglet, il est conseillé d'activer aussi les options de cache pour les utilisateurs connectés, les commentateurs, l'API REST et la page de connexion.
Pour optimiser les images et générer le CSS critique, LiteSpeed utilise les services en ligne gratuits de QUIC.cloud. Activez-les dans LiteSpeed Cache > Général avec le bouton Activer les services QUIC.cloud. Il n'est pas nécessaire d'utiliser son CDN. Nous l'expliquons dans le guide de QUIC.cloud.
Dans Optimisation des images, onglet Réglages de l'optimisation des images, activez Cron de demande automatique pour que les images soient envoyées automatiquement à l'optimisation.

« Diffusez des ressources statiques grâce à des règles de cache efficaces »

Quand quelqu'un visite votre site, le navigateur télécharge le CSS, le JavaScript et les images. Les règles de cache lui indiquent combien de temps il peut réutiliser sa copie sans les télécharger de nouveau. Google considère comme bon plus de 30 jours, et un an pour les fichiers qui ne changent pas.

Dans LiteSpeed Cache > Cache, onglet Navigateur, activez Cache du navigateur. Le TTL du cache navigateur est de 31557600 secondes (un an) par défaut, une bonne valeur.

Les fichiers chargés depuis d'autres serveurs (Google Analytics, polices externes, publicité) utilisent le cache défini par ces serveurs, et vous ne pouvez pas le modifier. Nous en parlons dans la dernière section.

« Réduisez la taille des ressources CSS »

Minifier consiste à réduire le fichier à l'essentiel, en supprimant les espaces, les sauts de ligne et les commentaires.

Dans LiteSpeed Cache > Optimisation de page, onglet Réglages CSS, activez Minifier le CSS. Essayez aussi Combiner les CSS, qui regroupe tous les CSS en un seul fichier et réduit le nombre de requêtes ; si la mise en page se dérègle, laissez-le désactivé.

« Réduisez les ressources CSS inutilisées »

Ce sont des règles CSS que la page n'utilise pas. Le rapport vous indique quels fichiers en contiennent. Le plus efficace :

Désactivez et supprimez les extensions que vous n'utilisez pas : beaucoup chargent leur CSS sur toutes les pages.
Si le CSS superflu vient du thème ou du constructeur, consultez leurs options de performance : Elementor, Divi et la plupart des thèmes commerciaux ont des réglages pour ne charger que le CSS utilisé par chaque page.
Pour voir quelles règles ne sont pas utilisées, ouvrez les outils de développement de Chrome et utilisez l'onglet Coverage.

« Réduisez la taille des ressources JavaScript »

Dans LiteSpeed Cache > Optimisation de page, onglet Réglages JS, activez Minifier le JS. Comme pour le CSS, essayez Combiner les JS et désactivez-le si quelque chose cesse de fonctionner.

« Réduisez les ressources JavaScript inutilisées »

Le rapport indique quels fichiers JavaScript contiennent le plus de code inutilisé :

Regardez de quelle extension provient chacun (le chemin l'indique : wp-content/plugins/nombre-del-plugin/...) et évaluez si vous en avez besoin. Comme pour le CSS, retirer les extensions inutilisées est ce qui aide le plus. Ne supprimez pas un fichier simplement parce que le rapport indique qu'il n'est pas utilisé au chargement : il peut être nécessaire à l'ouverture d'un menu ou à l'envoi d'un formulaire.

« Activez la compression de texte »

Tous nos serveurs compressent automatiquement le HTML, le CSS et le JavaScript avec Gzip ou Brotli si le navigateur le prend en charge. Vous n'avez rien à faire.

Vous pouvez réduire un peu plus le HTML dans Optimisation de page, onglet Réglages HTML, en activant Minifier le HTML.

« Différez le chargement des images hors écran »

C'est le chargement différé (lazy load) : les images situées plus bas ne sont téléchargées que lorsque le visiteur fait défiler la page jusqu'à elles.

Dans Optimisation de page, onglet Réglages des médias, activez Chargement différé des images.

Ne différez pas l'image principale visible dès l'ouverture de la page : cela dégrade le LCP. Si PageSpeed signale que l'image LCP est chargée en différé, ajoutez sa classe ou son URL dans Exclusions de noms de classes du chargement différé des images ou dans Exclusions du chargement différé des images, dans le même onglet.

« Dimensionnez correctement les images »

Il s'agit des pixels, pas du poids. Si vous envoyez une image de 2000 px de large et que la page n'en affiche que 1200 px, le visiteur télécharge plus que nécessaire. Sur mobile, c'est encore pire.

PageSpeed vous donne la liste des images concernées. Pour les corriger :

Envoyez les images à la taille à laquelle elles s'affichent, ou utilisez dans le thème ou le constructeur une taille d'image WordPress plus petite (miniature, moyenne, grande) au lieu de Taille réelle.
WordPress génère plusieurs tailles de chaque image et laisse le navigateur choisir la plus adaptée (srcset). Si les images sont anciennes, régénérez leurs tailles avec une extension comme Regenerate Thumbnails.

Dans Optimisation de page > Réglages des médias, activez aussi Ajouter les tailles manquantes : cela attribue une largeur et une hauteur aux images qui n'en ont pas. Leur poids n'est pas réduit, mais leur espace est réservé, ce qui aide pour le CLS.

« Encodez les images de manière efficace »

Les images peuvent être davantage compressées sans perte de qualité visible. Dans Optimisation des images, onglet Réglages de l'optimisation des images, activez Optimiser les images originales.

Les images sont envoyées aux serveurs de QUIC.cloud et reviennent optimisées automatiquement. Selon leur nombre, cela peut prendre des heures ou des jours. Vous pouvez suivre la progression dans Optimisation des images > Résumé de l'optimisation des images.

« Diffusez des images aux formats nouvelle génération »

WebP et AVIF sont bien plus légers que JPEG et PNG, et tous les navigateurs actuels les prennent en charge. LiteSpeed génère une version WebP de chaque image, conserve l'originale et sert à chaque navigateur celle qu'il accepte.

Dans Optimisation des images > Réglages de l'optimisation des images, dans Format d'image nouvelle génération, choisissez WebP (AVIF est payant chez QUIC.cloud). Les images déjà optimisées avant l'activation doivent être traitées de nouveau.

« Évitez une taille excessive du DOM »

Le DOM est l'arbre des éléments de la page : paragraphes, images, blocs, listes. Plus il y en a, plus le navigateur du visiteur a du mal à traiter la page.

Il correspond presque toujours à ce que l'on voit : une catégorie de 60 produits sans pagination, un carrousel de 30 produits, un énorme menu déroulant ou un constructeur qui imbrique de nombreux conteneurs. Réduisez le nombre d'éléments : paginez les catégories (dans WooCommerce avec un thème classique, dans Apparence > Personnaliser > WooCommerce > Catalogue produits, réduisez le nombre de lignes par page), raccourcissez les carrousels et simplifiez les sections du constructeur. Dans Elementor, utiliser des conteneurs plutôt que des sections et des colonnes réduit aussi le DOM.

« Éliminez les ressources qui bloquent le rendu »

Certains CSS et JavaScript obligent le navigateur à attendre leur téléchargement avant d'afficher quoi que ce soit. Beaucoup peuvent être chargés en parallèle :

CSS : dans Optimisation de page > Réglages CSS, activez Charger le CSS de façon asynchrone. Pour que la page n'apparaisse pas un instant sans styles, LiteSpeed génère le CSS critique avec QUIC.cloud.
JavaScript : dans Optimisation de page > Réglages JS, réglez Charger le JS en différé sur Différé.

Ces deux options sont celles qui provoquent le plus souvent des problèmes (menus qui ne s'ouvrent pas, sliders figés, bandeaux de cookies qui n'apparaissent pas). Si cela arrive, ajoutez le fichier en cause aux exclusions de ce même onglet ou désactivez l'option.

« Réduisez l'impact du code tiers »

Ce sont des scripts chargés depuis d'autres serveurs : analytics, publicité, chats, cartes, vidéos. Certains ne peuvent pas être évités (les régies publicitaires, par exemple). Pour les autres :

Retirez ceux que vous n'utilisez pas vraiment.
Pour les scripts génériques qui ne changent pas, comme celui de Google Analytics, LiteSpeed peut en conserver une copie sur votre serveur : dans Optimisation de page, onglet Localisation, activez Localiser les ressources.
Pour les vidéos YouTube intégrées, utilisez un aperçu qui ne charge le lecteur qu'au clic (dans LiteSpeed, Réglages des médias > Chargement différé des iframes).

Vérifier le résultat

Après chaque changement, dans LiteSpeed Cache > Boîte à outils, cliquez sur Tout purger et relancez PageSpeed Insights sur la même URL. Répétez le test deux ou trois fois : le score varie de quelques points d'une exécution à l'autre.

Si une page reste lente côté serveur (le rapport signale que « le temps de réponse initial du serveur » est élevé), le problème vient de WordPress et non du chargement des fichiers : repérez l'extension ou la requête lente avec PHP X-Ray. Pour aller plus loin, consultez le guide complet pour accélérer WordPress.