Lorsque vous analysez la performance de votre site web avec PageSpeed Insights, vous pouvez rencontrer un point rouge intitulé « Différez le chargement des images hors écran ». Ce message indique que certaines de vos images ne sont pas optimisées pour le chargement rapide, ce qui ralentit la vitesse de votre site. Voici comment corriger ce problème en utilisant une stratégie claire et concrète, afin d’améliorer votre SEO et la performance globale de votre site.
1. Qu’est-ce que le chargement différé des images ?
Le chargement différé, ou lazy loading, est une technique qui permet de charger les images uniquement lorsque l’utilisateur fait défiler la page et qu’elles deviennent visibles à l’écran. Cela réduit la quantité de données chargées au départ et améliore la vitesse de chargement initiale de la page, ce qui a un impact direct sur votre score PageSpeed et votre référencement SEO.
Pourquoi est-ce important ?
- Amélioration de la vitesse de page : Le chargement différé réduit le temps de chargement initial, ce qui permet de mieux répondre aux exigences de Google en matière de Core Web Vitals.
- Réduction de la bande passante : Le fait de ne charger que les images visibles améliore l’expérience utilisateur en réduisant les ressources utilisées.
- Impact SEO positif : Un site plus rapide est mieux perçu par Google, ce qui peut améliorer votre positionnement dans les résultats de recherche.
2. Comment mettre en place le chargement différé des images
2.1. Utiliser l’attribut loading= »lazy »
La solution la plus simple pour mettre en place le lazy loading est d’utiliser l’attribut HTML loading= »lazy ». Cela permet à votre navigateur de différer le chargement des images jusqu’à ce qu’elles soient sur le point d’être affichées à l’écran.
Exemple :
<img src="image.jpg" alt="Description de l'image" loading="lazy">
Ce code indique au navigateur de ne charger l’image que lorsque l’utilisateur fait défiler la page jusqu’à elle. C’est la méthode la plus simple et la plus efficace pour optimiser les images dans votre site web.
2.2. Utiliser un script JavaScript de lazy loading
Si votre site ne prend pas en charge l’attribut loading= »lazy » (en particulier sur les navigateurs plus anciens), vous pouvez implémenter un script JavaScript pour différer le chargement des images.
Exemple avec lazysizes :
lazysizes est une bibliothèque JavaScript populaire qui gère le lazy loading pour vous. Voici comment l’utiliser :
- Inclure la bibliothèque lazysizes : Ajoutez la bibliothèque JavaScript à votre fichier HTML.
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
Modifier les balises <img> : Ajoutez l’attribut data-src pour les images qui doivent être chargées paresseusement, et remplacez src par data-src.
<img data-src="image.jpg" class="lazyload" alt="Description de l'image">
Cela permet à lazysizes de gérer automatiquement le chargement différé des images lorsqu’elles deviennent visibles dans le viewport de l’utilisateur.
2.3. Charger les images de manière conditionnelle avec IntersectionObserver
Si vous avez des besoins plus avancés, vous pouvez utiliser IntersectionObserver, une API JavaScript qui vous permet de charger des images uniquement lorsque l’utilisateur les approche. Cette méthode est plus flexible et performante que les solutions classiques de lazy loading.
Exemple de code :
// Crée un observateur d'intersection
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Remplacer l'attribut "data-src" par "src"
entry.target.src = entry.target.getAttribute('data-src');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
// Cibler toutes les images avec l'attribut "data-src"
document.querySelectorAll('img[data-src]').forEach(image => {
observer.observe(image);
});
Cette approche permet de n’afficher les images que lorsque l’utilisateur les fait défiler jusqu’à elles, ce qui améliore considérablement les performances du site.
3. Autres bonnes pratiques pour améliorer les performances de vos images
Le simple fait de différer le chargement des images peut améliorer la vitesse de votre site, mais il existe d’autres techniques pour optimiser le SEO et la performance des images.
3.1. Compresser vos images
Avant d’appliquer le lazy loading, assurez-vous que vos images sont déjà optimisées en termes de poids. Utilisez des outils comme TinyPNG ou ImageOptim pour compresser vos images sans perte de qualité visible. Vous pouvez aussi utiliser des formats modernes comme WebP pour obtenir une compression encore plus efficace.
3.2. Utiliser le responsive design
Les images doivent être adaptées à la taille de l’écran de l’utilisateur. Utilisez l’attribut srcset pour charger des images de différentes tailles en fonction de la résolution de l’écran.
Exemple de code avec srcset :
<img src="image-small.jpg"
srcset="image-large.jpg 1200w, image-medium.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Description de l'image">
Cela permet de charger une image plus petite sur les appareils mobiles et une image plus grande sur les écrans de bureau, réduisant ainsi la bande passante.
3.3. Utiliser un CDN
Si vous avez un grand nombre d’images ou des images volumineuses, l’utilisation d’un CDN (Content Delivery Network) peut améliorer la vitesse de chargement en servant les images depuis un serveur plus proche de l’utilisateur. Des solutions comme Cloudflare, AWS CloudFront, ou KeyCDN sont idéales pour cela.
4. Vérifier votre mise en œuvre
Après avoir mis en place le chargement différé des images, vérifiez que votre site est correctement optimisé en utilisant PageSpeed Insights ou Lighthouse. Vous devriez voir que le point rouge « Différer le chargement des images hors écran » a disparu, et que votre score de performance est amélioré.
Conclusion
Différer le chargement des images hors écran est une technique simple et efficace pour améliorer la vitesse de votre site web et optimiser votre SEO. En implémentant le lazy loading avec des outils comme l’attribut loading= »lazy » ou des bibliothèques JavaScript comme lazysizes, vous réduisez le temps de chargement initial, améliorez l’expérience utilisateur et boostez vos performances. N’oubliez pas de compresser vos images, d’utiliser des formats modernes comme WebP et de tester régulièrement la vitesse de votre site pour garantir une expérience optimale à vos utilisateurs.
