Pourquoi j'écris ceci

Je gère quelques sites Web maintenant et depuis mes débuts, mes performances ont été très variables. J'ai parfois trouvé cela carrément ennuyeux. Tout semble très bien fonctionner pour moi localement, mais ensuite je vérifie les analyses de mon serveur et je peux voir que pour certains pays, ma vitesse a été terrible.

Cela a toujours semblé être l'un ou l'autreCLSouPCLc'est le problème pour moi. J'ai donc pensé partager mon expérience et essayer d'aider les autres à comprendre cela, surtout si vous vivez la même chose. Ou peut-être avez-vous rencontré des problèmes avec cela et avez-vous une perspective ou une solution unique ? J'aimerais en entendre parler.

SelonJournal des moteurs de recherche, l'optimisation de ces deux métriques peut améliorer considérablement la visibilité de votre site et la satisfaction des utilisateurs. Cela semblait bien en théorie, mais en réalité, les réparer a été une autre histoire. Laissez-moi vous expliquer ce que j'ai appris.

Que sont exactement CLS et LCP ?

Avant d'entrer dans mes propres difficultés, permettez-moi de vous expliquer de quoi il s'agit réellement, car lorsque j'ai vu ces acronymes pour la première fois dans Google Search Console, je n'avais aucune idée de ce qu'ils signifiaient.

Changement de mise en page cumulatif (CLS)mesure à quel point votre mise en page saute pendant son chargement. Vous savez, lorsque vous êtes sur le point d'appuyer sur un bouton et que la page entière se déplace, vous cliquez donc sur la mauvaise chose ? C'est un problème CLS. C’est incroyablement frustrant en tant qu’utilisateur, et il s’avère que les moteurs de recherche vous pénalisent également pour cela.

La plus grande peinture de contenu (LCP)mesure le temps nécessaire au chargement du plus grand élément visible de votre page. Il s'agit généralement d'une image de héros ou d'un gros bloc de texte. Si votre LCP est lent, vos visiteurs regardent une page à moitié chargée et beaucoup partiront tout simplement.

Ces deux éléments relèvent de GoogleÉléments essentiels du Web, qui affectent directement votre classement dans les recherches. Ainsi, même si votre contenu est brillant, de mauvais scores CLS et LCP peuvent vous freiner.

Optimisez votre site Web pour CLS et LCP

🖼️

Définir les dimensions de l'image
Spécifier la largeur et la hauteur des images

📢

Utilisez les publicités de manière responsable
Évitez le redimensionnement inattendu des annonces

⚡

Précharger les ressources importantes
Assurez-vous que le contenu critique se charge rapidement

🔄

Réduire le contenu dynamique
Limiter le contenu qui change pendant le chargement

📊

Surveiller régulièrement les performances
Utiliser des outils pour suivre les scores CLS et LCP

Mon cauchemar CLS

CLS a été le premier problème que j’ai rencontré. Mes pages me semblaient bonnes, mais mes scores étaient terribles. Après de nombreuses recherches, j'ai trouvé les principaux coupables :

Images sans dimensions :Je ne définissais pas la largeur et la hauteur de mes images. Le navigateur n'avait aucune idée de la quantité d'espace à réserver, donc tout a changé une fois les images chargées.
Chargement tardif des polices :Mes polices personnalisées se chargeaient après le rendu de la page, ce qui faisait sauter tout mon texte lorsque la nouvelle police remplaçait la solution de secours. Celui-ci était subtil mais il s’additionnait.
Contenu dynamique :Certains composants injectaient du contenu après le chargement de la page, poussant tout ce qui se trouvait en dessous vers le bas.

La solution à la plupart de mes problèmes CLS était étonnamment simple. J'ai commencé à définir des dimensions explicites pour toutes les images et tous les médias. J'ai ajouté un échange d'affichage de polices au chargement de mes polices afin que la solution de secours s'affiche immédiatement. Et j'ai réservé de l'espace avec CSS pour tout contenu chargé dynamiquement.

Des outils commeInformations Google PageSpeedont été d'une grande aide ici. They show you exactly which elements are causing layout shifts, so you are not guessing.

Puis vint le problème LCP

Juste au moment où je pensais avoir réglé les choses, monBookmakersa commencé à faiblir. Le plus frustrant était que mon site se chargeait rapidement pour moi au Royaume-Uni, mais mes analyses montraient des vitesses terribles dans d'autres pays. C'est le problème avec LCP : cela dépend fortement de l'endroit où se trouvent vos utilisateurs et de leur distance par rapport à votre serveur.

Les principaux problèmes que j'ai trouvés étaient les suivants :

Grandes images non optimisées :Mes images de héros étaient bien trop grandes. Je téléchargeais des photos en pleine résolution sans les compresser.
Temps de réponse du serveur :Sans CDN, les utilisateurs éloignés de mon serveur attendaient longtemps la première réponse.
JavaScript bloquant le rendu :J'avais des scripts chargés dans la tête qui bloquaient le rendu de la page jusqu'à ce qu'ils soient terminés.

CommeL'étude de Backlinkomontre, les sites avec de bons scores LCP ont un engagement sensiblement meilleur et des taux de rebond plus faibles. Une fois que j’ai commencé à résoudre ces problèmes, j’ai pu voir la différence dans mes propres analyses.

Qu'est-ce qui a réellement aidé mon LCP

J'ai commencé à compresser toutes mes images et à utiliser le format WebP lorsque cela était possible. J'ai également déplacé des scripts non essentiels pour les charger de manière asynchrone ou les ai entièrement différés. Mes sites sont hébergés sur Vercel, qui gère pour moi une grande partie du réseau Edge, mais si vous utilisez un hébergement traditionnel, la mise en place d'unCDN can make a huge difference for international traffic.

Un CDN stocke des copies de votre site dans le monde entier, de sorte que les visiteurs sont servis depuis un endroit plus proche d'eux plutôt que depuis votre serveur d'origine unique. Si vous constatez de mauvaises vitesses dans des régions spécifiques, c’est l’une des premières choses à examiner.

La partie ennuyeuse : elle n’est jamais vraiment « réparée »

Voici ce dont personne ne vous parleCLS et LCP. Vous ne les réparez pas une fois et passez à autre chose. Chaque fois que j'ajoute une nouvelle fonctionnalité, une nouvelle image ou que je modifie ma mise en page, les scores peuvent à nouveau changer. C'est une chose continue.

J'ai eu des semaines où tout est vert dans Google Search Console, puis j'ajoute un nouveau composant et tout à coup mon CLS est à nouveau signalé. C'est carrément ennuyeux, mais j'ai maintenant appris à vérifier mes Core Web Vitals après chaque changement important.

Impact de CLS et LCP sur l'expérience utilisateur

0,1 seconde

Tolérance de l'utilisateur

32%

Augmentation du taux de rebond

Baisse du taux de conversion

Éléments essentiels du Web

Importance du classement SEO

Un rapport deLa marque financièresouligne à quel point la lenteur des sites Web peut directement entraîner une perte de revenus. C’est une motivation suffisante pour rester au courant, même si cela semble fastidieux.

Les outils qui m'ont le plus aidé

Si vous rencontrez les mêmes problèmes, voici les outils que j'utilise réellement et que je trouve utiles :

Console de recherche Google :C'est là que j'ai remarqué mes problèmes pour la première fois. Il affiche vos scores Core Web Vitals ventilés par page et vous indique exactement ce qui nécessite votre attention.
Informations sur PageSpeed :Je parcours chaque page après avoir apporté des modifications. Il donne des recommandations spécifiques et réalisables plutôt que de vagues conseils.Guide des performances Web de Shopifyest également une excellente ressource complémentaire.
Extension des éléments vitaux Web :Cette extension Chrome affiche vos CLS, LCP et autres métriques en temps réel lorsque vous parcourez votre propre site. Je le garde constamment pendant le développement.

Une fois que vous avez identifié vos problèmes de performances, utilisez notreOutil de classement Google Search AIpour vérifier si vos améliorations se traduisent réellement par une meilleure visibilité dans les recherches. Il ne sert à rien de fixer les scores si cela n’aide pas votre classement.

Mon conseil si vous vivez cela

Si votre performance a été aussi élevée que la mienne, voici ce que je suggérerais :

Ne paniquez pas.Les problèmes CLS et LCP sont incroyablement courants. Vous ne faites pas tout de travers : ces mesures sont simplement sensibles.
Vérifiez vos analyses par pays.Votre site peut être rapide pour vous mais lent pour les visiteurs ailleurs. Un CDN peut résoudre ce problème rapidement.
Corrigez d'abord les images.D'après mon expérience, les images non optimisées et les dimensions manquantes sont à l'origine de la plupart des problèmes CLS et LCP.
Testez après chaque changement.Prenez l'habitude d'exécuter PageSpeed Insights chaque fois que vous effectuez des mises à jour importantes.
Sois patient.La mise à jour des données de Google Search Console peut prendre des jours, voire des semaines. Ne présumez pas que vos correctifs ne fonctionnent pas simplement parce que le tableau de bord n'a pas encore changé.

J'apprends encore et je suis toujours confronté à cela. Mes scores sont meilleurs qu’ils ne l’étaient, mais je ne les qualifierais pas de parfaits. Si vous avez trouvé des solutions qui ont fonctionné pour vous, j’aimerais vraiment en entendre parler. Vous pouvez également essayer de visualiser vos données de performances avec notrecréateur de graphiques en ligne gratuitpour suivre les améliorations au fil du temps.

L'essentiel est le suivant :CLS et LCPne s'en vont pas. Ils sont importants pour le référencement, ils sont importants pour l’expérience utilisateur, et si vous gérez des sites Web comme moi, ils vous garderont sur vos gardes. Mais ils sont réparables et chaque amélioration que vous apportez en vaut la peine.