Comment optimiser le chargement des images sur votre site web

Un site Web rempli d'images peut constituer un énorme goulot d'étranglement pour les performances d'un site Web. C’est ainsi que j’ai optimisé le chargement des images pour offrir une meilleure expérience utilisateur.

Avoir un site Web plein de belles images est génial et peut être un énorme goulot d’étranglement pour le chargement de la page. Je vois souvent des sites Web qui chargent des images pour plusieurs mégaoctets, simplement pour afficher un curseur sur leur page d'accueil. Imaginez-vous sur une connexion cellulaire 3G lente chargeant ce site Web. Cela prendrait des années à charger et les utilisateurs quitteraient votre site Web. Un bon moyen de tester cela sur votre site Web actuel consiste à sélectionner la régulation de réseau dans Chrome Devtools.

Problème

Le problème ici est que souvent le document de site est déjà chargé alors que les images sont toujours en cours de chargement. Cela se traduit par des sections vides sur votre page où une image se charge lentement. Ce n'est pas ce que vous voulez.

Dans l'exemple ci-dessous, j'ai créé un site Web simple contenant une image d'arrière-plan de 4,8 Mo. Comme vous pouvez le voir, le DOM est chargé en 1.14 secondes. Donc, fondamentalement, l'utilisateur voit le contenu après 1,14 seconde. Plutôt bien pour un réseau 3G. Toutefois, il faut 27,32 secondes à l'image d'arrière-plan pour se charger lorsque l'utilisateur voit certaines parties des images se charger. Il se peut que l'utilisateur ait déjà quitté votre site Web à ce moment-là.

Un simple site Web optimisé avec une image d'arrière-plan de 4,8 Mo sur un réseau cellulaire 3G rapide

Il semble que non seulement votre expérience utilisateur soit en baisse. En 2010, Google a déclaré que la vitesse de la page était un facteur dans leur algorithme de classement. Je pense que cela est devenu un facteur de plus en plus important au fil des ans. Google semble investir beaucoup pour informer les développeurs de la performance des pages dans leurs conférences.

Solution

Alors, comment pouvons-nous surmonter ce problème? Eh bien, la première chose à faire est de compresser l’image d’arrière-plan à l’aide de divers outils disponibles sur Internet. C'est une victoire facile et réduira le temps de chargement à environ dix secondes. Cela semble être un pas énorme, mais dix secondes, c’est encore beaucoup trop.

La prochaine étape consisterait à charger une image dite "espace réservé" avant de charger l'image d'origine. Cet "espace réservé" est une variante à basse résolution de l'image d'origine. Lorsque nous avons créé cette image, nous avons réduit sa résolution de 7372x4392 pixels à 20x11 pixels. Cela se traduit par une taille d'image de 4,8 Mo à 900 octets.

Cette réduction de taille entraîne un temps de chargement de 550 millisecondes au lieu de 10 secondes. Mais maintenant, nous avons une image floue basse résolution comme arrière-plan. Ceci est parfait pour les premières secondes de chargement de la page, mais nous souhaitons offrir à l'utilisateur la meilleure expérience de notre image d'arrière-plan d'origine.

Pour ce faire, nous voulons d'abord charger l'image basse résolution et déjà charger l'image haute résolution asynchrone en arrière-plan. Une fois que l'image haute résolution est chargée, nous souhaitons changer la résolution basse avec l'image haute résolution.

Pour ce faire, j'ai utilisé le javascript suivant que j'ai chargé avant la balise end body. De cette façon, notre script ne bloque pas le rendu du contenu de notre page.

(() => {
  'use strict';
  // La page est chargée
  objets const = document.getElementsByClassName ('asyncImage');
  Array.from (objets) .map ((item) => {
    // Commencer à charger l'image
    const img = new Image ();
    img.src = item.dataset.src;
    // Une fois l'image chargée, remplace le src de l'élément HTML
    img.onload = () => {
      item.classList.remove ('asyncImage');
      Renvoie item.nodeName === 'IMG'?
        item.src = item.dataset.src:
        item.style.backgroundImage = `url ($ {item.dataset.src})`;
    };
  });
}) ();

La fonction javascript analyse le DOM pour rechercher toute classe ‘asyncImage’. Après cela, toutes les images fournies dans l'attribut data-src seront chargées sur ces éléments. Une fois qu'une image est chargée, elle remplace soit la source de la balise d'image, soit l'image d'arrière-plan d'un élément IMG différent.

...

ou

Beau lever de soleil paysage

Comme le script supprime la classe de l'élément une fois l'image modifiée, nous pouvons effectuer des transitions CSS impressionnantes si nous le souhaitons. Par exemple, une transition d’entrée / sortie qui entraîne un fondu une fois que l’image est remplacée.

Conclusion

Alors qu'est ce qu'on a fait? Nous avons amélioré notre expérience utilisateur, accéléré le chargement de notre site Web, le rendu plus accessible pour les utilisateurs ne disposant pas de connexion rapide et éventuellement amélioré notre classement dans Google. C’est une grande amélioration pour un si petit changement.

La nouvelle situation dans laquelle nous chargeons d'abord une image basse résolution puis la remplaçons par l'image d'origine

Comme vous pouvez le constater, nous chargeons une image de marque de réservation en 570ms. Une fois que cela est chargé, l'utilisateur voit la version basse résolution floue de l'image d'origine. Une fois l'image originale chargée, elle remplacera l'image basse résolution.

Nous n’avons plus de problèmes de rendu d’image étranges et nous donnons à l’utilisateur une première peinture rapide.

Voir un exemple de travail ici

Images paresseuses

Si vous souhaitez améliorer encore plus le processus de chargement des images, vous pouvez envisager de charger vos images en différé.

Le chargement différé est une technique dans laquelle les images non directes dans la fenêtre d'un utilisateur ne sont pas chargées. Une fois que l'image se rapproche de la bordure de la fenêtre, elle est chargée.

L'avantage de cela est de réduire le nombre d'octets à charger lors du chargement initial de la page. Souvent, il n'est pas nécessaire que toutes les images soient affichées dans la fenêtre d'affichage de l'utilisateur. Une fois que l'utilisateur a commencé à faire défiler l'écran, nous avons besoin de plus en plus de contenu pouvant être chargé. Une bonne approche pour implémenter ce comportement consiste à examiner Intersection Observer.

J'espère que vous avez apprécié la lecture de cet article et que vous êtes enthousiaste à l'idée de mettre en œuvre cette amélioration vous-même :). Quelques applaudissements signifieraient beaucoup.