Core Web Vitals et Lighthouse : guide complet pour votre site

Juin 2026 · 13 min de lecture · Par GothamDev Studio

Google intègre la performance dans le classement et l'expérience utilisateur. Un site à 76 mobile Lighthouse perd des visiteurs — et des ventes. Voici la méthode GothamDev, utilisée sur gothamdev.fr et les sites clients (JR Postop 100/100).

1. Comprendre LCP, INP et CLS

LCP (Largest Contentful Paint) : temps d'affichage du plus grand élément visible — souvent l'image hero ou le titre.

INP (Interaction to Next Paint) remplace FID : réactivité aux clics. CLS : stabilité visuelle (pas de saut de mise en page).

Sur Comprendre LCP, INP et CLS, avancez une étape à la fois — validez chaque point avant le suivant.

Pour « Comprendre LCP, INP et CLS », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Comprendre LCP, INP et CLS » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Comprendre LCP, INP et CLS, gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Comprendre LCP, INP et CLS », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

« Comprendre LCP, INP et CLS » peut sembler redondant avec un autre chapitre : en pratique, c'est le niveau de détail qui change, pas le sujet global de Core Web Vitals et Lighthouse.

Avant d'appliquer « Comprendre LCP, INP et CLS » en production, testez sur un environnement restreint — compte démo, serveur privé, staging ou VM.

Pour « Comprendre LCP, INP et CLS », notez la version exacte de vos outils (OS, jeu, framework, thème). Un guide rédigé en 2026 peut diverger sur une version N-2.

2. Améliorer le LCP

Compressez en WebP/AVIF, préchargez l'image hero, évitez les sliders lourds. Hébergement proche de vos visiteurs (CDN si international).

Réduisez le CSS bloquant : fichiers critiques inline, reste en différé.

Améliorer le LCP : notez ce qui diffère de votre setup actuel, pas seulement ce qui est « théoriquement optimal ».

Pour « Améliorer le LCP », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Améliorer le LCP » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Améliorer le LCP, gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Améliorer le LCP », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

« Améliorer le LCP » peut sembler redondant avec un autre chapitre : en pratique, c'est le niveau de détail qui change, pas le sujet global de Core Web Vitals et Lighthouse.

Avant d'appliquer « Améliorer le LCP » en production, testez sur un environnement restreint — compte démo, serveur privé, staging ou VM.

Pour « Améliorer le LCP », notez la version exacte de vos outils (OS, jeu, framework, thème). Un guide rédigé en 2026 peut diverger sur une version N-2.

3. Éliminer les décalages (CLS)

Dimensions width/height sur images et iframes. Réservez l'espace pour bannières cookies et pubs.

Polices : font-display swap et métriques de fallback.

Beaucoup bloquent sur Éliminer les décalages (CLS) faute de sauvegarde préalable — exportez configs et bases avant toute modification.

Pour « Éliminer les décalages (CLS) », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Éliminer les décalages (CLS) » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Éliminer les décalages (CLS), gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Éliminer les décalages (CLS) », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

« Éliminer les décalages (CLS) » peut sembler redondant avec un autre chapitre : en pratique, c'est le niveau de détail qui change, pas le sujet global de Core Web Vitals et Lighthouse.

Avant d'appliquer « Éliminer les décalages (CLS) » en production, testez sur un environnement restreint — compte démo, serveur privé, staging ou VM.

Pour « Éliminer les décalages (CLS) », notez la version exacte de vos outils (OS, jeu, framework, thème). Un guide rédigé en 2026 peut diverger sur une version N-2.

4. JavaScript et thread principal

Defer/async, code splitting, supprimez plugins inutiles. Un seul gros bundle WordPress peut exploser le TBT.

Auditez avec Lighthouse + onglet Performance Chrome.

Pour JavaScript et thread principal, gardez un journal simple (date, changement, résultat) : indispensable si vous déléguez plus tard.

Pour « JavaScript et thread principal », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« JavaScript et thread principal » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de JavaScript et thread principal, gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « JavaScript et thread principal », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

« JavaScript et thread principal » peut sembler redondant avec un autre chapitre : en pratique, c'est le niveau de détail qui change, pas le sujet global de Core Web Vitals et Lighthouse.

Avant d'appliquer « JavaScript et thread principal » en production, testez sur un environnement restreint — compte démo, serveur privé, staging ou VM.

Pour « JavaScript et thread principal », notez la version exacte de vos outils (OS, jeu, framework, thème). Un guide rédigé en 2026 peut diverger sur une version N-2.

Un site lent ou mal structuré pénalise directement votre positionnement Google : nous visons un score Lighthouse mobile supérieur à 90 sur nos livraisons vitrine, landing et refonte.

5. Images et polices

Srcset responsive, lazy-load sous la ligne de flottaison. Sous-dimensionnez — pas d'image 4000 px pour un bloc 800 px.

Limitez les familles Google Fonts à 2–3 graisses utiles.

Sur Images et polices, avancez une étape à la fois — validez chaque point avant le suivant.

Pour « Images et polices », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Images et polices » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Images et polices, gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Images et polices », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

« Images et polices » peut sembler redondant avec un autre chapitre : en pratique, c'est le niveau de détail qui change, pas le sujet global de Core Web Vitals et Lighthouse.

Avant d'appliquer « Images et polices » en production, testez sur un environnement restreint — compte démo, serveur privé, staging ou VM.

Pour « Images et polices », notez la version exacte de vos outils (OS, jeu, framework, thème). Un guide rédigé en 2026 peut diverger sur une version N-2.

6. Hébergement et cache

HTTP/2 ou HTTP/3, compression Brotli, cache navigateur et serveur. Pour le statique, un CDN est quasi obligatoire à l'international.

Vérifiez TTFB < 200 ms sur le document HTML.

Hébergement et cache : notez ce qui diffère de votre setup actuel, pas seulement ce qui est « théoriquement optimal ».

Pour « Hébergement et cache », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Hébergement et cache » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Hébergement et cache, gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Hébergement et cache », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

« Hébergement et cache » peut sembler redondant avec un autre chapitre : en pratique, c'est le niveau de détail qui change, pas le sujet global de Core Web Vitals et Lighthouse.

Avant d'appliquer « Hébergement et cache » en production, testez sur un environnement restreint — compte démo, serveur privé, staging ou VM.

Pour « Hébergement et cache », notez la version exacte de vos outils (OS, jeu, framework, thème). Un guide rédigé en 2026 peut diverger sur une version N-2.

7. Approfondissement — aller plus loin

Une fois les bases en place, mesurez une métrique simple pendant sept jours : temps de réponse, FPS moyen, taux de conversion ou stabilité serveur.

Comparez votre résultat avec la documentation officielle — les écarts expliquent souvent la majorité des problèmes en support.

Si vous externalisez (hébergeur, agence, moddeur), demandez un compte rendu écrit : version, fichiers touchés, rollback possible.

Le maillage interne compte autant que les mots-clés : reliez services, études de cas, articles de blog et pages villes pour concentrer l'autorité SEO vers vos pages qui convertissent.

GothamDev accompagne des artisans, PME et créateurs en Gard, Drôme, Ardèche, Vaucluse et à l'international — un seul interlocuteur du cadrage à la mise en ligne, avec 821 avis vérifiés sur LeGeekShop (4,87★).

Testez toujours le parcours mobile avec le pouce : menu, bouton d'appel, formulaire. Si une étape demande deux mains, simplifiez.

Pour « Approfondissement — aller plus loin », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Approfondissement — aller plus loin » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Approfondissement — aller plus loin, gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Approfondissement — aller plus loin », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

8. Erreurs fréquentes (et comment les éviter)

Vouloir tout configurer en une session : séparez installation, réglages fins et ouverture au public.

Ignorer les sauvegardes « parce que c'est du test » — c'est souvent le test qui devient prod le vendredi soir.

Copier une config trouvée en ligne sans l'adapter à votre CPU, RAM, connexion ou nombre de joueurs.

Un site vitrine efficace répond en cinq secondes à trois questions : qui êtes-vous, que proposez-vous, comment vous joindre.

Les pages légales ne sont pas optionnelles : mentions, confidentialité et cookies rassurent Google autant que vos visiteurs.

Avant une refonte, exportez les URLs indexées depuis Search Console — vous évitez de perdre des positions sur d'anciennes pages bien classées.

Pour « Erreurs fréquentes (et comment les éviter) », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Erreurs fréquentes (et comment les éviter) » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Erreurs fréquentes (et comment les éviter), gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Erreurs fréquentes (et comment les éviter) », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

9. Suivi sur le long terme

Planifiez une revue trimestrielle : drivers, mises à jour, plugins obsolètes, contenu à rafraîchir.

Notez ce qui a changé depuis la dernière intervention — la mémoire seule ne suffit pas sur Core Web Vitals et Lighthouse.

Gardez un contact de confiance (SAV, hébergeur, intégrateur) avant la panique : le diagnostic coûte moins cher que l'urgence.

Les formulaires trop longs tuent la conversion : nom, email, message suffisent souvent pour un premier contact B2B.

Un blog n'est utile que si vous pouvez le tenir : un article mensuel de qualité bat dix pages vides publiées en une semaine.

Les polices web : deux familles maximum, poids limités, preload sur la police du hero pour éviter le flash de texte invisible.

Pour « Suivi sur le long terme », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Suivi sur le long terme » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Suivi sur le long terme, gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Suivi sur le long terme », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

10. Checklist finale avant de clôturer

Relisez chaque section une dernière fois : rien n'a été activé « temporairement » et oublié.

Partagez la procédure avec une deuxième personne si possible — quatre yeux voient ce qu'un seul rate sur Core Web Vitals et Lighthouse.

Archivez configs, captures et numéros de version dans un dossier daté : indispensable pour le prochain passage.

Pensez accessibilité dès la maquette : contrastes, focus clavier, labels sur les champs — ce n'est pas réservé aux grandes entreprises.

Un setup gaming 2026 équilibre GPU, CPU, RAM DDR5 et SSD NVMe Gen4 — évitez le goulot d'étranglement (RTX série 50 ou RX 8000 selon budget, 32 Go RAM pour le multitâche stream + jeu).

Refroidissement et alimentation comptent : boîtier airflow, ventirads ou AIO 240 mm+, alim 80+ Gold 750 W minimum pour configs milieu/haut de gamme.

Pour « Checklist finale avant de clôturer », bloquez une plage horaire sans interruption : la moitié des erreurs vient d'une étape sautée parce qu'on avait la tête ailleurs.

« Checklist finale avant de clôturer » dans le cadre de Core Web Vitals et Lighthouse : si vous déléguez, rédigez une mini-checklist — votre futur vous remerciera.

Autour de Checklist finale avant de clôturer, gardez une copie de la config ou du fichier d'origine. Revenir en arrière doit rester possible en moins de dix minutes.

Sur « Checklist finale avant de clôturer », mesurez avant/après une seule métrique (temps de chargement, FPS, taux d'erreur, leads) — sinon vous ne saurez pas si ça valait le coup.

Synthèse : plan d'action 30 jours

Appliquez ce guide par étapes — pas tout en même temps. Mesurez une métrique par semaine pour savoir ce qui fonctionne.

GothamDev peut prendre en charge tout ou partie de ce plan : audit initial gratuit, devis transparent et livrables testés.

• Semaine 1 : audit URLs, objectifs, benchmark concurrents locaux
• Semaine 2 : arborescence, wireframes, rédaction des textes clés
• Semaine 3 : développement, intégrations, tests mobile
• Semaine 4 : SEO technique, Search Console, mise en ligne + suivi 30 jours