Votre site est lent ? Comment lire vos Core Web Vitals

Traduction assistée par IA. Le contenu original a été rédigé en anglais.

Une cliente m'a écrit avec une question toute simple : est-ce que mon site est lent ? Un de ses clients en avait glissé un mot, et elle n'avait aucun moyen de savoir si c'était vrai. Ma réponse n'était probablement pas celle qu'elle attendait. Vous n'avez pas besoin de moi pour celle-là. Vous pouvez le découvrir vous-même en deux minutes environ, avec un outil gratuit de Google, et une fois que vous savez ce que veulent dire les trois chiffres, vous pouvez lire le résultat sans un développeur assis à côté de vous.

C'est le complément d'un billet que j'ai déjà écrit sur pourquoi la vitesse de votre site compte. Celui-là explique pourquoi s'en soucier. Celui-ci vous donne le diagnostic. Si vous avez déjà soupçonné que votre site traînait de la patte sans savoir comment le vérifier, voici comment le vérifier.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont trois mesures que Google utilise pour évaluer ce que votre site fait ressentir à une vraie personne qui l'utilise. Pas de quoi il a l'air. Ce qu'il fait ressentir : à quelle vitesse la page apparaît, à quelle vitesse elle réagit quand quelqu'un tape dessus, et si elle reste stable pendant qu'elle charge. Google en a fait un critère de classement officiel, alors elles influencent à la fois vos visiteurs et votre position dans les résultats de recherche. Les trois sont désignées par leurs initiales : LCP, INP et CLS. Une fois que vous savez ce que chacune surveille, le rapport devient limpide.

Que veulent vraiment dire LCP, INP et CLS ?

En clair : LCP, c'est le chargement, INP, c'est la réactivité, CLS, c'est la stabilité. Voilà toute l'idée. Tout ce qui suit ce paragraphe n'est que du détail sur chacune.

LCP, Largest Contentful Paint (l'affichage du plus gros élément), mesure le temps qu'il faut pour que la plus grosse chose à l'écran apparaisse vraiment. En général, c'est votre image d'en-tête ou votre titre principal. Il répond à la question « combien de temps est-ce que je fixe une page blanche ou à moitié construite avant que le vrai contenu apparaisse ? »

INP, Interaction to Next Paint (le délai de réaction), mesure la vitesse à laquelle la page réagit quand vous faites quelque chose : toucher un bouton, ouvrir le menu, dérouler un formulaire. Il répond à la question « est-ce que le site a réagi tout de suite, ou est-ce que je viens de taper sur un écran figé en attendant ? » Un INP lent, c'est le site qui reste collant et qui ne répond pas, même une fois qu'il a l'air chargé.

CLS, Cumulative Layout Shift (le décalage de la mise en page), mesure à quel point la page saute pendant qu'elle charge. Vous connaissez le scénario : vous allez toucher un lien, une image ou une publicité charge au-dessus, pousse tout vers le bas, et vous touchez la mauvaise chose. Le CLS met un chiffre sur cet agacement.

Comment tester la vitesse de mon site gratuitement ?

Deux outils gratuits de Google font le travail, sans compte pour le premier. PageSpeed Insights analyse une seule page à la demande. Le rapport Core Web Vitals dans Google Search Console suit tout votre site dans le temps. Commencez par PageSpeed Insights.

Allez sur pagespeed.web.dev, collez l'adresse de votre page d'accueil et cliquez sur Analyser. Laissez-lui quelques secondes. Il teste séparément vos versions mobile et ordinateur, et vous voulez d'abord regarder l'onglet Mobile. C'est là que se trouvent la plupart de vos visiteurs, et c'est presque toujours là qu'un site force. Le rapport note votre page et indique exactement laquelle des trois mesures échoue.

Quand vous voudrez la vue d'ensemble, le rapport Core Web Vitals dans Google Search Console classe chaque page de votre site en Bon, À améliorer et Médiocre, et montre la tendance dans le temps à partir des données de vrais visiteurs. PageSpeed Insights, c'est un instantané d'une seule page en ce moment. Search Console, c'est le site au complet, mesuré sur le trafic réel. Servez-vous des deux.

Qu'est-ce qu'un bon résultat, et qu'est-ce qu'un mauvais ?

Google publie des seuils précis, et une page ne compte comme Bonne que si elle passe les trois d'un coup. Ratez-en un seul et la page échoue. Voici les chiffres.

Tout ce qui se situe entre Bon et Médiocre est la zone intermédiaire que Google appelle « à améliorer ». Maintenant, la partie qui mêle tout le monde. PageSpeed Insights affiche aussi un gros score de 0 à 100 en haut. Ce chiffre est une simulation en laboratoire, utile, mais ce n'est pas ce qui compte. Le vrai « réussite ou échec » repose sur les données de vrais visiteurs, mesurées au 75e centile de votre trafic, ce qui est une façon technique de dire « trois visiteurs réels sur quatre devraient avoir une bonne expérience ». Visez d'abord le vert sur les mesures des vrais utilisateurs, et traitez le score de 0 à 100 comme un indice utile, pas comme l'objectif.

Qu'est-ce qui ralentit vraiment mon site ?

La plupart des mauvais résultats remontent à une courte liste de coupables habituels, et chacun a tendance à frapper une mesure précise. Une fois que vous savez quelle mesure échoue, vous pouvez souvent deviner la cause.

Les grosses images non optimisées démolissent le LCP. Une photo de quatre mégaoctets sortie directement d'un appareil photo de téléphone, là où une version web bien dimensionnée aurait l'air identique pour une fraction du poids, c'est la raison numéro un pour laquelle le site d'une petite entreprise obtient un mauvais résultat. Trop de scripts et d'extensions lourds démolissent l'INP. Chaque extension, balise de suivi, fenêtre de clavardage et carrousel ajoute du code que le navigateur doit digérer avant de pouvoir réagir à un toucher. Sur WordPress en particulier, la surcharge d'extensions est le coupable habituel. L'absence de mise en cache et un hébergement lent font encore chuter le LCP, parce que sans mise en cache (et souvent sans CDN), le serveur reconstruit toute la page à partir de zéro pour chaque visiteur. Et les images ou les publicités sans dimensions définies causent le CLS, parce que quand le navigateur ne connaît pas la hauteur d'un élément avant qu'il charge, il devine, puis bouscule la page quand le vrai élément arrive.

Quelles corrections puis-je faire moi-même, et lesquelles demandent un développeur ?

Honnêtement : une partie se règle en une fin de semaine et une autre non, et ça vaut la peine de savoir quoi est quoi avant de dépenser. Une bonne partie des gains faciles est à votre portée.

Vous pouvez faire celles-ci vous-même. Compressez vos images avant de les téléverser, avec un outil gratuit comme TinyPNG ou Squoosh, pour qu'une photo de deux mégaoctets devienne deux cents kilooctets sans différence visible. Définissez la largeur et la hauteur de vos images si votre créateur de site le permet. Supprimez les extensions que vous n'utilisez pas. Si vous êtes sur WordPress, activez une extension de mise en cache. Cette liste à elle seule règle beaucoup de problèmes de LCP et de CLS, et ça ne coûte qu'un après-midi.

Voici où ça cesse d'être un travail de fin de semaine. Un INP paresseux causé par des scripts lourds, du code qui bloque l'affichage, un thème surchargé, la configuration du serveur et de l'hébergement, la mise en place d'un CDN, ou un site tout simplement construit lentement au départ. Quand vous avez compressé les images, éliminé les extensions mortes et que le rapport reste rouge, le problème est dans la façon dont le site a été construit, et aucune extension ne corrige ça. C'est le moment où vous voulez un vrai développeur, et si vous en engagez un, comment choisir un concepteur web et combien coûte vraiment un site web en Ontario valent tous les deux la peine d'être lus d'abord.

Alors faites le test aujourd'hui. Collez votre page d'accueil dans PageSpeed Insights, regardez l'onglet Mobile et observez ces trois chiffres. S'ils sont verts, tant mieux, votre site fait son travail. S'ils sont rouges et que vous avez déjà fait les corrections faciles, écrivez-moi et je vous dirai ce qui se passe vraiment sous le capot.