Core Web Vitals : passer de 69 à 98 sur mobile

Un site web magnifique qui met quatre secondes à s'afficher sur un smartphone en 4G perd plus de la moitié de ses visiteurs avant même qu'ils aient lu la première ligne. Pour Google, la vitesse sur mobile n'est plus un bonus esthétique : c'est un critère d'indexation impitoyable mesuré par les Core Web Vitals (CWV).

Récemment, sur l'un de mes projets d'extension et de web app (StreamPulse), l'audit initial Lighthouse sur mobile affichait un score décevant de 69 sur 100, avec un LCP (Largest Contentful Paint) désastreux à 9,7 secondes. Après optimisation technique ciblée, le score est monté à 98 sur 100, avec un LCP réduit à 2,0 secondes et un CLS (Cumulative Layout Shift) à zéro.

Voici la méthodologie exacte pour obtenir ces résultats sans réécrire tout votre code.

1. Résoudre le LCP : traquer les médias non compressés

Le Largest Contentful Paint mesure le temps nécessaire pour que le plus grand élément visible à l'écran (souvent une image d'en-tête ou une bannière de hero) soit complètement dessiné.

Dans 90 % des cas où le score mobile s'effondre sous les 70, la cause est bêtement visuelle :

• Le piège du PNG brut : la page chargeait 1,9 Mo d'illustrations et de captures d'écran au format PNG. Sur une connexion mobile ralentie, télécharger 2 Mo de visuels bloque le pipeline de rendu du navigateur.
• La solution WebP / AVIF : la conversion de ces assets en WebP moderne avec une compression contrôlée a réduit l'image la plus lourde de 820 Ko à seulement 18 Ko, soit une réduction de poids de plus de 97 %.
• Priorité de chargement : pour l'image du hero au-dessus de la ligne de flottaison, ajouter l'attribut fetchpriority="high" et désactiver le lazy-loading (qui ne doit être réservé qu'aux images situées sous le pli).

2. Éliminer le CLS (Cumulative Layout Shift)

Le CLS mesure l'instabilité visuelle : ce moment frustrant où vous vous apprêtez à appuyer sur un bouton et où la page se décale brutalement de 10 pixels parce qu'un script client s'est réveillé en retard.

Pour éliminer définitivement tout saut d'interface :

1. Dimensionner systématiquement les conteneurs dynamiques : si vous affichez un bouton de connexion ou un compteur d'attente qui dépend d'un fetch d'API, réservez son espace à l'avance en CSS (min-height: 48px; box-sizing: border-box;).
2. Déclarer les attributs width et height sur chaque balise <img> : le navigateur calcule ainsi le ratio d'aspect avant même le téléchargement de l'image, empêchant tout saut de texte au moment du chargement.
3. Inspecter les sauts invisibles via Puppeteer : à l'aide d'un script Node automatisé écoutant les entrées PerformanceObserver de type layout-shift, vous pouvez identifier au millième de pixel près quel nœud DOM est responsable du décalage.

3. Alléger le JavaScript et assainir la console

Un score Lighthouse élevé exige également une note parfaite sur le volet « Bonnes pratiques » (Best Practices). Deux écueils fréquents font souvent chuter cette note de 100 à 90 :

• Erreurs ou avertissements masqués dans la console : des formulaires sans attribut name ou id, ou des règles de Content Security Policy (CSP) qui bloquent des appels réseau résiduels.
• Scripts tiers encombrants : préférez des solutions d'analyse d'audience légères (comme Plausible, qui pèse moins de 1 Ko) plutôt que les scripts marketing lourds qui ralentissent l'exécution du fil d'exécution principal (main thread).

4. Ce que la vitesse rapporte concrètement à votre business

Optimiser la vitesse d'un site web n'est pas un caprice de développeur :

• Chaque seconde gagnée augmente le taux de conversion de 10 à 20 %.
• Le coût d'acquisition Google Ads baisse car le score de qualité (Quality Score) de la page de destination s'améliore.
• Votre référencement naturel grimpe sur les requêtes locales concurrentielles face aux sites d'agences plus lents.

Votre site actuel met plus de 3 secondes à charger sur mobile ? Demandez un audit gratuit et sans engagement de vos Core Web Vitals sur ma page contact ou découvrez mes services sur la page développement web.