LCP (Largest Contentful Paint)
Définition : C’est le temps nécessaire pour afficher l’élément le plus grand de la zone visible (souvent une image ou un gros bloc de texte). C’est la mesure principale de la performance perçue. Anciennement FMP (First Meaningful Paint). Objectif : moins de 2,5 s.
Exemple : l’usage du fetchpriority="high" sur l’image d’illustration d’un post avec un placeholder de couleur dominante via Hugo minimise le temps perçu. En déclenchant l’opacité uniquement au onload, on évite l’affichage fragmenté d’une image lourde. Le navigateur priorise le rendu du conteneur, garantissant un score LCP optimal même sur des connexions mobiles instables.
FCP (First Contentful Paint)
Définition : C’est le moment où le tout premier pixel de contenu (texte, image, logo) est dessiné sur l’écran. C’est le signal “ça charge” pour l’utilisateur.
INP (Interaction to Next Paint)
Définition : L’INP a remplacé le FID (First Input Delay) car il est plus exigeant. Alors que le FID ne mesurait que la toute première interaction, l’INP surveille toutes les interactions d’une session et retient la plus lente. C’est souvent le plus gros défi actuel pour les sites utilisant beaucoup de JavaScript. Objectif : moins de 200 ms.
CLS (Cumulative Layout Shift)
Définition : Mesure la stabilité visuelle. Il calcule la somme de tous les déplacements inattendus d’éléments sur la page pendant le chargement (le problème que nous avons réglé avec le bouton et les polices). Objectif : moins de 0.1.
Exemple : en figeant la hauteur du conteneur (160px/300px) avant le chargement de l’image, on réserve l’espace dans le DOM. Cela neutralise tout saut de page lors de l’injection des ressources. L’encapsulation du zoom dans une div parente préserve la stabilité structurelle du figcaption, assurant un score CLS proche de zéro.
FOUC, FOUT (Flash Of Unstyled Content / Text)
Définition : C’est le 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é.
Exemple : usage du preload et swap.
Images adaptatives (srcset)
L’implémentation du srcset exploite le moteur de Hugo pour générer des variantes WebP alignées sur les breakpoints Bootstrap. Une logique conditionnelle ajuste physiquement la hauteur (160px mobile vs 300px desktop) pour synchroniser le ratio du fichier avec le rendu CSS. Ce mécanisme de resolution switching permet au navigateur de télécharger uniquement les pixels nécessaires, réduisant le payload mobile d’environ 45% et garantissant un score LCP optimal sur tous les terminaux.
Ressources utilisées
- Google PageSpeed : https://pagespeed.web.dev/
