Surveillance des Core Web Vitals

Surveillez les Core Web Vitals de Google pour améliorer l'expérience utilisateur et le classement de vos pages dans les moteurs de recherche.

Que sont les Core Web Vitals?

Les Core Web Vitals sont les métriques de Google pour mesurer l'expérience utilisateur:

Métrique	Nom complet	Mesure	Bon	Amélioration nécessaire	Mauvais
LCP	Largest Contentful Paint	Chargement	≤2,5s	2,5-4s	>4s
INP	Interaction to Next Paint	Interactivité	≤200ms	200-500ms	>500ms
CLS	Cumulative Layout Shift	Stabilité visuelle	≤0,1	0,1-0,25	>0,25

Pourquoi ils sont importants

• Impact SEO: Google utilise les CWV comme signaux de classement
• Expérience utilisateur: Corrélation avec l'engagement et la conversion
• Budget de performance: Définissez des objectifs mesurables

Activer la surveillance des CWV

La collecte des Core Web Vitals est activée par défaut sur toutes les offres, y compris Free. Tant que votre script de suivi est chargé, le tracker mesure LCP, CLS, INP, FCP et TTFB pour chaque session visiteur réelle et envoie un seul beacon lorsque le visiteur quitte la page.

Votre balise de script standard suffit:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

Aucun attribut supplémentaire, aucune modification du script. Pour confirmer que le tracker se déclenche, ouvrez l'onglet Install Health dans les paramètres de votre site web.

Désactiver pour un site spécifique (avancé)

Si vous devez exclure un site suivi de la collecte CWV, définissez le feature flag enable_core_web_vitals à false dans les paramètres de ce site. Il n'y a pas de bascule dans l'interface car la valeur par défaut est activée pour tous — contactez le support à [email protected] si vous souhaitez changer cela pour l'un de vos sites.

Aperçu du tableau de bord

Résumé des CWV

Ouvrez le tableau de bord de votre site et sélectionnez l'onglet Performance (sous le groupe COMPORTEMENT dans la barre latérale):

Aperçu des Core Web Vitals

LCP    ████████████████░░░░ 2.1s  ✓ Bon
INP    ██████████████████░░ 156ms ✓ Bon
CLS    ████████████████████ 0.05  ✓ Bon

Scores P75

La barre d'outils vous permet de changer le percentile (P75, P90, P95, P99), de filtrer par appareil (Tous, Bureau, Mobile) et de modifier la plage de temps (24 heures, 7 jours, 30 jours ou 90 jours).

Distribution des scores

Chaque tuile de métrique montre comment vos visites se répartissent entre les seuils Bon/Amélioration nécessaire/Mauvais pour le percentile sélectionné:

Évaluation	LCP	INP	CLS
Bon	65%	72%	85%
Amélioration nécessaire	25%	20%	10%
Mauvais	10%	8%	5%

Largest Contentful Paint (LCP)

Ce qu'il mesure

Temps jusqu'à ce que le plus grand élément de contenu soit visible:

• Images
• Vignettes vidéo
• Images de fond
• Blocs de texte

LCP dans le tableau de bord

• Tendance dans le temps: LCP au percentile sélectionné sur la plage choisie
• Par page: Routes les plus lentes
• Par appareil: Bureau vs Mobile
• Par géographie: Une carte choroplèthe du LCP par pays/région
• Éléments problématiques: Les éléments spécifiques mesurés comme le LCP

Problèmes LCP courants

Problème	Impact	Solution
Réponse serveur lente	Élevé	Optimiser TTFB, utiliser CDN
Ressources bloquant le rendu	Élevé	Différer CSS/JS non critiques
Grandes images	Élevé	Optimiser, utiliser WebP, chargement différé
Rendu côté client	Moyen	SSR, pré-rendu
Scripts tiers	Moyen	Chargement asynchrone, supprimer les inutiles

Améliorer le LCP

Optimisation des images:

<!-- Précharger l'image LCP -->
<link rel="preload" as="image" href="hero.webp">

<!-- Images responsives -->
<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="100vw"
  loading="eager"
  fetchpriority="high"
/>

Indices de ressource:

<!-- Préconnexion aux origines critiques -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">

Interaction to Next Paint (INP)

Ce qu'il mesure

Réactivité aux interactions utilisateur:

• Clics
• Appels
• Appuis sur touches

INP mesure le temps entre l'interaction et la prochaine mise à jour visuelle.

INP dans le tableau de bord

• Score INP: Au percentile sélectionné (par défaut P75)
• Par page: Routes les plus lentes pour l'interactivité
• Par appareil: Bureau vs Mobile

Problèmes INP courants

Problème	Impact	Solution
Tâches JavaScript longues	Élevé	Diviser les tâches, utiliser web workers
Grand DOM	Moyen	Virtualiser les listes, simplifier la structure
Gestionnaires d'événements lourds	Élevé	Debounce, optimiser les gestionnaires
Thrashing de mise en page	Moyen	Regrouper les lectures/écritures DOM
Scripts tiers	Moyen	Chargement différé, isoler

Améliorer l'INP

Diviser les tâches longues:

// Avant: Tâche synchrone longue
function processLargeArray(items) {
  items.forEach(item => expensiveOperation(item));
}

// Après: Céder au thread principal
async function processLargeArray(items) {
  for (const item of items) {
    expensiveOperation(item);
    // Céder pour permettre le rendu
    await new Promise(r => setTimeout(r, 0));
  }
}

Utiliser requestIdleCallback:

function runWhenIdle(callback) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(callback, { timeout: 2000 });
  } else {
    setTimeout(callback, 100);
  }
}

Cumulative Layout Shift (CLS)

Ce qu'il mesure

Stabilité visuelle - combien le contenu se déplace de manière inattendue:

• Images se chargeant sans dimensions
• Publicités/intégrations se redimensionnant
• Insertion de contenu dynamique
• Chargement de polices web

CLS dans le tableau de bord

• Score CLS: Au percentile sélectionné (par défaut P75)
• Par page: Pages avec le plus de décalages
• Par appareil: Bureau vs Mobile

Problèmes CLS courants

Problème	Impact	Solution
Images sans dimensions	Élevé	Toujours définir largeur/hauteur
Publicités sans espace réservé	Élevé	Utiliser des conteneurs d'espace réservé
Contenu dynamique au-dessus de la ligne de flottaison	Moyen	Réserver l'espace, utiliser les transformations
Chargement de polices web	Moyen	Utiliser font-display: swap
Intégrations se chargeant tardivement	Moyen	Réserver l'espace, chargement différé

Améliorer le CLS

Réserver de l'espace pour les images:

<!-- Toujours inclure les dimensions -->
<img src="photo.jpg" width="800" height="600" alt="Photo">

<!-- Ou utiliser le rapport d'aspect -->
<style>
.image-container {
  aspect-ratio: 16 / 9;
}
</style>

Réserver de l'espace pour les publicités:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Stratégie de chargement des polices:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Analyse au niveau des pages

Analyse par page

L'onglet Performance inclut une décomposition par route pour voir quelles pages font baisser une métrique:

1. Ouvrez l'onglet Performance
2. Faites défiler vers la décomposition par page
3. Triez pour trouver les plus mauvais résultats
4. Utilisez le panneau des éléments problématiques pour voir ce qui est mesuré comme le LCP

Fiche de performance de la page

/products/widget

LCP:  2.8s   ⚠ Amélioration nécessaire
INP:  145ms  ✓ Bon
CLS:  0.18   ⚠ Amélioration nécessaire

Éléments problématiques:
• Élément LCP:   img.hero-banner
• Source CLS:    .reviews-widget
• Cible INP:     button.add-to-cart

Échantillons: 12 450

Le panneau des éléments problématiques affiche l'élément de page spécifique mesuré comme le LCP, la plus grande source de décalage de mise en page et l'élément avec lequel un utilisateur a interagi pour le plus lent INP. Ces sélecteurs CSS vous indiquent directement ce qu'il faut corriger.

Segmentation

Par type d'appareil

Filtrez tout l'onglet Performance par appareil (Tous, Bureau ou Mobile):

Appareil     LCP      INP     CLS
Bureau       2.0s     120ms   0.05
Mobile       3.2s     210ms   0.12

Par géographie

La carte choroplèthe montre les scores CWV par pays/région pour aider à identifier les problèmes de CDN ou de localisation du serveur:

Région            LCP      INP     CLS
Amérique du Nord  2.1s     140ms   0.05
Europe            2.4s     150ms   0.06
Asie              3.6s     180ms   0.08

Alertes et rapports

Les alertes automatisées de Zenovay couvrent la détection d'anomalies et les pics de trafic plutôt que les seuils Web Vitals par métrique. Pour être averti lorsque les performances globales changent et pour planifier des résumés récurrents, consultez le guide dédié Alertes de performance.

Intégration avec d'autres outils

Google Search Console

Comparez les données Zenovay avec GSC:

• Zenovay: Données utilisateur réelles (RUM)
• GSC: Données de laboratoire + données de terrain

Lighthouse

Corrélez les audits Lighthouse avec les données du monde réel.

PageSpeed Insights

Utilisez Zenovay pour la surveillance et PageSpeed pour les recommandations.

Comparaison historique

Analyse des tendances

• Comparez les plages 24h, 7j, 30j et 90j
• Voyez l'amélioration au fil du temps
• Corrélez les tendances avec vos dates de déploiement
• Suivez vos objectifs

Meilleures pratiques

Stratégie de surveillance

1. Établir des valeurs de référence: Connaître les performances actuelles
2. Définir les objectifs: Basés sur l'industrie/concurrents
3. Surveiller en continu: Pas seulement des audits ponctuels
4. Analyse segmentée: Mobile est souvent plus lent
5. Prioriser les corrections: Impact vs effort

Budget de performance

Métrique   Actuel   Objectif   Budget
LCP        2.8s     2.0s       ✗ Dépassé
INP        150ms    150ms      ✓ Sur l'objectif
CLS        0.08     0.1        ✓ Sous l'objectif

Examens réguliers

• Hebdomadaire: Vérifier les régressions
• Mensuel: Analyse approfondie
• Trimestriel: Planification stratégique

Dépannage

Les données n'apparaissent pas

Vérifiez:

• Script installé correctement (utilisez l'onglet Install Health dans les paramètres de votre site pour confirmer que le tracker se déclenche)
• La collecte de Core Web Vitals n'a pas été désactivée pour le site (elle est activée par défaut — voir « Désactiver pour un site spécifique » ci-dessus)
• Trafic suffisant (vrais utilisateurs nécessaires)

Valeurs inattendues

Considérez:

• Le trafic de bot biaise les données
• Le trafic de développement/staging
• Les différences de prise en charge des navigateurs

Discordance avec les données de laboratoire

Normal – RUM capture:

• Conditions réseau réelles
• Performances réelles des appareils
• Comportement réel de l'utilisateur
• Distribution géographique

Prochaines étapes

• Performance de chargement des pages
• Performance par appareil
• Alertes de performance