Comment empêcher un JPEG UHD (2mo) avec un chargement progressif (blur-up) d'affecter le LCP...

Contrainte: l'image doit être ultra haute qualité - l'exercice est de gérer des images lourdes (4k minimum et haute fidélité des couleurs).

Contexte: Je développe une application Angular (v19.2, 2025) desktop, et j'utilise un serveur ExpressJS pour fournir mes images via différentes URL en fonction de la résolution. Mes tests ont été effectué sur un app déployée angular 19 + firebase avec compression brotli.

Pour améliorer la perception utilisateur, j'implémente un chargement progressif (blur-up) d'image de la manière suivante :

J'affiche dès le départ une image placeholder low quality (floutée, environ 30 Ko) qui occupe environ 80 % du viewport (J'utilise cette image en priority high avec NgOptimizedImage).

Une fois le placeholder affiché, je déclenche le chargement d'une image haute résolution (2 Mo) qui remplace ensuite le placeholder via une variable de contrôle (avec un @if()).

J’ai testé différentes approches pour retarder le chargement de l’image HD afin que le LCP soit calculé sur le placeholder, notamment :

Une attente "propre" en attendant que le placeholder est finit de charger.

Une attente "sale" pour les tests: l'utilisation de setTimeout et requestIdleCallback pour retarder l'injection de l’image haute résolution après chargement du placeholder.

Une approche avec fetch() et URL.createObjectURL(blob) pour controler le téléchargement de l'image hires.

Un scaling progressif, en commençant par une image de 1px × 1px puis en l’agrandissant jusqu’à la résolution finale.

Un transition de visibilité et d'opcacité (pour passer sous le radard LCP de LightHouse).

Problème : Même avec ces techniques et en retardant l'affichage de l'image HD (même jusqu’à 2 secondes de délai), le LCP (Largest Contentful Paint) est finalement calculé sur l'image haute résolution, car c’est elle qui occupe la majeure partie du viewport lorsqu'elle apparaît.

Question : Existe-t-il une méthode pour que le placeholder low quality soit considéré comme le contenu principal pour le calcul du LCP et ainsi empêcher l'image haute résolution d'affecter la métrique ? Ou est-ce que ce comportement est inévitable du fait de la définition même du LCP (qui mesure l’élément visuel le plus important affiché) ?

Je suis ouvert aux suggestions ou aux approches alternatives pour optimiser l’expérience utilisateur tout en améliorant la métrique LCP, même avec la contrainte d’avoir impérativement une image HD de 2 Mo.

Continue reading...