La prise en charge des images paresseuses intégrées et des téléchargements iframe est arrivée sur le Web!
Ă partir de la version 76 de Chrome, vous pouvez utiliser le nouvel attribut de
loading pour charger paresseusement des ressources sans avoir à écrire de code supplémentaire pour cela ou utiliser une bibliothÚque JavaScript tierce. Regardons les détails.
Cette vidéo montre
un exemple de cette fonction:
Pourquoi le chargement paresseux intégré?
Selon
HTTPArchive , les images sont le type de ressource le plus demandé sur la plupart des sites et consomment généralement plus de bande passante que toute autre. Au 90e centile, les sites envoient environ 4,7 Mo d'images aux ordinateurs de bureau et aux appareils mobiles. Assez de
photos avec des chats .
Les iframes intĂ©grĂ©s consomment Ă©galement beaucoup de donnĂ©es et peuvent nuire aux performances des pages. Le tĂ©lĂ©chargement d'images et d'iframes non critiques uniquement au moment oĂč l'utilisateur peut les voir amĂ©liore la vitesse de chargement des pages, minimise la charge sur la bande passante du canal utilisateur et rĂ©duit l'utilisation de la mĂ©moire.
Il existe actuellement deux façons de retarder le chargement des images et des cadres situés hors écran:
Toute option peut permettre aux dĂ©veloppeurs d'activer la fonctionnalitĂ© de chargement paresseux, et beaucoup ont crĂ©Ă© des bibliothĂšques tierces pour fournir des abstractions encore plus faciles Ă utiliser. Si vous avez un support pour le chargement paresseux directement dans le navigateur, il n'y aura pas besoin d'une bibliothĂšque tierce. Le chargement diffĂ©rĂ© intĂ©grĂ© garantit Ă©galement que le chargement diffĂ©rĂ© des images et des cadres continue de fonctionner mĂȘme si JavaScript est dĂ©sactivĂ© du cĂŽtĂ© client.
Attribut de chargement
Aujourd'hui, Chrome télécharge déjà des images avec des priorités différentes, selon leur emplacement par rapport à la zone de visualisation de l'appareil. Les images situées sous la zone de visualisation sont téléchargées avec une priorité inférieure, mais toujours téléchargées le plus rapidement possible.
Dans Chrome 76, vous pouvez utiliser l'attribut de
loading pour retarder dĂ©finitivement le chargement des images et des cadres hors de l'Ă©cran, ce qui peut ĂȘtre atteint en faisant dĂ©filer:
<img src="image.png" loading="lazy" alt="âŠ" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>
loading valeurs d'attribut prises en
loading :
auto : paramĂštre par dĂ©faut du mode de chargement diffĂ©rĂ© dans le navigateur. Identique Ă l'attribut manquantlazy : retarder le chargement d'une ressource jusqu'Ă ce qu'elle atteigne la distance estimĂ©e de la fenĂȘtreeager : charger une ressource immĂ©diatement, malgrĂ© son emplacement sur la page
Cette fonctionnalitĂ© continuera d'ĂȘtre mise Ă jour jusqu'Ă son lancement dans la version stable (pas plus tĂŽt que Chrome 76). Mais vous pouvez l'essayer en activant les indicateurs suivants dans Chrome:
- chrome: // flags / # enable-lazy-image-loading
- chrome: // flags / # enable-lazy-frame-loading
Seuil de distance de chargement
Toutes les images et tous les cadres visibles sur la page sans défilement sont chargés en standard. Celles qui sont situées sous la zone de visualisation de l'appareil ne sont chargées que lorsque l'utilisateur les fait défiler.
La distance Ă laquelle le chargement commence n'est pas fixe et varie en fonction de plusieurs facteurs:
Vous pouvez trouver les valeurs par défaut pour les différents types de composés efficaces dans la
source de chrome . Ces mesures et mĂȘme l'approche de chargement lorsque vous atteignez une certaine distance de la zone de visualisation peuvent changer dans un proche avenir, car l'Ă©quipe Chrome amĂ©liore l'heuristique pour dĂ©terminer quand commencer le tĂ©lĂ©chargement.
Dans Chrome 77, vous pouvez expérimenter ces différents seuils en
ralentissant la vitesse de connexion dans DevTools. Pendant cela, vous devrez remplacer le type de connexion efficace dans le navigateur Ă l'aide de l'
chrome://flags/#force-effective-connection-type.Télécharger des images
L'attribut de chargement affecte les cadres différemment des images, selon que le cadre est masqué (les cadres masqués sont souvent utilisés pour des tùches d'analyse ou de communication). Chrome utilise les critÚres suivants pour déterminer si un cadre est masqué:
- largeur et hauteur du cadre 4px ou moins
display: none ou visibility: hidden propriétés visibility: hidden s'appliquent- le cadre est hors écran en utilisant un positionnement X ou Y négatif
Si un cadre remplit l'une de ces conditions, Chrome le considÚre comme masqué et ne se charge pas en mode différé dans la plupart des cas. Les trames qui ne sont pas masquées ne seront chargées que lorsqu'elles tombent dans le
seuil de charge . Pour les images qui se chargent toujours en mode de chargement différé, un espace réservé s'affiche
FAQ
Est-il prévu d'étendre cette fonctionnalité?
Il est prĂ©vu de modifier le mode de chargement diffĂ©rĂ© du navigateur par dĂ©faut pour afficher automatiquement dans ce mode toutes les images et les cadres dont le chargement peut ĂȘtre retardĂ© si le
mode Lite est activé dans Chrome pour Android.
Est-il possible de modifier la distance à l'image ou au cadre à laquelle le chargement différé commence?
Ces valeurs sont codĂ©es en dur et ne peuvent pas ĂȘtre modifiĂ©es via l'API. Cependant, ils peuvent changer Ă l'avenir, car l'Ă©quipe Chrome expĂ©rimente diffĂ©rentes distances de seuil et diffĂ©rentes variables.
Les images définies via la propriété d'arriÚre-plan CSS peuvent-elles obtenir l'attribut de chargement?
Non, pour le moment, il ne peut ĂȘtre utilisĂ© qu'avec des balises.
Comment l'attribut de chargement fonctionne-t-il avec des images qui sont dans la portée mais non visibles (comme un carrousel)?
En mode différé, seules les images chargées à une
certaine distance du bas de la zone de visualisation de l'appareil sont chargées. Toutes les images au-dessus de la zone de visualisation, qu'elles soient actuellement visibles ou non, sont chargées normalement.
Que faire si j'utilise déjà une bibliothÚque ou un script tiers pour différer le chargement d'images ou de cadres?
L'attribut de chargement ne doit pas affecter le code qui charge les données en mode différé, mais il est important de considérer certains points importants:
- Si votre chargeur de démarrage tiers en mode différé tente de charger des images ou des cadres avant que Chrome ne les charge en mode normal, c'est-à -dire à une distance supérieure au seuil de distance de téléchargement du navigateur, ils seront toujours retardés et chargés conformément aux rÚgles de comportement normal du navigateur.
- Si votre chargeur de démarrage tiers utilise une distance plus courte pour déterminer quand charger une image ou un cadre particulier que le navigateur, alors le comportement correspondra aux paramÚtres de votre chargeur de démarrage
L'une des raisons importantes pour continuer Ă utiliser une bibliothĂšque tierce en parallĂšle avec loading = "lazy" est de fournir un fichier polyfile pour les navigateurs qui ne prennent pas en charge cet attribut.
Les autres navigateurs prennent-ils en charge le chargement différé intégré?
L'attribut de
loading peut ĂȘtre considĂ©rĂ© comme une amĂ©lioration progressive. Les navigateurs qui le prennent en charge peuvent tĂ©lĂ©charger des images et des cadres en mode diffĂ©rĂ©. Ceux qui ne prennent pas en charge - pour l'instant, tĂ©lĂ©chargez des images comme d'habitude. Du point de vue de la prise en charge multi-navigateurs, l'attribut de
loading est pris en charge dans Chrome 76 et tous les navigateurs basés sur Chromium 76. Il existe également un
bogue ouvert concernant l'implémentation de cette fonction dans Firefox.
Une API similaire a été proposée et utilisée dans IE et Edge, mais elle était axée sur la réduction des priorités de téléchargement au lieu de la désactiver complÚtement.
Que faire avec les navigateurs qui ne prennent pas encore en charge le téléchargement différé intégré?
CrĂ©ez un polyfichier ou utilisez une bibliothĂšque tierce pour tĂ©lĂ©charger des images sur le site en mode diffĂ©rĂ©. La propriĂ©tĂ© de chargement peut ĂȘtre utilisĂ©e pour dĂ©terminer si la fonctionnalitĂ© est prise en charge dans le navigateur:
if ('loading' in HTMLImageElement.prototype) {
Par exemple,
lazysizes est une bibliothÚque JavaScript populaire pour le chargement paresseux. Vous pouvez définir la prise en
loading attribut de chargement pour charger cette bibliothĂšque uniquement lorsque le
loading pas pris en charge. Cela fonctionne comme suit
<img src="hero.jpg" alt="âŠ"> <img data-src="unicorn.jpg" alt="âŠ" loading="lazy" class="lazyload"> <img data-src="cats.jpg" alt="âŠ" loading="lazy" class="lazyload"> <img data-src="dogs.jpg" alt="âŠ" loading="lazy" class="lazyload"> <script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { </script>
DĂ©monstration de travail. Essayez-le dans des navigateurs comme Firefox ou Safari pour voir le repli en action.
La bibliothĂšque lazysizes fournit Ă©galement
un plug-in de chargement intégré qui utilise le chargement différé intégré lorsque cela est possible et utilise la fonctionnalité de la bibliothÚque lorsque cela est nécessaire.
Comment le chargement en ligne retardé affecte-t-il les annonces sur une page?
Toutes les publicités présentées sous forme d'images ou de cadres sont également chargées en mode différé, comme toutes les autres images ou cadres.
Comment les images sont-elles traitées si une page Web s'imprime?
Bien qu'il n'y ait aucune fonctionnalité dans Chrome 76, il existe
un problÚme ouvert qui charge immédiatement toutes les images et les cadres lors de l'impression d'une page.
Conclusion
L'utilisation de la prise en charge intégrée pour le chargement paresseux d'images et de cadres peut améliorer considérablement les performances des pages Web.
Si vous remarquez un comportement inhabituel lorsque vous activez cette fonctionnalité dans Chrome,
signalez une erreur .