Images de chargement paresseux: Guide complet et 3 façons de le mettre en œuvre

Chargement d'images paresseuses: Guide complet


À mesure que la fonctionnalité et l’interactivité augmentent sur le Web, il y a eu une augmentation constante de la taille des pages Web au cours des dernières années. Début 2018, la taille moyenne des pages sur Internet représentait plus de 2 Mo! Comment lutter contre cela? Un petit quelque chose appelé images de chargement paresseux est l’une des meilleures solutions.

Dans ce guide, nous passons par toutes les subtilités des images de chargement paresseux, et parler de trois façons différentes de le mettre en œuvre.

Commençons par la table des matières de ce qui va arriver:

  • Pourquoi le chargement paresseux est important?
  • Qu’est-ce que le chargement paresseux?
  • Avantages du chargement paresseux
  • À prendre en compte lors du chargement d’images paresseux
  • Option 1: implémenter le chargement paresseux à partir de zéro (adapté aux débutants: ⭐ / 5)
  • Option 2: utilisez un plugin JavaScript (adapté aux débutants: ⭐⭐ / 5)
  • Option 3: utilisez un plugin WordPress (adapté aux débutants: ⭐⭐⭐⭐⭐ / 5)
  • Conclusion

Pourquoi le chargement paresseux est important?

L’énorme charge utile d’une page Web se compose principalement d’images, de scripts, de feuilles de style, de polices et de vidéos. Cependant, les images occupent plus de 60% de la taille d’une page Web classique. Les images sont également essentielles à la conception d’une page Web, donc ce n’est pas comme si vous pouviez vous en débarrasser.

Sans aucune optimisation, le navigateur Web de l’utilisateur télécharge toutes les ressources avant de rendre une page complètement. Cela entraîne une augmentation des temps de chargement, ce qui peut éloigner les gens. WooCommerce estimé que pour chaque 100 ms d’amélioration de la vitesse de la page, un site Web de commerce électronique peut augmenter les revenus de 1%.

Dans un scénario comme celui-là, faire tout ce qu’il faut pour optimiser vos temps de chargement est très logique. Et comme les images sont le principal contributeur à la taille des pages Web, commencer par elles est une bonne idée. C’est là que le chargement paresseux entre en jeu.

Qu’est-ce que le chargement paresseux?

Pour comprendre le fonctionnement du chargement paresseux, voici un GIF animé rapide montrant comment les images sont rendues sur CodeinWP.

Démonstration de chargement d'images paresseuxDémonstration de chargement paresseux sur CodeinWP

Lorsque la page se charge, toutes les images ne sont pas téléchargées immédiatement. Lorsque vous faites défiler vers le bas jusqu’à une image, vous voyez d’abord une version floue de celle-ci et l’image réelle commence à se charger en arrière-plan. Cette image floue est une version basse définition de l’image finale, à une fraction de la taille. Ce phénomène de différer le téléchargement et le rendu de l’image jusqu’à ce qu’un utilisateur la fasse défiler est précisément ce qu’on appelle le chargement paresseux.

Bien que "paresseux" est généralement associé négativement, le chargement paresseux est en fait une bonne pratique et conduit à réduire les temps de chargement des pages en optimisant globalement votre site.

Remarque. Dans cet article, nous examinons le processus de chargement paresseux des images, mais le chargement paresseux ne se limite pas aux seules images – vous pouvez utiliser la même idée lors du rendu de toute autre ressource comme des vidéos, les commentaires (il y a toute une section sur la façon de le faire dans ce post), et même des polices.

Avantages du chargement paresseux

Étant donné que le temps de chargement d’une page Web est un contributeur majeur à l’abandon, le chargement d’images paresseuses peut considérablement conduire à un soulèvement d’utilisateurs qui restent sur la page jusqu’à ce qu’elle se charge, ce qui pourrait finalement conduire à des ventes ou des conversions plus élevées.

L’autre avantage significatif du chargement d’images paresseuses est la baisse des factures du serveur. Vous ne diffusez que les images parcourues par l’internaute et économisez de la bande passante pour les parties de la page qui n’ont pas été consultées. Étant donné que les images constituent une partie dominante du poids de la page, cela pourrait entraîner des coûts de serveur potentiellement inférieurs.

Le chargement de toutes les images à l’avance est également potentiellement préjudiciable pour vos lecteurs. Si l’utilisateur dispose d’un forfait de données illimité pour le Web, cela ne devrait probablement pas avoir d’importance. Cependant, sur les plans avec des données limitées, vous enregistrez les données de votre spectateur en chargeant des images paresseuses.

À prendre en compte lors du chargement d’images paresseux

Maintenant que vous avez décidé d’implémenter correctement le chargement paresseux sur votre site Web, passons en revue quelques considérations clés sur la façon de le faire..

Identifiez les images que vous souhaitez charger paresseusement

Toutes les images ne sont pas idéales pour un chargement paresseux. Par exemple, vous ne voudriez pas charger paresseux ceux qui font partie intégrante de la structure de votre conception et doivent être chargés afin de tout rendre correctement.

Seules les images hors écran et qui ne contribuent pas à la structure de la page doivent être prises en compte pour le chargement paresseux. Ce sont généralement des images  éléments qui apparaissent dans le corps de la page.

Choisissez vos espaces réservés d’image

La prochaine chose à considérer est l’image ou la couleur intermédiaire qui devrait être affichée lorsque l’image est chargée une fois qu’un visualiseur l’a fait défiler. Le temps de chargement de l’image dépend de la taille de l’image et peut même prendre quelques secondes. Par conséquent, vous devez considérer ce que vous préférez utiliser pendant le temps de chargement.

Les développeurs prennent généralement deux directions à cet égard:

  • Utilisez la couleur dominante de l’image comme arrière-plan
  • Utilisez une version de mauvaise qualité de l’image

espace réservé basse résolutionUn exemple de versions d’images de faible qualité en tant qu’espaces réservés pour le chargement paresseux

Le bon choix ici dépend de la conception de votre site et de ce que vous préférez montrer à l’utilisateur lors de l’attente du chargement de l’image.

Bien qu’une technique consiste à charger les images dès qu’elles entrent dans le port de vue, vous pouvez envisager d’ajouter un temps de tampon avant que cela n’ait lieu – afin que l’utilisateur ne voie jamais l’espace réservé.

Attention à ne pas modifier la structure de la page lors du chargement des images

Avant de charger une image, elle peut être affichée en utilisant des dimensions de 0 px. Ce n’est pas idéal pour maintenir votre structure de conception.

Cela peut facilement modifier la mise en page de la page et la position du texte. Une solution simple consiste à ajouter immédiatement les dimensions correctes à l’image – cela garantit que la taille de l’élément d’image reste la même après le chargement.

Avec les considérations ci-dessus à l’écart, voyons maintenant comment nous pouvons réellement implémenter le chargement paresseux sur un site WordPress.

Option 1: implémenter le chargement paresseux à partir de zéro

Voyons d’abord comment faire cela sans utiliser de plugins. Cette option est recommandée pour ceux d’entre vous qui sont à l’aise avec JavaScript. Idéalement, les étapes suivantes doivent être prises:

  1. Empêcher le chargement de l’image pendant le chargement de la page: lorsque vous spécifiez l’URL ou le chemin de l’image dans l’attribut src du  tag, l’image sera téléchargée par le navigateur lors du chargement de la page. Pour empêcher le navigateur de télécharger l’image, vous devez spécifier l’emplacement de l’image dans l’attribut data-src du  tag à la place.
  2. Enregistrer les fonctions du gestionnaire d’événements en JavaScript pour vérifier les éléments de deux événements: le chargement et le défilement.
  3. Lorsqu’un élément entre dans le port d’affichage, chargez la valeur de l’élément data-src dans l’élément src, ce qui déclenche le navigateur pour charger l’image.

Une simple mise en œuvre de ce processus a été expliquée par Robin Osborne et la démo est disponible sur CodePen.

Option 1.1: utiliser l’API d’observateur d’intersection

API d’observateur d’intersection aide à identifier les éléments DOM qui se trouvent dans le port de vue à un moment donné. Il s’agit d’une façon plus simple d’implémenter le chargement différé sans écrire de fonctions de gestionnaire d’événements. Le nombre de lignes de code pour implémenter le chargement différé diminue également considérablement. Cependant, la compatibilité du navigateur reste un problème.

Le blog des développeurs Google explique la mise en œuvre de l’API d’observateur d’intersection à travers cette démo CodePen.

Option 2: utilisez un plugin JavaScript

Les deux options décrites ci-dessus nécessitent une connaissance de niveau intermédiaire de JavaScript. Si vous cherchez une implémentation plus facile du chargement paresseux sans utiliser un plugin lourd qui place la charge sur le serveur, vous pouvez essayer le plugin JavaScript simple, bLazy.

le Bibliothèque bLazy à une taille inférieure à 2 Ko ne met pas de charge supplémentaire sur la charge utile, tout en vous permettant de gérer facilement les images de chargement paresseux.

Pour utiliser la bibliothèque bLazy, vous devez initialiser  éléments avec les attributs suivants:

  • classe: définir la classe de tous  tags à b-lazy
  • src: lien vers l’image d’espace réservé
  • data-src: lien vers l’image à charger
  • data-src-small: lien vers l’image à charger sur des écrans de moins de 420 pixels de large

Vous devez initialiser la bibliothèque bLazy en quelques lignes de code et toutes vos images seront rendues par chargement paresseux.

;(une fonction() {
// Initialiser
var bLazy = nouveau Blazy ();
}) ();

Une démo CodePen est disponible ici.

Option 3: utilisez un plugin WordPress

Il existe quelques options qui peuvent vous donner un chargement paresseux. Notamment:

Tous ces plugins géreront automatiquement le chargement différé. Chacun est également livré avec de belles fonctionnalités latérales.

Par exemple, Lazy Load par WP Rocket charge également des vidéos YouTube paresseux et les remplace par une miniature.

Optimole, en plus d’être le plus récent ajout à la famille ThemeIsle, vous offre également une optimisation d’image solide (comme testé ici) avec des fonctionnalités assez avancées à cet égard. Par exemple, il vous offre un redimensionnement dynamique basé sur la taille de l’écran de l’utilisateur.


Optimisation d'image et Lazy Load par Optimole Optimisation d’image & Lazy Load par Optimole

Auteurs): Optimole

Version actuelle: 2.3.1

Dernière mise à jour: 21 avril 2020

optimole-wp.zip


96% Évaluations


50000 + installations


WP 4.7 + Requiert

Comme avec la plupart des plugins, pour obtenir un chargement paresseux, installez simplement le plugin et activez la fonctionnalité dans le panneau de configuration du plugin:

Optimole pour le chargement d'images paresseuses

Conclusion

Ce message a exploré le besoin et les avantages du chargement d’images paresseuses. Nous avons également discuté de trois façons différentes de mettre en œuvre le chargement paresseux sur un site Web WordPress:

  • Si vous avez une compétence intermédiaire en JavaScript, vous pouvez implémenter le chargement paresseux à partir de zéro
  • Si vous connaissez de la programmation mais ne voulez pas de plugins, une bibliothèque JavaScript légère, bLazy est une option
  • Si vous souhaitez une solution en un clic pour le chargement d’images paresseuses sur votre site Web, vous devriez opter pour un plugin tel qu’Optimole

Que pensez-vous du chargement paresseux? Avez-vous essayé de l’utiliser pour améliorer les performances de votre site Web?

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map