Optimisation du téléchargement d'images

Bonjour, Habr! Je vous présente la traduction de l'article «Comment optimiser le chargement des images sur votre site» .

Si le site contient beaucoup de belles images, c'est très bien, mais elles peuvent dégrader considérablement le temps de chargement et, par conséquent, le référencement en souffrira et de nombreux utilisateurs fermeront le site avant son chargement. Il arrive souvent que plusieurs mégaoctets d'images soient téléchargés simplement pour afficher le curseur sur la page principale.

Imaginez que vous accédez à un tel site via un Internet mobile lent, cela peut prendre beaucoup de temps et la plupart des utilisateurs dans cette situation fermeront simplement votre site avant qu'il ne soit téléchargé. Un bon moyen de tester cela est de profiter de la possibilité de limiter la vitesse d'Internet via Chrome Devtools .

Le problème

Le problème est qu'il arrive souvent que le contenu lui-même soit déjà chargé et que les images soient toujours en cours de chargement. En conséquence, l'utilisateur peut voir l'espace vide où les images se chargent lentement. Ce n'est clairement pas ce que vous aimeriez.

Dans l'exemple ci-dessous, j'ai créé un site Web simple avec une image d'arrière-plan qui pèse 4,8 Mo. Comme vous pouvez le voir, le DOM a démarré en 1,14 seconde, c'est-à-dire en fait, l'utilisateur voit le contenu après 1,14 seconde, ce qui est plutôt bon pour Internet 3G. Cependant, l'image d'arrière-plan se charge en 27,32 secondes. Pendant ce temps, l'utilisateur peut déjà quitter votre site.



Et non seulement l'expérience utilisateur en souffre. En 2010, Google a annoncé que la vitesse de téléchargement était l'un des facteurs de son algorithme de classement et je pense qu'à l'avenir ce facteur deviendra de plus en plus important.

Solution

Alors, comment résoudre ce problème? Eh bien, pour commencer, nous pouvons simplement compresser notre image de fond à l'aide de divers outils. Par exemple, TinyPNG , ImageOptimizer ou JPEGmini . Ce sera une victoire facile et réduisez le temps de démarrage à ~ 10 secondes. Et même si cela ressemble à une énorme étape dans la décision, mais 10 secondes, c'est encore trop.

L'étape suivante peut être de télécharger l'image du talon avant de charger l'image d'origine. Un talon est une version de l'image d'origine, mais avec une faible résolution. Lorsque nous créons une telle image, nous réduisons la résolution de 7372x4392 pixels à 20x11. En conséquence, la taille de l'image est réduite de 4,8 Mo à 900 octets.



Cela réduira la vitesse de téléchargement de 10 secondes à 550 millisecondes. Mais maintenant, comme arrière-plan, nous avons une image floue à basse résolution. C'est une excellente solution pendant que la page se charge pendant les premières secondes, mais nous voulons toujours montrer aux utilisateurs l'image originale à haute résolution.

Pour ce faire, nous devrons d'abord télécharger l'image basse résolution, puis seulement, de manière asynchrone en arrière-plan, charger l'original haute résolution, et lorsque la version haute résolution sera chargée, nous pourrons la mettre à la place de l'image tronquée. Pour cela, j'ai utilisé le code ci-dessous auparavant.

(() => { 'use strict'; // Page is loaded const objects = document.getElementsByClassName('asyncImage'); Array.from(objects).map((item) => { // Start loading image const img = new Image(); img.src = item.dataset.src; // Once image is loaded replace the src of the HTML element img.onload = () => { item.classList.remove('asyncImage'); return item.nodeName === 'IMG' ? item.src = item.dataset.src : item.style.backgroundImage = `url(${item.dataset.src})`; }; }); })(); 

Ce code recherche des éléments avec la classe asyncImage , après quoi il charge toutes les images spécifiées dans l'attribut data-src , et dès que l'image est chargée, il remplace src pour l'élément <img> , et pour les éléments restants définit l'image d'arrière-plan via css.

 <div class="asyncImage" data-src="/images/background.jpg"> ... </div> 

ou

 <img class="asyncImage" src="/images/background-min.jpg" data-src="/images/background.jpg" alt="Beautiful landscape sunrise"> 

Puisque le script supprime la classe de l'élément après le chargement de l'image, nous pouvons faire de belles animations en utilisant CSS si vous le souhaitez. Par exemple, une animation simplifiée fera disparaître le stub lorsque l'image sera remplacée.

Conclusion

Alors, qu'avons-nous réalisé? Nous avons amélioré l'expérience utilisateur, accéléré le chargement du site, le rendu plus accessible aux utilisateurs sans Internet rapide et éventuellement amélioré notre classement sur Google. Ce sont d'énormes améliorations pour un si petit changement.



Comme vous pouvez le voir, nous téléchargeons le talon pendant 570 millisecondes, dès qu'il se charge, l'utilisateur verra une version basse résolution de notre image d'origine, et dès que l'image originale se chargera, il remplacera la version basse résolution.

Voir un exemple de travail ici.

Chargement d'images paresseuses

Si vous voulez aller plus loin et améliorer encore plus le chargement des images, il peut être utile d'utiliser le chargement d'images paresseuses.

Le chargement différé est une technique où les images en dehors de la zone visible de la page ne sont pas chargées jusqu'à ce que l'image s'approche du bord de la zone visible.

Son avantage est que moins de données seront chargées lors du chargement initial, car très souvent seule une petite partie des images est affichée dans la zone visible de la page, et le reste peut être téléchargé au fur et à mesure du défilement de l'utilisateur. Un observateur d'intersection est le mieux adapté pour mettre en œuvre cela.