La partie de des images et vidéo dans la section d'un site Web peut être importante. Malheureusement, les partenaires du projet peuvent ne pas vouloir supprimer les ressources média de leur applications. De telles impasses sont frustrantes, surtout lorsque toutes les parties impliquées veulent améliorer les performances du site, mais qui ne sont pas d'accord sur la façon d'y arriver. Heureusement, le chargement différé est une solution qui réduit la charge utile de la page initiale et sans lésiner sur le contenu.
Qu'est-ce que le chargement différé ?
Le chargement différé est une technique qui diffère le chargement des ressources non critiques sur une page le temps de chargement. Au lieu de cela, ces ressources non critiques sont chargées au moment de besoin. En ce qui concerne les images, "non critique" est souvent synonyme de "hors écran". Si vous avez utilisé Lighthouse et que vous avez passé en revue quelques opportunités vous avez peut-être vu quelques conseils à cet égard, sous la forme Audit des images hors écran différée:
Vous avez probablement déjà vu le chargement lent en action, qui ressemble à ceci:
- Vous accédez à une page et commencez à la faire défiler à mesure que vous lisez du contenu.
- À un moment donné, vous faites défiler une image d'espace réservé dans la fenêtre d'affichage.
- L'image de remplacement est soudainement remplacée par l'image finale.
Vous trouverez un exemple de chargement différé d'image sur la célèbre plate-forme de publication Medium (Moyen) pour charger des images d'espace réservé légères chargement de la page, et les remplace par des images chargées de manière différée à mesure que l'utilisateur fait défiler la page la fenêtre d'affichage.
Si vous ne connaissez pas le chargement différé, vous vous demandez peut-être à quel point il est utile la technique et ses avantages. Lisez la suite pour en savoir plus.
Pourquoi effectuer un chargement différé des images ou des vidéos au lieu de simplement les charger ?
Parce qu'il est possible que vous chargez des éléments que l'utilisateur ne verra peut-être jamais. C'est pour plusieurs raisons:
- Cela gaspille des données. Avec une connexion sans compteur, ce n'est pas la pire chose qui (bien que vous puissiez utiliser cette énorme bande passante pour télécharger autres ressources qui seront effectivement visibles par l'utilisateur). En cas de données limitées Toutefois, charger des éléments que l'utilisateur ne voit jamais peut être du gaspillage de leur argent.
- Cela fait perdre du temps de traitement, la batterie et d'autres ressources système. Après un média ressource est téléchargée, le navigateur doit la décoder et afficher son contenu dans fenêtre d'affichage.
Le chargement différé des images et des vidéos réduit le temps de chargement initial de la page, le poids de la page et l'utilisation des ressources du système, qui ont tous un impact positif sur des performances.
Implémenter le chargement différé
Il existe plusieurs façons d'implémenter le chargement différé. Votre choix de solution doit tenir compte des navigateurs que vous prenez en charge, et le chargement différé.
Les navigateurs récents mettent en œuvre le chargement différé au niveau du navigateur.
qui peut être activé à l'aide de l'attribut loading sur les images et les cadres iFrame.
Pour assurer la compatibilité avec les anciens navigateurs
ou effectuer un chargement différé sur des éléments sans fonctionnalité intégrée
vous pouvez implémenter une solution avec votre propre JavaScript.
De nombreuses bibliothèques existent également pour vous aider.
Pour en savoir plus sur chacune de ces approches, consultez les messages publiés sur ce site:
Nous avons également compilé une liste des problèmes potentiels liés au chargement différé. et les points à surveiller lors de votre implémentation.
Conclusion
Utilisées avec précaution, les images et vidéos à chargement différé peuvent fortement faire baisser le temps de chargement et les charges utiles des pages sur votre site, y compris Core Web Vitals. Les utilisateurs n'auront pas à supporter y compris les conflits de réseau sur des connexions plus lentes, et les coûts de traitement des ressources multimédias qu'ils ne voient peut-être jamais, peuvent toujours consulter ces ressources s'ils le souhaitent.
En ce qui concerne les techniques d'amélioration des performances, le chargement différé est raisonnablement non controversée. Si votre site comporte de nombreuses images intégrées, il s'agit d'un ce qui est parfait pour réduire les téléchargements inutiles. Les utilisateurs et les les partenaires du projet apprécieront !