Comment optimiser son site pour améliorer les Core Web Vitals

Vous savez que votre site rame un peu… mais tant qu’il finit par s’afficher, vous vous dites que ça ira. Jusqu’au jour où un client lâche : « J’ai abandonné, ça ne chargeait jamais ». Là, ça pique.

Les Core Web Vitals, c’est ça qu’ils mesurent : le moment où les gens décident de rester… ou de fermer l’onglet.

Je vous propose qu’on les apprivoise ensemble, sans les transformer en usine à gaz technique.

---

D’abord : à quoi servent vraiment les Core Web Vitals ?

Je résume comme je l’explique à mes proches qui ont un site vitrine ou une petite boutique en ligne :

Les Core Web Vitals, ce sont trois questions très simples :

1. Quand est-ce que je vois enfin quelque chose d’utile ? (LCP)
2. Quand est-ce que je peux enfin cliquer sans attendre ? (INP, remplaçant du FID)
3. Est-ce que tout reste en place ou ça bouge dans tous les sens ? (CLS)

Concrètement :

• LCP (Largest Contentful Paint) : le temps que met le gros élément principal de la page (souvent une grande image ou un titre) à s’afficher.
• INP (Interaction to Next Paint) : le temps de réaction quand on interagit (clic, touche, etc.). Avant, on parlait surtout de FID, mais l’idée reste : « est-ce que le site répond vite ? ».
• CLS (Cumulative Layout Shift) : est-ce que le contenu se décale pendant le chargement (le fameux bouton qui fuit sous votre doigt…).

Pourquoi c’est important ?

• Vos visiteurs restent plus longtemps si le site répond vite.
• Ils achètent / remplissent un formulaire / lisent vos contenus plus volontiers.
• Les moteurs de recherche tiennent compte de ces signaux pour départager deux sites qui se valent en contenu.

Pas besoin de viser la perfection scientifique. Le but, c’est d’atteindre la zone « confortable » : rapide pour un humain normal, sur une connexion normale, avec un téléphone normal.

---

Étape 1 : mesurer sans paniquer

Avant de toucher à quoi que ce soit, je regarde toujours l’état réel du site.

Trois outils simples pour ça :

• PageSpeed Insights (gratuit, en ligne) : vous collez l’URL, il vous donne un score et des conseils concrets.
• Lighthouse (intégré à Chrome) : pour tester en local, pratique quand le site est en développement.
• Rapport « Signaux Web essentiels » dans la Search Console : là, vous voyez ce que vivent vos vrais visiteurs dans la durée.

Je garde en tête deux choses importantes :

1. Les scores varient : selon l’heure, le serveur, la connexion simulée… Je regarde une tendance, pas un test isolé.
2. Mobile d’abord : c’est souvent là que ça fait le plus mal. Je regarde les résultats mobile avant ceux pour ordinateur.

Petite méthode personnelle :

• Je teste la page d’accueil, une fiche produit / service et une page d’article.
• Je note dans un coin : ce qui est vraiment catastrophique (rouge foncé) et ce qui est juste moyen (orange).
• Je choisis un seul objectif prioritaire pour démarrer, par exemple « améliorer LCP sur mobile ».

On ne gagne pas un marathon en tirant dans tous les sens en même temps.

---

Gagner de précieuses secondes sur le LCP (l’élément principal)

Le LCP, c’est souvent le plus simple à comprendre : qu’est-ce qui prend le plus de temps à arriver ?

Dans 90 % des cas, c’est :

• une grosse image de bannière,
• un slider (carrousel) en haut de la page,
• ou un bloc de texte stylé chargé via une police exotique et des scripts.

Ce que je fais presque systématiquement

1. Réduire la taille des images

   • Redimensionner à la taille d’affichage réelle : inutile d’envoyer un visuel de 4000 px de large si on l’affiche en 1200 px.
   • Compresser les images :
     • Formats modernes possibles (WebP, AVIF) si votre système le permet.
     • Un outil d’optimisation (plugin, service en ligne ou intégré au CMS).

2. Stopper les sliders « déco » en haut de page Honnêtement, je le dis sans détour :

   • Les gens ne regardent presque jamais la 2e ou 3e diapo.
   • Ça pèse lourd, ça bouge, ça peut fatiguer.

   Je garde une seule image forte ou un bloc texte clair, et j’allège tout le reste.

3. Charger d’abord l’essentiel

   • Le contenu principal au-dessus de la ligne de flottaison (ce qu’on voit sans scroller) doit être servi en priorité.
   • Je demande au développeur (ou au thème, ou au constructeur de page) de :
     • charger les scripts non essentiels plus tard,
     • éviter de bloquer le rendu pour des gadgets (chat, pop-up, etc.).

Un repère réaliste : si votre LCP est autour de 4–5 secondes sur mobile au départ, il n’est pas rare de gagner 1 à 2 secondes rien qu’en optimisant l’image principale et en nettoyant les scripts superflus.

---

Rendre le site vraiment réactif : améliorer l’INP

La réactivité, on la sent avec le ventre :

• vous cliquez sur « Ajouter au panier »…
• rien ne se passe pendant un moment…
• vous cliquez une deuxième fois…
• vous vous retrouvez avec 2 produits dans le panier.

Même si techniquement « tout fonctionne », l’expérience est mauvaise.

Les suspects habituels

1. Trop de JavaScript

   • Plugins qui se marchent dessus.
   • Pistes marketing ou d’analytics empilées sans tri.
   • Animations lourdes partout.

2. Serveur lent ou surchargé

   • Hébergement d’entrée de gamme saturé.
   • Base de données mal optimisée.

3. Code côté front surchargé

   • Constructeurs de page qui génèrent beaucoup d’HTML et de CSS.

Ce que je propose comme plan d’attaque simple

1. Faire un ménage de printemps dans les plugins / scripts

   • Lister tout ce qui est chargé : outils de suivi, widgets sociaux, pop-ups, chat, etc.
   • Se poser une vraie question : est-ce que ça m’apporte réellement quelque chose ?
   • Désactiver ce qui est facultatif, au moins en test, et mesurer à nouveau.

2. Reporter ce qui n’a pas besoin d’être là au chargement initial

   • Charger certains scripts après l’affichage du contenu principal.
   • N’activer un script que quand on en a besoin (par exemple : charger le widget de chat quand la personne ouvre l’onglet de chat, pas avant).

3. Tester sur un vrai téléphone moyen

   • Pas sur votre dernier smartphone ultra-puissant.
   • Prendre un appareil un peu plus ancien ou bas/milieu de gamme.
   • Ouvrir la page en 4G normale : est-ce que les boutons réagissent vite ? Est-ce qu’il y a ce moment de flottement agaçant après chaque clic ?

4. Se poser la question de l’hébergement

   • Si votre site grandit, que vous avez + de visiteurs, l’hébergement de départ peut devenir trop juste.
   • Un bon indice : si même une page ultra-simple met un temps fou à répondre, le souci n’est pas seulement côté front.

Je le dis franchement : dès qu’on parle d’INP, on arrive souvent dans une zone où l’aide d’un développeur ou d’un intégrateur fait gagner beaucoup de temps. Ça reste pilotable pour vous, mais à plusieurs, c’est plus simple.

---

Stopper les pages qui bougent toutes seules : dompter le CLS

Le CLS, c’est ce truc insupportable :

• vous voulez cliquer sur un bouton,
• une bannière de cookies arrive,
• la page se décale,
• vous cliquez sur autre chose.

Ou alors un texte qui descend d’un coup parce qu’une image au-dessus vient de se charger.

Les règles d’or que j’applique

1. Toujours réserver l’espace des images et des blocs

   • Définir une largeur et une hauteur pour les images dans le code (ou au moins un ratio).
   • Éviter d’insérer des éléments « par surprise » au-dessus du contenu déjà visible.

2. Soigner les bannières et pop-ups

   • Préférer une bannière de cookies fixe en bas ou en haut, qui ne pousse pas tout le contenu.
   • Éviter les pop-ups pleine page qui apparaissent en décalant tout.

3. Limiter les polices exotiques

   • Quand une police met du temps à arriver, le texte peut changer de taille d’un coup, et tout bouge.
   • On peut :
     • choisir une combinaison police personnalisée + police système visuellement proche,
     • utiliser les options qui permettent d’afficher d’abord le texte, puis d’appliquer la police (avec un léger changement, mais sans gros décalage).

Une astuce que j’aime bien : naviguer sur mon site en vidéo (capture d’écran vidéo) et regarder la page au ralenti. On voit tout de suite les moments où ça saute ou se décale.

---

Une méthode simple pour progresser sans se perdre

Si je devais résumer une démarche « à hauteur de vie » pour optimiser un site sans devenir ingénieur performance :

1. Mesurer l’existant

   • PageSpeed Insights sur 2–3 pages clés.
   • Regarder LCP, INP, CLS, d’abord sur mobile.

2. Choisir un seul focus pour 2–3 semaines

   • Par exemple : améliorer LCP sur les pages produits.
   • Agir sur : images, scripts inutiles, sliders, mise en avant du contenu principal.

3. Mettre en place 2–3 actions concrètes, pas 12

   • Compresser les images.
   • Désactiver 2 plugins peu utiles.
   • Réordonner le chargement des scripts avec l’aide de votre développeur ou d’un plugin de cache/performance.

4. Re-mesurer

   • Même outil, même pages.
   • Accepter que les scores ne soient pas parfaits, mais regarder si la tendance est meilleure.

5. Répéter avec l’indicateur suivant

   • Quand LCP est correct, passer à INP ou CLS.

L’idée, ce n’est pas de courir après un 100/100 qui change au moindre script ajouté. C’est de faire en sorte que vos visiteurs se disent : « Ah, ce site est agréable, ça va vite, je reste. »

---

Au fond, les Core Web Vitals parlent surtout de respect

Quand on enlève les sigles et les graphiques, les Core Web Vitals disent juste :

“Est-ce que tu respectes le temps, l’attention et la patience de la personne qui te visite ?”

Un site plus rapide, ce n’est pas seulement un meilleur score dans un rapport. C’est :

• moins de frustration,
• plus de confiance,
• et souvent, plus de conversions sans changer une ligne de texte marketing.

Si tout ça vous paraît encore un peu flou ou intimidant, vous pouvez très bien avancer par petits pas : une page, un indicateur, une amélioration concrète.

Et si vous travaillez avec un développeur ou une agence, vous avez maintenant une grille simple pour discuter : « On pourrait regarder ensemble le LCP de la page d’accueil ? J’aimerais que la partie visible s’affiche plus vite, quitte à charger le reste ensuite. »

C’est souvent comme ça que commencent les vrais progrès : avec une question simple, au service de vraies personnes qui visitent votre site, pas seulement d’un score abstrait.

Alors, par quelle page vous avez envie de commencer, vous ?