Qu’est-ce que le chargement différé (lazy loading) ?

Le chargement différé (lazy loading) reporte le chargement d’une partie d’une page, comme une image ou une iframe intégrée, jusqu’à ce qu’elle défile réellement à proximité de la zone visible. Pour une intégration YouTube, cela signifie que le script du lecteur et l’aperçu de la miniature ne se chargent pas dès l’ouverture de la page, mais seulement lorsqu’un visiteur est sur le point de les voir.

Pourquoi c’est important pour les intégrations

Une iframe YouTube est relativement lourde à charger. Une page avec plusieurs intégrations (un article de blog passant en revue cinq vidéos, par exemple) peut sembler nettement plus lente si toutes se chargent immédiatement, ce qui explique pourquoi le chargement différé est une recommandation courante pour les Core Web Vitals et la vitesse générale des pages.

Comment l’activer

Les navigateurs modernes prennent en charge l’attribut natif loading=”lazy” directement sur une <iframe>, sans script supplémentaire. Le générateur de code d’intégration inclut cet attribut par défaut.

Comment fonctionne le chargement différé natif en coulisses

Lorsqu’un navigateur rencontre un élément avec loading=”lazy”, il ne crée pas d’espace réservé pour attendre indéfiniment ; il calcule plutôt un seuil de distance approximatif depuis la zone visible actuelle et ne démarre la requête réseau réelle que lorsque l’élément approche ce seuil, typiquement quelques centaines à un millier de pixels avant de devenir visible, selon le navigateur et les conditions réseau. Cela signifie qu’une intégration en chargement différé se charge tout de même à temps pour être visible quand un visiteur y arrive en défilant, sans payer le coût de chargement pour des intégrations bien plus bas dans la page, jusqu’où un visiteur ne défilera peut-être jamais.

Un exemple concret

Un long article passant en revue dix produits, chacun avec une vidéo de démonstration intégrée, bénéficie énormément du chargement différé : sans lui, les dix lecteurs demanderaient leurs scripts et miniatures simultanément au chargement de la page ; avec loading="lazy" ajouté à chaque iframe, seules une ou deux vidéos proches du haut se chargent immédiatement, le reste se chargeant progressivement à mesure que le visiteur défile vers le bas.

Chargement différé contre clic pour charger

Le chargement différé et le clic pour charger résolvent un problème similaire avec des compromis différents. Le chargement différé finit tout de même par charger automatiquement chaque intégration une fois qu’un visiteur défile à proximité, ce qui est simple à mettre en œuvre (un seul attribut HTML) mais n’économise aucune ressource pour les intégrations qu’un visiteur fait effectivement défiler et voit. Le clic pour charger va plus loin, ne chargeant jamais la vraie iframe tant qu’un visiteur n’a pas explicitement cliqué sur un espace réservé, ce qui demande plus de travail de mise en œuvre mais garantit zéro requête pour les vidéos jamais réellement lues. Pour la plupart des sites, le chargement différé natif, déjà utilisé par défaut dans notre générateur de code d’intégration, offre le meilleur équilibre entre simplicité et bénéfice de performance.

En règle générale, appliquez le chargement différé à chaque intégration sauf celle garantie déjà visible dès l’instant du chargement de la page, comme une vidéo principale tout en haut.

La prise en charge navigateur du chargement différé natif est désormais assez large sur Chrome, Firefox, Safari et Edge modernes pour qu’une bibliothèque de chargement différé en JavaScript soit rarement nécessaire spécifiquement pour les iframes, bien que d’anciennes approches basées sur des bibliothèques restent utilisées sur de nombreux sites existants construits avant l’arrivée de la prise en charge native.

Questions fréquentes