Core Web Vitals et mobile : l'expérience utilisateur comme facteur de classement

Pourquoi Google mesure l'expérience

Depuis 2021, Google intègre explicitement l'expérience sur la page dans son algorithme via les Core Web Vitals (CWV). L'idée : un résultat pertinent mais lent, instable ou peu réactif frustre l'utilisateur — autant afficher le suivant.

À requête équivalente, Google préfère la page rapide à la page lente. Simple, implacable.

Les trois Core Web Vitals actuels

graph LR
    A[Core Web Vitals] --> B[LCP]
    A --> C[INP]
    A --> D[CLS]
    B --> B1[Largest Contentful Paint<br/>Vitesse perçue]
    C --> C1[Interaction to Next Paint<br/>Réactivité]
    D --> D1[Cumulative Layout Shift<br/>Stabilité visuelle]

LCP — Largest Contentful Paint

Temps avant que l'élément principal visible (image, bloc texte, hero) soit rendu.

Leviers d'amélioration :

• Compresser les images (WebP, AVIF)
• Lazy-loading des images hors écran
• CDN (Cloudflare, Bunny)
• Réduire le TTFB (Time To First Byte) serveur
• Précharger les ressources critiques (<link rel="preload">)

INP — Interaction to Next Paint

Depuis mars 2024, INP a remplacé FID (First Input Delay). Il mesure la réactivité aux interactions (clic, tap, touche).

Leviers d'amélioration :

• Réduire le JavaScript bloquant
• Découper les tâches longues (requestIdleCallback, Promise)
• Utiliser des web workers pour les calculs lourds
• Minimiser les handlers lourds au clic
• Framework moderne (hydration progressive, islands)

CLS — Cumulative Layout Shift

Mesure l'instabilité visuelle : éléments qui sautent pendant le chargement (publicité qui pousse le contenu, image qui apparaît et décale le texte).

Leviers d'amélioration :

• Spécifier width et height sur toutes les images et vidéos
• Réserver l'espace pour les pubs et les iframes
• Précharger les polices web critiques (font-display: optional/swap)
• Éviter d'insérer du contenu au-dessus d'un contenu déjà rendu

Le rapport Core Web Vitals dans GSC

GSC propose un rapport dédié dans Expérience → Core Web Vitals.

Comment GSC mesure

GSC n'utilise pas un test synthétique mais les données terrain du rapport Chrome UX (CrUX) : les métriques réelles collectées anonymement auprès des utilisateurs Chrome qui visitent votre site.

Conséquence : une page doit avoir un minimum de trafic pour apparaître dans le rapport. Les pages peu visitées n'auront pas de données CWV dans GSC.

Les trois catégories

Regroupement par URL similaires

GSC regroupe les URLs qui partagent le même template et les mêmes performances. Exemple : « 1 245 URLs similaires à /produits/{slug} ».

Avantage : corriger le template = corriger toutes les URLs d'un coup.

Valider une correction

Après avoir corrigé un problème, cliquez sur « Valider la correction ». GSC relance l'évaluation sur 28 jours. Si la majorité des visites passent en « Bon » : statut corrigé.

Outils complémentaires à GSC

GSC donne la vue d'ensemble, mais pour diagnostiquer précisément il faut d'autres outils.

Méthode type :

1. GSC identifie les URLs en rouge ou jaune
2. PageSpeed Insights pour comprendre le diagnostic
3. DevTools Performance pour tracer précisément
4. Correction + déploiement
5. Re-validation dans GSC après 28 jours

Le rapport Ergonomie mobile

Jusqu'en décembre 2023, GSC proposait un rapport « Ergonomie mobile » dédié. Il a été retiré car l'écosystème web est désormais mobile-first par défaut.

Cela ne signifie pas que le mobile n'est plus un facteur : Google applique depuis 2021 le Mobile-first indexing universel. C'est la version mobile de votre site que Google crawle et utilise pour classer.

Vérifications essentielles

Le piège classique du responsive

Certains sites cachent du contenu sur mobile (menus, sections) avec display: none. Danger : Google lit le DOM et ignore souvent ce qui est caché par défaut. Si votre contenu critique est conditionné au clic, vous perdez la valeur SEO.

Bonne pratique : tout le contenu important doit être présent et visible dans le DOM mobile, quitte à utiliser des accordéons qui basculent via JS après un clic.

L'HTTPS et la sécurité

GSC signale aussi les problèmes HTTPS dans Expérience → HTTPS :

Action : surveiller les alertes, s'assurer du renouvellement automatique des certificats (Let's Encrypt, Cloudflare).

Workflow concret pour améliorer les CWV

graph TD
    A[Rapport CWV dans GSC] --> B{Mobile en rouge ?}
    B -->|Oui, priorité| C[PageSpeed Insights]
    B -->|Non| D{Desktop en rouge ?}
    D -->|Oui| C
    D -->|Non| E[Optimiser ailleurs]
    C --> F[Identifier le problème principal]
    F --> G[Corriger sur le template]
    G --> H[Déployer]
    H --> I[Valider dans GSC]
    I --> J{28 jours plus tard}
    J -->|Validé| K[Passer à la cohorte suivante]
    J -->|Non validé| C

Les 5 chantiers qui règlent 80 % des problèmes CWV

1. Optimiser les images (WebP, dimensions, lazy loading)
2. Réduire le JavaScript non critique (code splitting, defer, import dynamique)
3. Mettre en place un CDN (Cloudflare gratuit suffit souvent)
4. Précharger les polices web (<link rel="preload"> + font-display: swap)
5. Définir dimensions des éléments visuels pour éviter les CLS

Résumé

Les Core Web Vitals sont un facteur de classement officiel : LCP (vitesse), INP (réactivité, remplaçant de FID depuis 2024), CLS (stabilité). GSC vous montre les données réelles des visiteurs Chrome regroupées par URL similaires, avec un processus de validation après correction. Complétez avec PageSpeed Insights et DevTools pour diagnostiquer en profondeur. Souvenez-vous : Google indexe la version mobile de votre site. Dans le prochain chapitre, nous explorons les rapports avancés : liens, données structurées et sécurité.