← SlowSite

05 — Glossaire : Core Web Vitals et indicateurs de performance

Définitions, causes de ralentissement et solutions pour les indicateurs que vous allez relever tout au long du TP. À garder ouvert pendant l'audit : c'est ici que vous vérifierez ce que signifie exactement un chiffre avant de le commenter dans votre rapport.

Les seuils indiqués sont ceux publiés par Google.

1. CLS (Cumulative Layout Shift)

Le CLS (Décalage Cumulatif de la Mise en Page) mesure la stabilité visuelle d'une page web. Il calcule la fréquence à laquelle les éléments d'une page bougent de façon inattendue pendant son chargement ou sa lecture. C'est ce qui se produit quand le texte saute juste avant de cliquer parce qu'une image sans dimension définie vient de s'afficher.

Causes principales

La solution la plus simple (Code)

<!-- Mauvaise pratique : le navigateur ne connaît pas la taille, la page va sauter -->
<img src="mon-image.jpg" alt="Paysage">

<!-- Bonne pratique : l'espace de 800x600 est réservé immédiatement -->
<img src="mon-image.jpg" width="800" height="600" alt="Paysage">

Évaluation et seuils de Google

2. LCP (Largest Contentful Paint)

Le LCP mesure la vitesse d'affichage du contenu principal. Il calcule le temps exact qu'il faut pour que l'élément le plus volumineux visible à l'écran (image, vidéo, gros bloc de texte) soit entièrement chargé et visible par l'utilisateur.

Causes principales

La solution la plus simple (Code)

<head>
  <!-- On ordonne au navigateur de télécharger cette image avant le reste -->
  <link rel="preload" href="grande-banniere.webp" as="image">
</head>
<body>
  <img src="grande-banniere.webp" alt="Bannière principale">
</body>

⚠️ Le preload n'est pas une recette universelle. Il ne rend rien plus rapide : il change des priorités. Précharger une image qui n'est pas nécessaire au premier affichage lui fait voler de la bande passante à celle qui détermine justement le LCP — et dégrade donc le LCP au lieu de l'améliorer. On ne précharge que ce qui est à la fois critique et découvert tardivement par le navigateur. Voir le point B4 du guide de résolution.

Évaluation et seuils de Google

3. INP (Interaction to Next Paint)

ℹ️ L'INP n'apparaîtra pas dans vos relevés. C'est une métrique de terrain, mesurée sur de vrais visiteurs : elle ne figure que dans la section « données de terrain » de PageSpeed Insights, absente ici faute de trafic réel. Sur ce site, c'est le TBT qui joue son rôle en laboratoire. La notion reste à connaître : c'est elle qui compte pour un site en production.

L'INP mesure la réactivité globale de votre page. Il calcule le temps qui s'écoule entre le moment où vous interagissez avec la page (cliquer, taper) et le moment où le navigateur affiche visuellement le résultat. L'INP a remplacé le FID (First Input Delay) en 2024.

Causes principales

La solution la plus simple (Code)

// Bonne pratique : Découper le travail pour laisser le navigateur respirer
function fairePleinDeChosesAmeliore() {
  calculerDesDonneesLourdes(); 
  
  // Utilisation de setTimeout pour différer la suite
  setTimeout(function() {
    mettreAjourLinterface();
  }, 0); 
}

Évaluation et seuils de Google

4. FCP (First Contentful Paint)

Le FCP mesure le temps qui s'écoule entre le moment où l'utilisateur clique sur le lien et le moment où le tout premier élément visuel apparaît à l'écran (texte, image, ou même un fond de couleur). C'est la première impression de rapidité du site.

Causes principales

La solution la plus simple (Code)

<head>
  <!-- CSS critique inline -->
  <style>
    body { font-family: sans-serif; background: #f4f4f4; }
    h1 { color: #333; margin-top: 20px; }
  </style>

  <!-- Le CSS moins urgent chargé de façon asynchrone -->
  <link rel="preload" href="reste-du-site.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

Évaluation et seuils de Google

5. TBT (Total Blocking Time)

Le TBT mesure la quantité de temps pendant laquelle votre page web est incapable de répondre aux interactions de l'utilisateur pendant son chargement. Il additionne le temps excédentaire (au-delà de 50 ms) de toutes les tâches longues (Long Tasks) sur le fil principal.

Causes principales

La solution (Principe général)

  1. Retarder le code non essentiel (Defer) : Ne chargez pas immédiatement les scripts non critiques.
  2. Découper le code (Code Splitting) : Envoyez le code en plusieurs petits morceaux.
  3. Déplacer les calculs complexes : Utilisez des Web Workers pour ne pas bloquer l'affichage.

Évaluation et seuils de Google

6. Speed Index

Le Speed Index est un score mathématique qui mesure la vitesse à laquelle le contenu d'une page devient visuellement disponible pendant son chargement. Un site qui s'affiche progressivement aura un meilleur score qu'un site qui affiche tout brutalement à la fin.

Causes principales

La solution la plus simple (Code)

/* Bonne pratique dans le CSS avec font-display: swap */
@font-face {
  font-family: 'MaSuperPolice';
  src: url('ma-super-police.woff2') format('woff2');
  font-display: swap; 
}

body {
  font-family: 'MaSuperPolice', sans-serif;
}

Évaluation et seuils de Google