Qu'est-ce que le chargement différé ?

Le chargement différé reporte le chargement des ressources qui ne sont pas nécessaires à la vue initiale jusqu'au moment où elles deviennent pertinentes. Dans les boutiques de commerce, il s'applique aux images, aux iframes, aux widgets tiers et aux composants JavaScript sous la ligne de flottaison. Bien réalisé, il réduit nettement les octets sur le chemin critique et profite directement au LCP et à l'INP.

Définition

Pour les images et les iframes, l'attribut loading="lazy" est pris en charge nativement par tous les navigateurs modernes et indique au moteur de différer les fetches jusqu'à ce que la ressource approche du viewport. Pour les composants, des frameworks comme Next.js, Nuxt et Remix offrent des imports dynamiques avec des limites de chargement explicites, souvent associées à l'API Intersection Observer pour déclencher l'hydratation seulement au besoin. Le chargement différé est conceptuellement distinct du code-splitting : le découpage crée les chunks, le chargement différé décide quand les demander. Les deux fonctionnent ensemble pour contrôler la quantité de first-party-JS qui atteint le navigateur à un instant donné.

Pourquoi c'est important

Le chargement avide non borné est la cause la plus courante d'un mauvais LCP sur les PLP et les landing-pages pilotées par CMS. Un carrousel hero qui récupère vingt images produit en amont, un widget d'avis tiers qui expédie 300 Ko de JS, ou une bulle de chat qui démarre immédiatement se disputent tous la bande passante et le temps du thread principal. Le chargement différé récupère ce budget pour les ressources qui comptent vraiment au premier paint. Il réduit aussi la charge serveur, abaisse l'egress du content-delivery-network-cdn et améliore la régularité des Core Web Vitals sur les réseaux lents. Le piège est l'exactitude : différer l'image LCP elle-même empire la métrique, l'asset le plus haut doit donc rester avide.

Cas d'usage

Sur les PLP, seule la première rangée d'images produit est chargée avidement tandis que le reste arrive en flux via le chargement différé natif. Les avis, produits associés, carrousels de recommendation-engine et embeds de social-commerce sont différés jusqu'à ce qu'ils défilent dans la vue. Les widgets de chat, les snippets d'ab-testing et les scripts de personnalisation peuvent être initialisés après inactivité. Dans Astro, l'islands-architecture traite l'interactivité elle-même comme quelque chose à charger en différé via des directives client:visible. Combiné aux pipelines d'image-optimization et aux shells rendus à l'edge, le chargement différé est l'une des optimisations les moins chères et au plus fort ROI qu'une équipe headless puisse livrer.

Voir aussi

Découvrez Composable Headless Frontend · Performance and Core Web Vitals.