Core Web Vitals & Page Speed pour SEO

Introduction

Core Web Vitals sont trois métriques de performance créées par Google pour mesurer l'expérience utilisateur. Depuis 2021, ce sont des facteurs de ranking directs. Une page rapide = meilleur SEO.

Les trois métriques sont : LCP, FID, et CLS. Chacune mesure un aspect différent de l'expérience.

Impact sur le ranking Google

Google a annoncé en 2021 que Page Experience (incluant Core Web Vitals) est un facteur de ranking direct. Voici l'impact :

LCP (Largest Contentful Paint)

LCP mesure le temps pour que le plus gros élément visible apparaisse. C'est la perception de "rapidité" par l'utilisateur.

Cible : < 2.5 secondes pour un bon SEO

Qu'est-ce qui compte comme "contenu"?

• Images
• Vidéos (poster)
• Texte (paragraphes, titres)
• Éléments SVG

Causes courantes de LCP lent :

• ❌ Serveur lent ou serveur distant
• ❌ JavaScript bloquant le rendu
• ❌ Images non optimisées
• ❌ CSS bloquant
• ❌ Polices de caractères lentes

Solutions pour améliorer LCP :

/* 1. Optimiser les images */
<img src="image.webp" alt="" loading="lazy">

/* 2. Précharger les ressources critiques */
<link rel="preload" as="image" href="hero.webp">
<link rel="preload" as="font" href="font.woff2" type="font/woff2" crossorigin>

/* 3. Utiliser un CDN pour les ressources */
<link rel="preconnect" href="https://cdn.example.com">

/* 4. Minifier et deferrer le JavaScript */
<script defer src="app.js"></script>

/* 5. Utiliser les Web Fonts efficacement */
<link rel="preload" as="font" href="inter.woff2" crossorigin>

FID (First Input Delay)

FID mesure le délai entre le clic/tap de l'utilisateur et la réponse du navigateur. C'est l'interactivité perçue.

Cible : < 100 ms pour un bon SEO

Exemple : L'utilisateur clique sur un bouton. FID = temps avant que le navigateur commence à traiter le clic.

Causes courantes de FID lent :

• ❌ JavaScript lourd et bloquant
• ❌ Main thread occupée (parsing, compilation)
• ❌ Trop de scripts actifs

Solutions pour améliorer FID :

/* 1. Réduire la quantité de JavaScript */
// Avant
import _ from 'lodash'; // 70KB
const sorted = _.sortBy(array, 'name');

// Après
const sorted = array.sort((a, b) => a.name.localeCompare(b.name)); // native

/* 2. Code-splitting et lazy loading */
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

/* 3. Web Workers pour les calculs lourds */
const worker = new Worker('worker.js');
worker.postMessage({data: largeArray});
worker.onmessage = (e) => console.log('Résultat:', e.data);

/* 4. Defer les scripts non-critiques */
<script defer src="analytics.js"></script>

CLS (Cumulative Layout Shift)

CLS mesure l'instabilité visuelle. Les éléments qui bougent quand on les voit = mauvais CLS.

Cible : < 0.1 pour un bon SEO

Exemple courant : Vous lisez un article, une pub s'affiche et repousse tout le texte vers le bas. C'est un layout shift!

Causes courantes de CLS élevé :

• ❌ Images sans dimensions (width/height)
• ❌ Ads/embeds sans espace réservé
• ❌ Polices qui changent de taille au chargement
• ❌ Animations/transitions non optimisées

Solutions pour améliorer CLS :

/* 1. TOUJOURS spécifier les dimensions des images */
<img src="image.jpg" width="400" height="300" alt="">
/* OU avec aspect-ratio en CSS */
img { aspect-ratio: 4 / 3; }

/* 2. Réserver de l'espace pour les ads */
<div style="height: 250px; width: 300px;">
    <!-- Ad s'affichera ici -->
</div>

/* 3. Éviter les polices qui changent de taille */
/* Utiliser font-display: swap ou optional */
@font-face {
    font-family: 'Custom';
    src: url('font.woff2');
    font-display: swap; /* Affiche d'abord serif, puis change */
}

/* 4. Réserver de l'espace pour les vidéos/embeds */
<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
    <iframe style="position: absolute; top: 0; left: 0;" src="..."></iframe>
</div>

Mesurer les Core Web Vitals

Méthodes de mesure :

1. PageSpeed Insights (Google) — Gratuit et officiel

URL: https://pagespeed.web.dev/
✅ Données de laboratoire ET réelles
✅ Suggestions d'optimisation
✅ Suivi historique

2. Google Search Console — Pour suivi SEO

URL: https://search.google.com/search-console
✅ Données agrégées par page
✅ État des Core Web Vitals pour tout le site
✅ Alertes si les métriques se dégradent

3. Web Vitals JavaScript API

// Intégrer dans votre site
import {getCLS, getFID, getFCP, getLCP, getTTFB} from 'web-vitals';

getCLS(console.log); // CLS
getFID(console.log); // FID
getLCP(console.log); // LCP

// Envoyer à votre serveur
getLCP(metric => {
    fetch('/api/metrics', {
        method: 'POST',
        body: JSON.stringify(metric)
    });
});

4. Chrome DevTools (Lighthouse)

F12 → Lighthouse tab → Generate report
✅ Scores de performance, SEO, accessibilité
✅ Diagnostics détaillés
✅ Suggestions d'optimisation

Optimisations techniques complètes

Checklist d'optimisation pour les Core Web Vitals :

Exemple d'optimisation HTML complète :

<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Preload les ressources critiques -->
    <link rel="preload" as="image" href="hero.webp">
    <link rel="preload" as="font" href="inter.woff2" type="font/woff2" crossorigin>
    <link rel="preconnect" href="https://cdn.example.com">

    <!-- CSS critique inline -->
    <style>
        /* Styles critiques pour le rendu initial */
        body { font-family: system-ui; }
    </style>

    <!-- CSS non-critique deferred -->
    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
</head>
<body>
    <!-- Image avec dimensions -->
    <img src="hero.webp" alt="Hero" width="1200" height="600" loading="lazy">

    <!-- Ad avec espace réservé -->
    <div style="height: 250px; width: 300px;"></div>

    <!-- Scripts defer non-critiques -->
    <script defer src="analytics.js"></script>
    <script defer src="app.js"></script>
</body>
</html>

Outils et monitoring

Outils gratuits pour monitorer les Core Web Vitals :

• PageSpeed Insights — Analyse complète, gratuit
• Google Search Console — Suivi SEO intégré
• WebPageTest — Tests détaillés et waterfall
• GTmetrix — Rapports de performance complets
• Lighthouse CI — Automatiser les tests de performance en CI/CD
• Databox — Monitoring en temps réel

Setup de monitoring automatisé (Lighthouse CI) :

// .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [push]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: treosh/lighthouse-ci-action@v10
        with:
          uploadArtifacts: true
          temporaryPublicStorage: true

Conclusion

Les Core Web Vitals sont critiques pour le SEO moderne. Google les utilise directement pour le ranking. Ignorer ces métriques coûte de la visibilité.