LCP (Largest Contentful Paint)
L’usage du fetchpriority="high" et d’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.
CLS (Cumulative Layout Shift)
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.
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.
