5 techniques pour le chargement paresseux pour stimuler les performances du site Web

Dans les applications Web modernes, les images sont devenues l'un des types de contenu les plus couramment utilisés. Bien que l'utilisation d'images d'arrière-plan puisse améliorer l'effet visuel de l'application, une trop grande taille d'image affectera sérieusement les performances de l'application.

Même après optimisation, les images peuvent encore prendre beaucoup de place, ce qui fait attendre trop longtemps les utilisateurs. Si les utilisateurs n'obtiennent pas l'expérience d'un accès rapide au contenu, ils ont tendance à perdre de la patience et à se tourner vers d'autres sites Web, donc un schéma de chargement d'image efficace est crucial.

Cet article présentera cinq méthodes de chargement d'image paresseuses pour vous aider à optimiser votre site Web et à améliorer l'expérience utilisateur. Ces méthodes conviennent à tous les types d'images, y compris des images d'arrière-plan, des images en ligne et des images de bannières.

Points clés

• Image Lazy Loading améliore les performances du site Web en chargeant des images de manière asynchronique. Ceci est particulièrement important pour les utilisateurs qui utilisent des appareils mobiles et des réseaux lents.
• Le chargement paresseux natif est un moyen facile d'utiliser HTML avec presque pas de frais généraux supplémentaires, mais tous les navigateurs ne prennent pas en charge cette fonctionnalité. L'API d'observateur d'intersection est une autre méthode facile à implémenter et efficace, mais tous les navigateurs ne le soutiennent pas également.
• Les bibliothèques JavaScript telles que Lozad.js et Yall.js peuvent implémenter rapidement et facilement le chargement paresseux d'images, de vidéos et d'IFRames. Ils utilisent l'API de l'observateur d'intersection, mais la compatibilité du navigateur doit être prise en compte.
• Similaire aux sites Web moyens, tout en chargeant des images de haute résolution, les images de basse résolution floues d'abord affichées, qui peuvent obtenir un bon effet visuel. Cela peut être réalisé de diverses manières, comme la méthode haute performance proposée par Craig Buckler, qui prend également en charge les écrans rétiniens.

Qu'est-ce que le chargement paresseux?

Le chargement de l'image paresseux signifie le chargement asynchrone des images sur le site Web. Le contenu peut être chargé au besoin après que la page soit entièrement chargée, ou uniquement si l'image apparaît dans la fenêtre du navigateur. Cela signifie que si l'utilisateur ne fait pas défiler vers le bas, l'image en bas de la page ne sera même pas chargée, améliorant finalement les performances de l'application.

Pour la plupart des sites Web, il est crucial de savoir comment permettre le chargement paresseux en HTML. Par exemple, essayez de parcourir votre site Web préféré avec des photos HD et vous constaterez bientôt que le site Web ne charge qu'un nombre limité d'images. Lorsque vous faites défiler la page, l'image d'espace réservé est rapidement remplacée par l'image réelle.

Par exemple, notez le chargeur sur unclash.com: défilement de cette partie de la page en vue déclenche l'espace réservé remplacé par une photo de résolution complète:

Exemple de chargement paresseux sur unsplash.com

Pourquoi avez-vous besoin d'implémenter le chargement paresseux des images?

Apprendre à charger des images paresseux est essentiel pour optimiser les performances du Web, en particulier sur les pages avec beaucoup de contenu visuel. Voici quelques raisons pour lesquelles vous devriez envisager des images de chargement paresseux pour votre site Web:

1.

Si votre site Web utilise JavaScript pour afficher le contenu ou fournit des fonctionnalités à l'utilisateur, il est crucial de charger rapidement le DOM. Le script commence généralement à s'exécuter après que le DOM est complètement chargé. Sur un site Web avec un grand nombre d'images, le chargement paresseux (ou le chargement asynchrone des images) peut déterminer si l'utilisateur continuera de parcourir ou de quitter votre site Web.

2.

Étant donné que la plupart des solutions de chargement paresseuses ne chargent des images que lorsque l'utilisateur défile vers un emplacement où l'image est visible dans la fenêtre, ces images ne seront jamais chargées si l'utilisateur n'atteint jamais cet emplacement. Cela signifie que beaucoup d'économies de bande passante peuvent être enregistrées, ce qui est très bénéfique pour la plupart des utilisateurs, en particulier ceux qui utilisent des appareils mobiles et des réseaux lents.

Le chargement paresseux des images aide à améliorer les performances du site Web, mais quelle est la meilleure façon de le faire?
Il n'y a pas de moyen parfait.

Si vous maîtrisez JavaScript, la mise en œuvre de votre propre solution de chargement paresseuse ne devrait pas être un problème. Rien ne vous donne plus de contrôle que d'écrire votre propre code.

ou, vous pouvez parcourir le Web pour trouver des moyens de le faire, ou rejoindre un forum de discussion et partager des idées. J'ai fait la même chose et j'ai trouvé ces cinq façons intéressantes.

1.

Lorsqu'un utilisateur fait défiler une page Web, le chargement paresseux natif d'images et d'IFRames est un moyen de charger directement du contenu. Il vous suffit d'ajouter l'attribut

à votre image et à votre iframe.

Comme vous pouvez le voir, il n'y a pas besoin de JavaScript, ni de remplacer dynamiquement la valeur de l'attribut

, utilisez simplement HTML normal. Cette approche est un exemple parfait d'ajouter des charges paresseuses en HTML sans aucune frais générale supplémentaire.

loading="lazy" La propriété «Chargement» nous permet de retarder le chargement des images hors écran et des iframes jusqu'à ce que l'utilisateur défile vers la position correspondante sur la page. "Chargement" peut prendre l'une des trois valeurs suivantes:

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

paresseux: très adapté au chargement paresseux src

EAGER: Demande au navigateur de charger immédiatement le contenu spécifié

Auto: Laissez l'option au navigateur de charger paresseusement.

Cette méthode est inégalée: elle n'a presque pas de frais généraux supplémentaires et est un moyen propre et simple de charger les images de chargement en HTML. Cependant, alors que la plupart des navigateurs grand public prennent en charge la propriété "Chargement", certains navigateurs manquent encore de support complet au moment de la rédaction.
Articles approfondis sur la puissance de cette image de chargement Lazy HTML, y compris les solutions de contournement de support du navigateur, ne manquez pas "Image native de chargement native d'Addy pour le Web!".

2.

L'API de l'observateur d'intersection est une interface moderne que vous pouvez utiliser pour charger des images de chargement et d'autres contenus.

Ce qui suit est l'introduction de MDN à cette API:

L'API de l'observateur d'intersection fournit une méthode pour observer de manière asynchrone les changements d'intersection des éléments cibles avec des éléments d'ancêtre ou des fenêtres de document de niveau supérieur.

En d'autres termes, l'API de l'observateur d'intersection surveille l'intersection d'un élément avec un autre de manière asynchrone.

Denys Mishunov a écrit un excellent tutoriel sur Intersection Observer et l'utiliser pour charger des images paresseuses. Voici sa solution:

Supposons que vous souhaitiez charger paresseux une bibliothèque d'images. Les marques de chaque image sont les suivantes:

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

Ici, le chemin d'accès à l'image est contenu dans l'attribut data-src, pas l'attribut src. La raison en est que l'utilisation de src signifie que l'image se chargera immédiatement, ce qui n'est pas ce que vous voulez.

Dans CSS, vous pouvez spécifier une valeur min-height pour chaque image, telle que 100px. Cela donne à chaque image d'image (élément IMG sans src attribut) une dimension verticale:

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

Ensuite, dans la documentation JavaScript, vous devez créer un objet de configuration et l'enregistrer avec l'instance intersectionObserver:

<code class="language-css">img {
  min-height: 100px;
  /* more styles here */
}</code>

Enfin, vous pouvez itérer sur toutes les images et les ajouter à cette instance iterationObserver:

<code class="language-javascript">// 创建配置对象：rootMargin和threshold是接口公开的两个属性
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// 使用intersectionObserver实例注册配置对象
let observer = new IntersectionObserver(function(entries, self) {
  // 迭代每个条目
  entries.forEach(entry => {
    // 只处理相交的图片。isIntersecting是接口公开的属性
    if(entry.isIntersecting) {
      // 将图片路径从data-src复制到src的自定义函数
      preloadImage(entry.target);
      // 图片现在已就位，停止观察
      self.unobserve(entry.target);
    }
  });
}, config);</code>

L'avantage de cette solution est qu'il est facile à mettre en œuvre, efficace et à intersection. L'observateur entreprend la plupart des travaux informatiques.

En termes de prise en charge du navigateur, tous les navigateurs traditionnels à l'exception d'IE 11 et d'Opera Mini prennent en charge l'API d'observateur d'intersection dans leurs dernières versions.

Vous pouvez en savoir plus sur l'API d'observateur d'intersection et cette implémentation détaille dans l'article de Denys.

3.

lozad.js Chargement paresseux de la bibliothèque JavaScript

Une alternative rapide et facile à la mise en œuvre du chargement d'image paresseux consiste à permettre à la bibliothèque JS de faire la majeure partie du travail pour vous.

Lozad.js est un chargeur paresseux haute performance, léger et configurable qui utilise un JavaScript pur sans aucune dépendance. Il s'agit d'un excellent outil pour le chargement paresseux JavaScript, des photos, des vidéos et des iframes lorsque les utilisateurs font défiler.

Vous pouvez installer Lozad à l'aide de NPM / YARN et l'importer à l'aide du packer de module de votre choix:

<code class="language-javascript">const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
  observer.observe(img);
});</code>

Alternativement, vous pouvez simplement télécharger la bibliothèque à l'aide de CDN et l'ajouter à

<code class="language-bash">npm install --save lozad

yarn add lozad</code>

en bas de la page HTML Ensuite, pour l'implémentation de base, ajoutez la classe

à la ressource dans la balise: lozad

<code class="language-javascript">import lozad from 'lozad';</code>

Enfin, instanciez Lozad dans votre document JS:

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821885662.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

Vous pouvez trouver tous les détails de l'utilisation de la bibliothèque dans le référentiel Lozad GitHub.

Lozad est une excellente option si vous ne voulez pas connaître l'API de l'intersection Observer, ou si vous recherchez simplement une implémentation rapide pour une variété de types de contenu.

4.

Si vous êtes un lecteur moyen, vous devez avoir remarqué comment le site charge l'image principale dans le post. La première chose que vous voyez est une copie floue à basse résolution de l'image, et sa version haute résolution est le chargement paresseux:

Vous pouvez obtenir des effets similaires lorsque vous chargez des images paresseuses dans HTML en utilisant CSS et JavaScript.

Photos d'espace réservés floues sur le site Web moyen

Haute résolution Lazy Chargement des images sur le site Web moyen

Vous pouvez ajouter cet effet flou amusant à votre image de plusieurs façons.

Ma méthode préférée est la méthode Craig Buckler. Voici tous les avantages de cette solution:

• Performance: seulement 463 octets de CSS et 1007 octets de code JavaScript compressé.
• prend en charge l'écran rétinien.
• pas de dépendance: aucune jQuery ou d'autres bibliothèques et cadres ne sont nécessaires.
• progressivement amélioré pour gérer les défaillances du navigateur et JavaScript héritées.

Vous pouvez lire toutes les informations pertinentes dans "Comment créer votre propre chargeur d'image progressive" et télécharger le code dans le référentiel GitHub du projet.

5. yall.js est une bibliothèque JavaScript riche en fonctionnalités qui utilise l'API d'observateur d'intersection pour charger JavaScript paresseux pendant que les utilisateurs font défiler. Il prend en charge les photos, les vidéos, les iframes et retombe intelligemment à la technologie traditionnelle des gestionnaires d'événements si nécessaire.

Lorsque vous incluez vous dans votre document, vous devez l'initialiser comme suit:

Ensuite, pour charger paresseux un élément IMG simple, il vous suffit de faire ce qui suit dans la balise:

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

Veuillez noter les points suivants:

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance "></code>

Vous ajoutez la classe

à l'élément.
• La valeur de lazy
est une image d'espace réservé.
• src Le chemin de l'image que vous souhaitez chargement paresseux est dans la propriété
.
• data-src
Voici les avantages de yall.js:

Obtenez d'excellentes performances en utilisant l'API d'observateur d'intersection.

• Excellent support du navigateur (il remonte à IE11).
• Aucune autre dépendance n'est requise.
Pour en savoir plus sur ce que Yall.js peut offrir et des implémentations plus complexes, n'hésitez pas à consulter la page du projet sur GitHub.

Conclusion

Voici cinq méthodes de chargement paresseuses que vous pouvez commencer à expérimenter et tester dans votre projet. Comprendre comment les images de chargement paresseuses est une compétence précieuse pour tout développeur Web. Vous pouvez en savoir plus sur l'optimisation d'image en rejoignant ce forum de point de point ou partagez votre expertise avec les autres.

Des questions fréquemment posées sur le chargement de l'image paresseuse

Qu'est-ce que le chargement paresseux des images?

Lazy Loading est une technologie de développement Web utilisée pour améliorer les performances de la page Web en chargeant certains éléments, tels que des images, jusqu'à ce qu'ils soient nécessaires. Le chargement de l'image paresseux signifie que l'image n'est chargée que lorsqu'elle entre dans la fenêtre de l'utilisateur ou est visible sur la page Web, plutôt que de charger toutes les images immédiatement lorsque la page est initialement rendue.

Quels sont les avantages des images de chargement paresseuses?

• Améliorer les performances du site Web
• Accélérez le rendu initial de la page et réduit l'utilisation de la bande passante.
• Améliorez l'expérience utilisateur.
• Réduire la charge du serveur et améliorer l'efficacité globale des applications Web.

Comment charger des images de chargement en HTML?

Pour ajouter un chargement paresseux aux images en HTML, vous pouvez utiliser la propriété "Chargement". La propriété "Chargement" est une propriété HTML standard qui vous permet de contrôler lorsque les images doivent être chargées. Pour activer les images de chargement html paresseuses, définissez la valeur de la propriété "Chargement" à "paresseuse" et ajoutez-la à l'élément IMG. Cela indiquera au navigateur de charger l'image uniquement lorsqu'il est sur le point d'entrer dans la fenêtre. Voici un exemple:

<code class="language-html"><img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance ">
<iframe loading="lazy" src="content.html"></iframe></code>

Est-il acceptable de charger l'image paresseuse?

Oui, l'utilisation de l'image de chargement paresseuse HTML dans le développement Web est considérée comme une pratique bénéfique pour les raisons suivantes. Il accélère le rendu initial des pages et améliore l'expérience utilisateur en retardant le chargement du chargement d'image non essentiel. Cette approche économise la bande passante et est bénéfique pour les utilisateurs avec des plans de données limités ou des connexions Internet plus lentes. De plus, il affecte positivement l'optimisation des moteurs de recherche (SEO) en augmentant la vitesse de chargement des pages et se conforme au principe de l'amélioration progressive. En réduisant la latence perçue et en fournissant des indices visuels pendant le chargement, le chargement paresseux aide à fournir une expérience de navigation plus lisse et plus efficace, en particulier sur les appareils mobiles.

Comment savoir si l'image est paresseuse à charger?

Pour confirmer que vous avez correctement implémenté la façon de charger des images de chargement dans HTML, vous pouvez vérifier le code source HTML ou utiliser des outils de développeur de navigateur. En cliquant avec le bouton droit sur l'image et en sélectionnant des éléments de vérification ou de vérification, vous pouvez vérifier l'élément IMG représentant l'image dans le panneau des outils du développeur. Trouvez si l'attribut "Chargement" existe dans l'élément IMG. Si la propriété "Chargement" est définie sur "paresseuse", cela signifie que l'image a été configurée pour être paresseuse. À l'aide de l'outil de développement du navigateur, vous pouvez rapidement déterminer l'état de chargement paresseux de l'image en vérifiant les propriétés de l'image.

Comment utiliser JavaScript pour obtenir un chargement d'image paresseux?

Pour utiliser JavaScript pour obtenir un chargement d'image paresseux, vous pouvez utiliser des bibliothèques comme lozad.js ou yall.js, ou vous pouvez écrire votre propre solution personnalisée à l'aide de l'API d'observateur intersection. Ces bibliothèques vous permettent de charger du contenu à la demande en surveillant lorsque les éléments entrent dans la fenêtre et les chargent à ce moment-là.

Le chargement paresseux de l'image affectera-t-il le référencement?

Oui, le chargement d'image paresseux peut avoir un impact positif sur le référencement. En augmentant le temps de chargement des pages et en réduisant la quantité de données qui doivent être chargées initialement, le chargement paresseux peut aider votre site Web à obtenir de meilleurs classements dans les résultats des moteurs de recherche. Les vitesses de page plus rapides sont un facteur de classement connu pour rechercher des moteurs comme Google, et le chargement paresseux peut faciliter cela en veillant à ce que les images de votre site Web ne ralentissent pas les performances globales.

Quelle est la différence entre le chargement paresseux natif et le chargement paresseux basé sur JavaScript?

Le chargement paresseux natif repose sur la prise en charge intégrée du navigateur pour les attributs "Chargement" dans les balises <img alt="5 techniques pour le chargement paresseux pour stimuler les performances du site Web" > et <iframe></iframe>. Cette méthode est simple et ne nécessite pas de JavaScript supplémentaire. D'un autre côté, le chargement paresseux basé sur JavaScript (généralement implémenté à l'aide de bibliothèques telles que lozad.js ou API d'observateur d'intersection) offre une plus grande flexibilité et personnalisation.

y a-t-il un inconvénient du chargement paresseux des images?

L'inconvénient principal est que l'image peut retarder le chargement lorsque l'utilisateur fait défiler la page. De plus, certains navigateurs plus anciens peuvent ne pas prendre en charge le chargement paresseux.

Puis-je charger des images paresseuses dans WordPress?

Oui, vous pouvez facilement charger des images de chargement dans WordPress. De nombreux thèmes prennent désormais en charge le chargement paresseux natif par défaut, mais vous pouvez également utiliser des plugins comme "Lazy Load by WP Rocket" ou "Smush" pour obtenir un chargement paresseux sans aucun encodage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!