Accueil
/
Aide du site web
/
Vitesse et disponibilité
/
Chargement différé des images : Qu'est-ce que c'est et comment le faire ?

Chargement différé des images : Qu'est-ce que c'est et comment le faire ?

Les images sont un élément clé de tout site web. Cependant, elles peuvent également avoir un impact significatif sur la vitesse de chargement des pages, en particulier sur les applications riches en images. Ceci est important car des sites web plus rapides offrent une meilleure expérience utilisateur et se classent plus haut dans les moteurs de recherche.

L’un des moyens d’optimiser le chargement des images consiste à utiliser la technique du chargement différé, qui permet d’améliorer les performances sans compromettre la qualité visuelle.

Dans cet article, vous apprendrez ce qu’est le chargement différé, comment il fonctionne et comment le mettre en œuvre sur votre site web. Nous examinerons également les meilleures pratiques en matière de chargement différé et les erreurs courantes à éviter.

Le chargement différé est une technique d’optimisation qui reporte le chargement des images et autres contenus multimédias jusqu’à ce qu’ils soient nécessaires.

Au lieu de charger toutes les images dès l’ouverture de la page, le navigateur web ne charge que les images visibles sur l’écran de l’utilisateur. Les images situées plus bas dans la page sont chargées dynamiquement au fur et à mesure que l’utilisateur fait défiler la page.

Cette méthode améliore la vitesse de la page, réduit la quantité de données transférées et minimise la charge sur l’appareil de l’utilisateur ainsi que sur le serveur.

En nécessitant moins de ressources dès le départ, le le chargement différé offre une expérience de navigation plus harmonieuse—surtout sur les appareils mobiles ou lorsque la connexion réseau est plus lente.

Le chargement différé est généralement utilisé pour les images, mais il peut également s’appliquer aux vidéos, aux iframes et à d’autres contenus multimédias.

Comment fonctionne le chargement différé

Le chargement différé consiste à retarder la demande de certaines ressources par le navigateur jusqu’à ce qu’elles soient sur le point d’être affichées à l’écran.

Lorsqu’un utilisateur ouvre une page web, seules les images visibles sont chargées immédiatement. Les autres demandes de chargement d’images ne sont envoyées que si l’utilisateur fait défiler la page vers le bas.

Le processus comporte généralement les étapes suivantes :

  1. Chargement initial de la page : Le navigateur charge le contenu essentiel de la page et les images visibles.
  2. Images de remplacement : Les images non visibles sont remplacées par des marqueurs légers ou des balises d’image vides.
  3. Interaction utilisateur : Lorsque l’utilisateur fait défiler la page ou interagit avec elle, le navigateur détecte qu’une image est sur le point d’être affichée.
  4. Chargement de l’image : Le fichier image n’est chargé à partir du serveur que lorsque l’image se trouve à proximité ou à l’intérieur de la fenêtre de visualisation.

Le chargement différé peut être implémenté en utilisant des attributs HTML, JavaScript ou des plugins—que nous explorerons dans les sections suivantes.

Comment mettre en œuvre le chargement différé

Il existe plusieurs façons de mettre en œuvre le chargement différé sur un site web, en fonction de la configuration du site et de vos compétences techniques.

Les méthodes les plus courantes consistent à utiliser des attributs HTML natifs, des solutions JavaScript et des fonctions intégrées dans les plateformes SGC telles que WordPress.

1. Chargement différé dans WordPress

WordPress facilite la mise en œuvre du chargement différé, même sans compétences en programmation.

1.1. Chargement différé automatique

Par défaut, WordPress ajoute automatiquement l’attribut loading=”lazy” aux images insérées via l’éditeur de blocs ou en utilisant la fonction wp_get_attachment_image().

Cette fonctionnalité automatique améliore les performances sans nécessiter de configuration supplémentaire.

1.2. Depuis des plugins

Pour des options de chargement différé plus avancées, vous pouvez utiliser des plugins WordPress. Les plugins les plus populaires offrent des fonctionnalités supplémentaires telles que des animations de chargement, des exclusions CSS et le chargement différé pour les images de fond.

Le plugin Speed Optimizer de SiteGround ne permet pas seulement le chargement différé mais optimise également les images, met en cache les fichiers et améliore les performances globales du site web.

C’est une solution puissante et tout-en-un pour rendre votre site WordPress plus rapide sur les appareils mobiles et ordinateurs de bureau.

Une bannière publicitaire pour le plugin SiteGround Speed Optimizer, avec une liste de puces décrivant sa popularité, et un bouton « Obtenir maintenant ».

Pour activer le chargement différé avec le plugin Speed Optimizer de SiteGround :

  1. Accédez à votre tableau de bord WordPress.
  2. Naviguez vers Speed Optimizer > Médias.
Capture d'écran des paramètres d'optimisation des médias de Speed Optimizer dans WordPress, avec une mise en évidence de l'option permettant d'activer le un chargement différé des médias.
  1. Activez l’option Chargement différé de médias.
Un tableau à deux colonnes énumérant les avantages et les inconvénients de l'utilisation de plugins pour le chargement différé. Les avantages sont la facilité d'installation, l'absence de codage et les options de personnalisation avancées. Les inconvénients sont que ces fonctionnalités peuvent entraîner des frais généraux supplémentaires.

2. Utilisation des attributs HTML natifs

Les navigateurs modernes prennent en charge le chargement différé natif grâce à l’attribut loading=”lazy” dans le code HTML.

Cette méthode est le moyen le plus simple d’ajouter le chargement différé sans écrire de code supplémentaire.

Exemple :

<img src="image.jpg" alt="Example Image" loading="lazy">

L’attribut loading=”lazy” indique au navigateur de différer le chargement de l’image jusqu’à ce qu’elle soit sur le point d’entrer dans la zone visible.

Un tableau à deux colonnes énumérant les avantages et les inconvénients de l'utilisation d'attributs HTML natifs pour le chargement différé. Les avantages sont la facilité de mise en œuvre, l'absence de scripts externes et la prise en charge par la plupart des navigateurs modernes. Les inconvénients sont la prise en charge limitée des anciens navigateurs et la personnalisation.

3. Utilisation de JavaScript

JavaScript offre plus de flexibilité et de contrôle sur le chargement différé, surtout pour les anciens navigateurs ou des cas d’utilisation plus avancés.

Deux méthodes courantes sont LazyLoad.js et l’API Intersection Observer.

3.1. LazyLoad.js

LazyLoad.js est une bibliothèque JavaScript légère qui simplifie le chargement différé des images et autres éléments multimédias. Elle déclenche l’exécution de la fonction de chargement différé uniquement lorsque les images entrent dans la fenêtre de visualisation.

Pour l’utiliser :

  1. Incluez la bibliothèque dans votre projet :
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.8.3/lazyload.min.js"></script>
  1. Remplacez l’attribut src dans vos balises d’image par data-src :
<img data-src="image.jpg" alt="Example Image" class="lazy">
  1. Initialisez LazyLoad.js avec JavaScript :
var lazyLoadInstance = new LazyLoad({

elements_selector: ".lazy"

});
Un tableau à deux colonnes énumérant les avantages et les inconvénients de l'utilisation de lazyload.js. Les avantages sont la facilité d'installation, le fonctionnement dans la plupart des navigateurs et les options personnalisables. Les inconvénients sont le léger surcoût en termes de performances et la nécessité d'une bibliothèque externe.

3.2. API Intersection Observer

L’API Intersection Observer est une fonctionnalité JavaScript moderne qui détecte l’entrée et la sortie d’éléments dans la fenêtre de visualisation.

Exemple :

<img data-src="image.jpg" alt="Example Image" class="lazy">


const lazyImages = document.querySelectorAll(".lazy");

const observer = new IntersectionObserver((entries) => {

  entries.forEach((entry) => {

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src;

      observer.unobserve(img);

    }

  });

});


lazyImages.forEach((img) => observer.observe(img));
Un tableau avec deux colonnes énumérant les avantages et les inconvénients de l'utilisation de l'API Intersection Observer pour le chargement différé. Les avantages sont qu'elle est intégrée dans les navigateurs modernes, ne nécessite pas de bibliothèques externes et offre de meilleures performances. Les inconvénients sont le manque de support dans les anciens navigateurs et un besoin de codage plus important.

Bonnes pratiques pour le chargement différé des images

La mise en œuvre du chargement différé peut améliorer les performances de votre site web, mais le respect des bonnes pratiques garantit que la technique fonctionne efficacement sans compromettre l’expérience de l’utilisateur ou le SEO.

1. Donner la priorité aux images au-dessus du pli

Il faut toujours exclure les images situées au-dessus du pli de la page du chargement différé.

Ce sont les images visibles sans avoir à faire défiler la page qui doivent être chargées immédiatement pour éviter les changements de mise en page et améliorer la perception des performances.

En HTML, omettez simplement l’attribut loading=”lazy” pour ces images.

2. Utiliser des placeholder images

Afficher un placeholder images pendant le chargement de l’image améliore l’expérience visuelle et évite les espaces vides. Vous pouvez utiliser une image de faible qualité ou une couleur de fond unie comme placeholder images.

Exemple avec CSS :

.lazy {

background-color: #f3f3f3; /* Placeholder color */

min-height: 200px; /* Image height */

}

3. Optimiser la taille et le format des images

Le chargement paresseux fonctionne mieux avec des images optimisées. Utilisez des formats modernes comme WebP et compressez les images avant de les télécharger.

Des outils comme le plugin Speed Optimizer de SiteGround peuvent automatiquement convertir les images en WebP et optimiser leur taille.

Capture d'écran des paramètres d'optimisation des médias de Speed Optimizer dans WordPress, avec une mise en évidence de l'option « Utiliser des images WebP ».

4. Tester les performances et la compatibilité

Testez toujours le chargement différé sur différents appareils et navigateurs pour vérifier la compatibilité.

Des outils comme Google PageSpeed Insights ou Lighthouse peuvent être utilisés pour évaluer les améliorations en matière de performance.

5. Combiner le chargement différé avec d’autres techniques d’optimisation

Le chargement différé fonctionne mieux avec d’autres optimisations de performance telles que :

Les utilisateurs de SiteGround peuvent facilement appliquer ces optimisations en utilisant le plugin Speed Optimizer et les fonctionnalités intégrées dans leur tableau de bord Site Tools.

Erreurs courantes de chargement différé et comment les éviter

Bien que le chargement différé améliore les performances, une mauvaise mise en œuvre peut entraîner des problèmes qui ont un impact négatif sur l’expérience utilisateur et le SEO.

Voici quelques erreurs courantes et comment les corriger.

1. Chargement différé des images au-dessus du pli

Le chargement différé des images situées en haut de la page web peut retarder l’affichage du contenu et provoquer des changements de mise en page. Cela peut donner l’impression que votre site est lent.

Solution : Excluez les images au-dessus du pli du chargement différé en supprimant l’attribut loading=”lazy” des images clés, telles que les logos, votre image d’en-tête et les vignettes en vedette.

2. Ne pas fournir les dimensions de l’image

Si les dimensions des images ne sont pas spécifiées, le navigateur ne sait pas quelle quantité d’espace réserver, ce qui peut provoquer des décalages de contenu pendant le chargement des images.

Solution : Toujours définir les attributs de largeur et de hauteur pour les images afin d’éviter les décalages de mise en page.

<img src="image.jpg" alt="Example Image" width="600" height="400" loading="lazy">

3. Chargement différé des images critiques de carrousel ou de fond

Les images à l’intérieur des carrousels ou définies comme images de fond en CSS peuvent ne pas déclencher correctement le chargement différé, entraînant des retards dans l’affichage du contenu.

Solution : Charger à l’avance les images critiques de carrousel et utiliser le chargement différé basé sur JavaScript pour contrôler le moment où la propriété réelle de l’image de fond est appliquée.

Exemple d’utilisation de la propriété CSS d’image de fond :

.lazy-bg {

background-image: url("placeholder.jpg");

}

.lazy-bg.loaded {

background-image: url("real-image.jpg");

}

Exemple de code JavaScript :

document.querySelectorAll('.lazy-bg').forEach(el => {

el.classList.add('loaded');

});

4. Utilisation excessive de JavaScript pour le chargement différé

Bien que les solutions de chargement différé basées sur JavaScript offrent une certaine flexibilité, leur utilisation excessive augmente l’utilisation des ressources et peut ne pas fonctionner sur tous les navigateurs web.

Solution : Utilisez le chargement différé natif en HTML (loading=”lazy”) chaque fois que possible. N’utilisez les solutions basées sur JavaScript que lorsque vous avez besoin de plus de contrôle.

5. Négliger les considérations de SEO et d’accessibilité

Les images en chargement différé peuvent ne pas être correctement indexées par les moteurs de recherche si elles ne possèdent pas les attributs appropriés ou si le JavaScript n’est pas exécuté. De plus, l’absence d’attributs alt peut nuire à l’accessibilité.

Solution :

  • Assurez-vous que les images sont détectables par les moteurs de recherche en utilisant des éléments img appropriés plutôt que des images de fond pour le contenu important.
  • Incluez toujours des attributs ALT significatifs pour les lecteurs d’écran.
<img src="product.jpg" alt="Red running shoes" loading="lazy">

Le respect de ces bonnes pratiques vous aidera à éviter les problèmes courants liés au chargement différé tout en garantissant une expérience transparente pour les utilisateurs et les moteurs de recherche.

Points clés sur le chargement différé des Images

Le chargement différé est une technique puissante qui améliore les performances des sites web en retardant le chargement des images jusqu’à ce qu’elles soient nécessaires. Il réduit le temps de chargement initial des pages, économise la bande passante et améliore l’expérience utilisateur, en particulier sur les appareils mobiles et les connexions plus lentes.

Dans ce guide, nous avons abordé les points suivants

  • Ce qu’est le chargement différé et comment il fonctionne
  • Différentes méthodes de mise en œuvre, y compris les attributs HTML, JavaScript et les plugins WordPress
  • Bonnes pratiques pour des performances optimales
  • Erreurs courantes et comment les éviter

Pour les utilisateurs de WordPress, le plugin Speed Optimizer de SiteGround offre un moyen facile d’activer le chargement différé ainsi que d’autres optimisations de performance.

En suivant les conseils présentés dans cet article, vous pouvez accélérer considérablement votre site web sans compromettre la qualité du contenu.

Une bannière publicitaire pour les plans d'hébergement géré de SiteGround, listant les caractéristiques clés telles que la technologie de mise en cache premium, des solutions de sécurité de premier ordre et un support expert.

Partager cet article