Guide essentiel pour améliorer les éléments vitaux Web de base à l'aide du chargement différé et de BlurHash

La vitesse du site Web est devenue de plus en plus importante ces jours-ci, car des études montrent que 70% des consommateurs affirment que la vitesse des pages a un impact sur leurs décisions d'achat en ligne. Mais au-delà de l'expérience du consommateur, Google a récemment mis à jour son rapport Core Web Vitals (CWV) et fourni des conseils sur les mesures les plus importantes concernant les performances des pages. Cela signifie que la qualité de l'expérience utilisateur et les performances de la page sont désormais de plus en plus prises en compte lorsqu'il s'agit de son algorithme de recherche.

Un bref récapitulatif : Core Web Vitals mesure trois aspects clés de l'expérience Web : le chargement, l'interactivité et la stabilité visuelle. L'un des moyens les plus efficaces d'améliorer Core Web Vitals (CWV) - et le référencement - consiste à optimiser les actifs d'image. Il existe plusieurs façons d'y parvenir, notamment une compression d'image appropriée, un redimensionnement et une conversion d'image de nouvelle génération.

En plus de ces trois techniques, vous verrez probablement Différer les images hors écran, également appelée chargement différé, comme l'une des opportunités d'amélioration de votre analyse PageSpeed Insights . L'utilisation d'espaces réservés, tels que BlurHash, est également une excellente option pour améliorer les temps de chargement perçus et offrir une meilleure expérience utilisateur lorsqu'une connexion ou un site tarde à charger des images.

Qu'est-ce que le Lazy Load ?

Imaginez une page de commerce électronique avec 100 photos haute résolution de chaussures. Si un navigateur charge toutes les photos en même temps, certaines vers le bas de la page peuvent apparaître avant que vous ne puissiez les faire défiler, tandis que les photos de votre fenêtre d'affichage peuvent ne pas le faire, ce qui peut créer une mauvaise expérience utilisateur.

Le chargement paresseux est la technique qui diffère le chargement des images hors écran jusqu'à ce que le visiteur défile et que les images entrent dans la fenêtre d'affichage. Il permet de charger moins d'images à un moment donné et accélère le temps de chargement de chaque image, ce qui peut améliorer la plus grande peinture de contenu.

Le chargement différé peut également améliorer le premier délai d'entrée (FID). Le FID est le temps nécessaire à une page pour répondre à la première interaction de l'utilisateur, comme un clic. En retardant stratégiquement le chargement de composants volumineux tels que les images, le site Web peut traiter JavaScript et répondre plus rapidement aux interactions. Dans l'exemple ci-dessous, pour nytimes.com , le jour de l'analyse, il aurait pu améliorer la vitesse de la page de 1,5 seconde s'il avait implémenté le chargement différé.

Comment implémenter le chargement paresseux

La façon dont vous implémentez le chargement différé dépend de votre base de code et des navigateurs que vous prenez en charge. En plus de loading="lazy", un attribut HTML pris en charge par Chrome, les développeurs peuvent utiliser JavaScript et/ou API d'observateur d'intersection demandes. Le tableau suivant de caniuse.com montre quels navigateurs prennent en charge l'attribut de chargement différé HTML :

Cependant, compte tenu de la rapidité avec laquelle les navigateurs évoluent et de leurs capacités uniques, les développeurs envisagent de plus en plus d'utiliser le JavaScript lazysizes.js comme une bonne pratique. Dans la vidéo suivante, nos partenaires de Cantilever démontrent et comparent les implémentations de loading=“lazy” et lazysizes.js.

Meilleure pratique : lazysizes.js + imgix.js

L'utilisation de lazysizes.js avec imgix.js est un excellent moyen de combiner les avantages de l'optimisation des images imgix et du chargement différé. Voici un exemple de la façon dont cela se fait en tant que méta-propriété :

<tête>

<meta property="ix:srcAttribute" content="data-src">

<meta property="ix:srcsetAttribute" content="data-srcset">

<meta property="ix:sizesAttribute" content="data-sizes">

</head>

Et voici un exemple de la façon dont c'est fait en JavaScript :

imgix.config.srcAttribute = 'data-src';

imgix.config.srcsetAttribute = 'data-srcset' ;

imgix.config.sizesAttribute = 'data-sizes';

Utiliser des espaces réservés avec le chargement différé

Le risque de chargement paresseux est qu'il pourrait augmenter l'instabilité de la mise en page, entraînant un score CLS plus mauvais. Par exemple, lorsqu'un visiteur défile rapidement vers le bas et commence à lire une légende d'image, l'image peut soudainement apparaître, poussant la légende hors de vue. La façon d'atténuer ce problème est d'utiliser des espaces réservés de mauvaise qualité ou BlurHash , qui occupera un cadre jusqu'à ce qu'il soit approprié de charger une version entièrement détaillée.

Une fois que vous avez appliqué le code BlurHash à votre image, l'espace réservé résultant ressemblera à ceci :

Utiliser BlurHash comme espace réservé

BlurHash est un algorithme qui vous permet de créer une version compacte d'un espace réservé d'image. L'algorithme crée une chaîne de caractères qui encode une représentation floue de l'image, la quantité de caractères étant déterminée par la qualité de l'image. La chaîne est suffisamment courte pour que vous puissiez la servir directement dans le balisage de votre page, puis la chaîne peut être décodée dans l'image floue, sans avoir à récupérer et à télécharger un fichier image.

L'un des principaux avantages de BlurHash est que vous pouvez convertir des fichiers image volumineux en une plus petite quantité de données afin qu'une représentation floue de l'image apparaisse pendant le chargement du fichier d'origine. Un ingénieur chez Wolt a eu l'idée de BlurHash tout en essayant de trouver une meilleure solution pour le chargement des images sur une connexion Internet plus lente.

Comment utiliser la fonction BlurHash

Pour créer une image floue, ajoutez simplement fm=blurhash à n'importe quelle image pour obtenir la chaîne BlurHash. Une fois que vous avez la chaîne BlurHash, vous pouvez l'utiliser dans le composant BlurHash. Le composant BlurHash est responsable du décodage du hachage en une image pouvant être affichée.

Dans cet exemple particulier, le composant React BlurHash génère un élément canvas dans le balisage final. Remarque : le balisage généré peut différer légèrement en fonction de la bibliothèque ou du décodeur de framework utilisé.

importer './App.css' ;

importer Imgix depuis "react-imgix" ;

importer { Blurhash } depuis "react-blurhash" ;

fonction App() {

revenir (

<div className="App">

<section className="App-header">

<Blurhash

hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"

largeur={600}

hauteur={400}

/>

<Imgix

src="https://assets.imgix.net/example-images/puffins.jpg"

largeur={600}

hauteur={400}

/>

</section>

</div>

);

}

Une fois que vous avez appliqué le code BlurHash à votre image, l'espace réservé résultant ressemblera à ceci :

Incluez la chaîne BlurHash avec votre balisage au moment de la construction pour vous assurer que les utilisateurs voient immédiatement la version floue de l'image.

Les plats à emporter

Vos métriques CWV sont plus importantes que jamais, mais la bonne nouvelle est qu'il existe des moyens rapides et efficaces de les améliorer. Combiner le chargement paresseux avec l'optimisation des images et utiliser des espaces réservés efficaces comme BlurHash sont deux façons d'obtenir des résultats éprouvés. Vous pouvez facilement mettre en œuvre ces techniques en utilisant imgix, consultez notre Documentation ou alors essai gratuit .