Définitions
- LCP - Largest Contentful Paint : temps nécessaire pour afficher l’élément le plus grand de la zone visible (souvent une image ou un gros bloc de texte). Anciennement FMP (First Meaningful Paint). Objectif : moins de 2.5s.
- FCP - First Contentful Paint : moment où le tout premier pixel de contenu (texte, image, logo) est dessiné sur l’écran.
- INP - Interaction to Next Paint : surveille toutes les interactions d’une session et retient la plus lente. Anciennement FID (First Input Delay). Objectif : moins de 200 ms.
- CLS - Cumulative Layout Shift : somme de tous les déplacements inattendus d’éléments sur la page pendant le chargement. Objectif : moins de 0.1.
- FOUC / FOUT - Flash Of Unstyled Content / Text : moment où le navigateur affiche le contenu HTML brut (avec le style par défaut, souvent moche) avant que le fichier CSS ne soit chargé et appliqué.
- srcset - Images adaptatives : attribut HTML permettant au navigateur de choisir automatiquement la version d’image la plus appropriée selon la taille d’écran et la densité de pixels, optimisant performances et qualité d’affichage.
Matrice d’optimisations
| page | LCP | FCP | INP | CLS | FOUC / FOUT | srcset |
|---|---|---|---|---|---|---|
| partial figure.html | ✅ fetchpriority=“high” + eager ❌ Pas de preload link | ✅ placeholder color extraite de l’image | ⚠️ RAS | ✅ width/height définis ✅ placeholder color en background ✅ aspect-ratio via object-fit-cover | ✅ fadeIn CSS smooth ✅ bg-color immédiat (couleur dominante extraite automatiquement) | ✅ breakpoints Bootstrap ✅ WebP 70/75 ✅ sizes adaptatif |
Ressources utilisées
- Google PageSpeed : https://pagespeed.web.dev/
