Passer au contenu principal




 

À partir de Chrome 73, le lien rel = "preload" et les images réactives peuvent être combinés pour charger les images plus rapidement.

Cet article me donne l'occasion de discuter de deux de mes choses préférées: les images responsives. y précharge. En tant que personne très impliquée dans le développement des deux fonctionnalités, je suis tellement excitée de les voir travailler ensemble!

Présentation de l'imagerie réactive

Supposons que vous naviguez sur le Web sur un écran de 300 pixels de large et que la page demande une image de 1 500 pixels de large. Cette page a gaspillé une grande partie de vos données cellulaires parce que votre écran ne peut rien faire avec toute cette résolution supplémentaire. Idéalement, le navigateur devrait obtenir une version de l'image qui n'est qu'un petit plus large que la taille de votre écran, disons 325 pixels. Cela garantit une image haute résolution sans gaspiller de données. Et le meilleur de tous, l'image se chargera plus rapidement. Les images réactives permettent aux navigateurs de rechercher différentes ressources d'image sur différents appareils. Si vous n'utilisez pas de CDN d'image, vous devez enregistrer plusieurs dimensions pour chaque image et les spécifier dans le srcset attribut. Les w value indique au navigateur la largeur de chaque version. En fonction de l'appareil, le navigateur peut choisir celui qui convient:

 

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="">

 

Aperçu de la précharge

Le préchargement vous permet d'informer le navigateur des ressources critiques que vous souhaitez charger dès que possible, avant qu'elles ne soient détectées dans HTML. Ceci est particulièrement utile pour les ressources qui ne peuvent pas être facilement découvertes, telles que les polices incluses dans les feuilles de style, les images d'arrière-plan ou les ressources chargées à partir d'un script.

 

<relier rel="précharge" as="image" href="important.png">

 

Images réactives + préchargement = téléchargements d'images plus rapides

Les images responsives et le préchargement étaient disponibles depuis quelques années, mais en même temps quelque chose manquait: il n'y avait aucun moyen de précharger les images responsives. À partir de Chrome 73, le navigateur peut précharger la bonne variante des images responsives spécifiées dans srcset avant de découvrir le img hashtag!

Selon la structure de votre site, cela pourrait signifier une visualisation des images nettement plus rapide! Nous testons un site qui utilise Javascript pour charger des images réactives. Le préchargement a entraîné un chargement des images 1,2 seconde plus rapide.

imagesrcset y taille d'image

Pour précharger les images responsives, de nouveaux attributs ont été récemment ajoutés à la élément: imagesrcset y taille d'image. Ils sont utilisés avec et correspond au srcset y les tailles syntaxe utilisée dans <img> élément.

Par exemple, si vous souhaitez précharger une image responsive spécifiée avec:

 

<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" les tailles="50vw" alt="A rad wolf">

 

Vous pouvez le faire en ajoutant ce qui suit à votre HTML :

 

<relier rel="précharge" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" taille d'image="50vw">

 

Cela démarre une demande en utilisant la même logique de sélection de ressources que srcset y les tailles s'appliquera.

Cas d'utilisation

Précharge d'image réactive injectée dynamiquement

Disons que vous chargez dynamiquement des images héroïques dans le cadre d'un diaporama et que vous savez quelle image s'affichera en premier. Dans ce cas, vous voudrez probablement éviter d'attendre le script avant de charger l'image en question, car cela retarderait le moment où les utilisateurs peuvent la voir.

Vous pouvez inspecter ce problème sur un site Web avec une galerie d'images chargée dynamiquement:

  1. Ouvert cet exemple de site Web dans un nouvel onglet.
  2. presse Ctrl + Maj + J (ou alors Commande + Option + J sur Mac) pour ouvrir DevTools.
  3. Clique sur le Rapporter langue.
  4. Dans le Constriction liste déroulante, sélectionnez 3G rapide.
  5. Éteins le Désactiver le cache boîte.
  6. Recharge la page.
exemple-1-avant-6341790
Cette cascade montre que les images ne commencent à se charger qu'après que le navigateur a fini d'exécuter le script, ce qui introduit un retard inutile au moment où l'image est initialement affichée à l'utilisateur.

Utilisant précharge Cela aide ici car l'image commence à se charger tôt et est probablement déjà là lorsque le navigateur a besoin de l'afficher.

exemple-1-après-5070924
Cette cascade montre que la première image a commencé à se charger en même temps que le script, évitant des retards inutiles et entraînant une visualisation plus rapide des images.

Pour voir la différence que fait le préchargement, vous pouvez inspecter la même galerie d'images chargée dynamiquement mais avec la première image préchargée en suivant les étapes du premier exemple.

Une autre façon d'éviter le problème serait d'utiliser un carrousel basé sur la marque et d'avoir le préchargeur de navigateur collecter les ressources nécessaires. Cependant, cette approche n'est pas toujours pratique. (Par exemple, si vous réutilisez un composant existant, qui n'est pas basé sur la marque.)

Préchargement des images d'arrière-plan avec un jeu d'images

Si vous avez des images d'arrière-plan différentes pour différentes densités d'écran, vous pouvez les spécifier dans votre CSS avec le série d'images syntaxe. Le navigateur peut alors choisir celui à afficher en fonction du DPR.

 

background-image: série d'images( "cat.png" 1x, "cat-2x.png" 2x);

 

La syntaxe ci-dessus ignore le fait que les préfixes de fournisseur sont requis pour cette fonctionnalité dans les navigateurs basés sur Chromium et WebKit. Si vous prévoyez d'utiliser cette fonctionnalité, vous devriez envisager d'utiliser Autoprefixer pour y remédier automatiquement.

Le problème avec les images d'arrière-plan CSS est que le navigateur ne les découvre qu'après avoir téléchargé et traité tout le CSS de la page. , qui peut être beaucoup de CSS ...

Vous pouvez inspecter ce problème sur un exemple de site Web avec image de fond réactive.

exemple-2-avant-6150023
Dans cet exemple, le téléchargement de l'image ne commence pas tant que le CSS n'est pas complètement téléchargé, ce qui entraîne un retard inutile dans l'affichage de l'image.

Le préchargement d'images réactif offre un moyen simple et sans piratage de charger ces images plus rapidement.

 

<relier rel=précharge href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">

 

Vous pouvez inspecter le comportement de l'exemple ci-dessus avec Image d'arrière-plan personnalisable préchargée.

exemple-2-après-6171228
Ici, l'image et le CSS commencent à se télécharger en même temps, évitant les retards et entraînant un chargement plus rapide de l'image.

Préchargement d'images réactif en action

Le préchargement de vos images responsives peut les accélérer en théorie, mais que faites-vous en pratique?

Pour répondre, j'ai créé deux copies d'un Boutique de démonstration PWA: celui qui ne précharge pas les imagesy celui qui précharge certains d'entre eux. Étant donné que le site charge paresseusement des images avec JavaScript, il bénéficiera probablement du préchargement de celles qui seront dans la fenêtre initiale.

Cela m'a donné les résultats suivants pour pas de précharge et pour précharge d'image. En regardant les nombres bruts, nous voyons que Start Render est resté le même, l'indice de vitesse s'est légèrement amélioré (273 ms, car les images arrivent plus rapidement, mais elles n'occupent pas une grande partie de la zone de pixels), mais la métrique réelle qui capture la différence est la Dernier héros peint métrique, qui s'est améliorée de 1,2 seconde. 🎉🎉

Bien sûr, rien ne capture la différence visuelle comme une comparaison de pellicule:

exemple-3-3734804
La pellicule montre que les images arrivent beaucoup plus rapidement lorsqu'elles sont préchargées, ce qui se traduit par une expérience utilisateur considérablement améliorée.

Précharge et ?

Si vous connaissez les images réceptives, vous vous demandez peut-être ? «.

Le groupe de travail sur les performances Web parle d'ajouter une précharge équivalente à srcset y les tailles, mais pas le élément, qui répond au cas d'utilisation de la "direction artistique".

Pourquoi ce cas d'utilisation est-il "négligé"?

Bien qu'il y ait un intérêt à résoudre ce cas d'utilisation également, il existe encore un certain nombre de problèmes techniques à résoudre ce qui signifie qu'une solution ici aurait une complexité considérable. En plus de cela, il semble que pour la plupart, le cas d'utilisation puisse être traité aujourd'hui, même si de manière piratée (voir ci-dessous).

Compte tenu de cela, Web Performance WG a décidé d'envoyer srcset d'abord et voir si la demande d'équivalent photo le soutien se fait sentir.

Si vous êtes en condition de pré-charge vous pourrez peut-être utiliser la technique suivante comme solution.

Compte tenu du scénario suivant:

 

<photo>
<source src="small_cat.jpg" moitié="(max-width: 400px)">
<source src="medium_cat.jpg" moitié="(max-width: 800px)">
<img src="huge_cat.jpg">
</photo>

 

Les La logique de l'élément (ou logique de sélection de la source d'image, pour être précis), serait de passer en revue la moitié attributs de la éléments dans l'ordre, recherchez le premier qui correspond et utilisez la ressource jointe.

Étant donné que le préchargement réceptif n'a pas de notion d '"ordre" ou de "première correspondance", les points d'arrêt doivent être traduits en quelque chose comme:

 

<relier rel="précharge" href="small_cat.jpg" as="image" moitié="(max-width: 400px)">
<relier rel="précharge" href="medium_cat.jpg" as="image" moitié="(min-width: 400.1px) and (max-width: 800px)">
<relier rel="précharge" href="large_cat.jpg" as="image" moitié="(min-width: 800.1px)">

 

résumé

Le préchargement d'images réactif nous offre de nouvelles possibilités intéressantes pour précharger des images réactives d'une manière qui n'était auparavant possible que par le biais de hacks. C'est un nouvel ajout important à la boîte à outils du développeur soucieux de la vitesse et nous permet de nous assurer que les images importantes que nous voulons montrer à nos utilisateurs le plus tôt possible seront là quand nous en aurons besoin.