Chargement paresseux d'images natif avec seulement du HTML
Les développeurs web cherchent constamment des moyens d’optimiser les performances des pages, et les images représentent souvent le plus grand défi. Bien que les bibliothèques JavaScript aient dominé les solutions de chargement paresseux pendant des années, les navigateurs modernes prennent désormais en charge le chargement paresseux d’images natif grâce à un simple attribut HTML. Cette fonctionnalité intégrée élimine le besoin de dépendances externes tout en offrant des améliorations de performance fiables sur tous les navigateurs principaux.
Cet article explique comment implémenter le chargement paresseux d’images natif en utilisant uniquement du HTML, couvrant la prise en charge des navigateurs, les bonnes pratiques et les pièges courants qui peuvent impacter les performances de votre site.
Points clés à retenir
- Le chargement paresseux natif ne nécessite que l’attribut HTML
loading="lazy" - Spécifiez toujours les attributs width et height pour éviter les décalages de mise en page
- Ne jamais appliquer le chargement paresseux aux images au-dessus de la ligne de flottaison ou aux images LCP
- La prise en charge des navigateurs couvre plus de 95% des utilisateurs sur Chrome, Firefox, Safari et Edge
- Les images se chargent automatiquement lorsqu’elles atteignent les seuils de distance calculés
- Aucun JavaScript requis, mais des solutions de repli peuvent étendre la prise en charge des navigateurs
- Les améliorations de performance varient généralement de 20 à 50% de temps de chargement initial plus rapide
Qu’est-ce que le chargement paresseux d’images natif ?
Le chargement paresseux d’images natif exploite la capacité intégrée du navigateur à différer le chargement des images jusqu’à ce qu’elles soient nécessaires. Au lieu de charger toutes les images lors du premier rendu de la page, le navigateur calcule quand les images entreront dans la zone d’affichage et les charge juste avant qu’elles deviennent visibles.
Cette approche diffère des solutions basées sur JavaScript car elle :
- Ne nécessite aucun code ou bibliothèque supplémentaire
- Fonctionne même lorsque JavaScript est désactivé
- Utilise des algorithmes de navigateur optimisés pour les décisions de chargement
- Fournit un comportement cohérent sur différents appareils et vitesses de connexion
Le navigateur gère automatiquement tous les calculs complexes concernant la distance de la zone d’affichage, la vitesse de connexion et les seuils de chargement.
Prise en charge des navigateurs pour le chargement paresseux natif
La prise en charge actuelle des navigateurs pour l’attribut loading couvre tous les navigateurs principaux :
- Chrome : 77+ (septembre 2019)
- Firefox : 75+ (avril 2020)
- Safari : 15.4+ (mars 2022)
- Edge : 79+ (janvier 2020)
Cela représente plus de 95% de l’utilisation mondiale des navigateurs, faisant du chargement paresseux natif un choix fiable pour la plupart des sites web. Les navigateurs qui ne prennent pas en charge l’attribut l’ignorent simplement, chargeant les images normalement sans aucun impact négatif.
L’attribut Loading : implémentation de base
L’attribut loading accepte trois valeurs :
lazy
Diffère le chargement jusqu’à ce que l’image atteigne une distance calculée de la zone d’affichage :
<img src="product-image.jpg" loading="lazy" alt="Description du produit" width="400" height="300">eager
Force le chargement immédiat indépendamment de la position dans la zone d’affichage (c’est le comportement par défaut) :
<img src="hero-image.jpg" loading="eager" alt="Section hero" width="800" height="400">auto (déprécié)
Permettait précédemment au navigateur de décider, mais cette valeur a été dépréciée et ne devrait pas être utilisée.
Bonnes pratiques essentielles
Toujours inclure les dimensions
L’aspect le plus critique de l’implémentation du chargement paresseux d’images natif est de spécifier les dimensions des images. Sans les attributs width et height, les navigateurs ne peuvent pas réserver d’espace pour les images, entraînant des décalages de mise en page :
<!-- Implémentation correcte -->
<img src="gallery-1.jpg" loading="lazy" alt="Image de galerie" width="300" height="200">
<!-- Alternative avec styles en ligne -->
<img src="gallery-2.jpg" loading="lazy" alt="Image de galerie" style="width: 300px; height: 200px;">Lorsque les dimensions ne sont pas spécifiées, les images prennent par défaut 0×0 pixels. Cela peut amener les navigateurs à supposer que toutes les images s’adaptent à la zone d’affichage, déclenchant le chargement immédiat de tout.
Ne jamais appliquer le chargement paresseux aux images au-dessus de la ligne de flottaison
Les images critiques visibles lors du chargement initial de la page ne devraient jamais utiliser loading="lazy". Cela inclut :
- Les images hero
- Les images de logo
- Les premières images de produits
- Toute image dans la zone d’affichage initiale
<!-- Images au-dessus de la ligne de flottaison - chargement immédiat -->
<img src="hero-banner.jpg" alt="Bannière principale" width="1200" height="600">
<img src="featured-product.jpg" alt="Article en vedette" width="400" height="300">
<!-- Images en dessous de la ligne de flottaison - chargement paresseux -->
<img src="product-4.jpg" loading="lazy" alt="Produit 4" width="400" height="300">
<img src="product-5.jpg" loading="lazy" alt="Produit 5" width="400" height="300">Images responsives avec chargement paresseux
Pour les images responsives utilisant l’élément <picture>, ajoutez uniquement l’attribut loading à l’élément <img> de repli :
<picture>
<source media="(min-width: 800px)" srcset="large-image.jpg 1x, large-image-2x.jpg 2x">
<source media="(min-width: 400px)" srcset="medium-image.jpg 1x, medium-image-2x.jpg 2x">
<img src="small-image.jpg" loading="lazy" alt="Image responsive" width="400" height="300">
</picture>Comment fonctionnent les seuils de distance des navigateurs
Les navigateurs n’attendent pas que les images soient exactement dans la zone d’affichage pour commencer à les charger. Au lieu de cela, ils utilisent des seuils de distance basés sur la vitesse de connexion :
- Connexions 4G : Les images se chargent lorsqu’elles sont à environ 1 250px de la zone d’affichage
- 3G et plus lent : Les images se chargent lorsqu’elles sont à environ 2 500px de la zone d’affichage
Ces seuils garantissent que les images finissent de se charger avant que les utilisateurs ne fassent défiler jusqu’à elles. Lors des tests, 97,5% des images chargées paresseusement sur les réseaux 4G étaient entièrement chargées dans les 10ms suivant leur visibilité.
Défis d’implémentation courants
Prévention des décalages de mise en page
Sans dimensions appropriées, le chargement paresseux peut augmenter le Cumulative Layout Shift (CLS). Spécifiez toujours des dimensions exactes ou utilisez CSS pour maintenir les rapports d’aspect :
.lazy-image {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}Images masquées
Les images avec display: none ne se chargeront pas paresseusement dans Chrome, Safari et Firefox. Cependant, les images masquées avec opacity: 0 ou visibility: hidden se chargeront toujours. Testez votre implémentation minutieusement :
<!-- Ne se chargera pas paresseusement -->
<img src="hidden.jpg" loading="lazy" style="display: none;">
<!-- Se chargera paresseusement -->
<img src="hidden.jpg" loading="lazy" style="opacity: 0;">Images de carrousel et de slider
Chrome 121 a modifié le comportement pour les images à défilement horizontal. Les images de carrousel utilisent maintenant les mêmes seuils que le défilement vertical, ce qui signifie qu’elles se chargent avant de devenir visibles. Cela améliore l’expérience utilisateur mais augmente l’utilisation de la bande passante.
Solution de repli JavaScript pour les navigateurs plus anciens
Pour une prise en charge plus large des navigateurs, implémentez une approche d’amélioration progressive :
<!-- Chargement paresseux avec solution de repli -->
<img data-src="image.jpg" loading="lazy" alt="Description" width="400" height="300" class="lazy-fallback">
<script>
if ('loading' in HTMLImageElement.prototype) {
// Chargement paresseux natif pris en charge
const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach(img => {
img.src = img.dataset.src;
});
} else {
// Charger la bibliothèque de repli
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
document.body.appendChild(script);
}
</script>Impact sur les performances et métriques
L’implémentation du chargement paresseux d’images natif offre généralement :
- 20-50% de réduction du temps de chargement initial de la page
- 30-60% de diminution de l’utilisation de la bande passante
- Amélioration des scores Core Web Vitals
- Meilleure expérience utilisateur sur les connexions plus lentes
Surveillez votre implémentation en utilisant les outils de développement du navigateur et les services de surveillance des performances comme PageSpeed Insights ou WebPageTest.
Tester votre implémentation
Outils de développement du navigateur
Utilisez Chrome DevTools pour vérifier le chargement paresseux :
- Ouvrez DevTools (F12)
- Allez dans l’onglet Network
- Filtrez par “Img”
- Rechargez la page et faites défiler lentement
- Observez les images se charger lorsqu’elles approchent de la zone d’affichage
Limitation de réseau
Testez différentes vitesses de connexion :
- Dans DevTools, allez dans l’onglet Network
- Sélectionnez “Slow 3G” ou “Fast 3G” dans le menu déroulant de limitation
- Observez comment les seuils de chargement changent
Cas particuliers et limitations
Comportement d’impression
Lorsque les utilisateurs impriment une page, toutes les images se chargent immédiatement indépendamment de l’attribut loading. Cela garantit que les documents imprimés contiennent toutes les images.
Considérations SEO
Les robots d’indexation des moteurs de recherche peuvent accéder aux images chargées paresseusement sans problème. L’attribut loading n’impacte pas négativement le SEO, et des chargements de page plus rapides peuvent améliorer le classement dans les recherches.
Images d’arrière-plan
L’attribut loading ne fonctionne qu’avec les éléments <img> et <iframe>. Pour les images d’arrière-plan, vous aurez besoin de solutions JavaScript utilisant l’API Intersection Observer.
Conclusion
Le chargement paresseux d’images natif fournit un moyen simple et efficace d’améliorer les performances des pages sans dépendances externes. En ajoutant l’attribut loading="lazy" aux images en dessous de la ligne de flottaison et en suivant les bonnes pratiques concernant les dimensions et les considérations de zone d’affichage, vous pouvez réduire significativement les temps de chargement initial des pages et l’utilisation de la bande passante.
La clé d’une implémentation réussie réside dans la compréhension de quand utiliser le chargement paresseux, en spécifiant toujours les dimensions des images, et en testant sur différents appareils et vitesses de connexion. Avec une large prise en charge des navigateurs et aucune surcharge, le chargement paresseux natif devrait faire partie de la boîte à outils d’optimisation des performances de chaque développeur frontend.
FAQ
Le chargement paresseux d'images natif est une fonctionnalité du navigateur qui diffère le chargement des images jusqu'à ce qu'elles soient nécessaires en utilisant l'attribut HTML loading. Le navigateur calcule quand les images entreront dans la zone d'affichage en fonction de la vitesse de connexion et des seuils de distance, puis les charge juste avant qu'elles deviennent visibles aux utilisateurs.
Tous les navigateurs modernes principaux prennent en charge le chargement paresseux natif, y compris Chrome 77+, Firefox 75+, Safari 15.4+ et Edge 79+. Cela représente plus de 95% de l'utilisation mondiale des navigateurs. Les navigateurs qui ne prennent pas en charge l'attribut l'ignorent simplement et chargent les images normalement.
Oui, incluez toujours les attributs width et height lors de l'utilisation de loading lazy. Sans dimensions, les navigateurs ne peuvent pas réserver d'espace pour les images, entraînant des décalages de mise en page et des problèmes potentiels où les navigateurs supposent que toutes les images s'adaptent à la zone d'affichage et chargent tout immédiatement.
Non, n'utilisez jamais loading lazy sur les images au-dessus de la ligne de flottaison, en particulier les images LCP qui sont visibles lors du chargement initial de la page. Appliquez uniquement le chargement paresseux aux images qui apparaissent en dessous de la ligne de flottaison ou en dehors de la zone d'affichage initiale pour éviter de ralentir le rendu du contenu critique.
Le comportement dépend de la façon dont l'image est masquée. Les images avec display none ne se chargeront pas paresseusement dans la plupart des navigateurs, tandis que les images masquées avec opacity 0 ou visibility hidden se chargeront toujours. Testez toujours votre implémentation minutieusement pour vous assurer qu'elle se comporte comme prévu.