La vitesse du site Web est devenue de plus en plus importante ces jours-ci, car des études montrent que   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. 70% des consommateurs  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   . L'utilisation d'espaces réservés, tels que   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. analyse PageSpeed Insights BlurHash,  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   , 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é.  nytimes.com  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  demandes. Le tableau suivant de  montre quels navigateurs prennent en charge l'attribut de chargement différé HTML :    API d'observateur d'intersection   caniuse.com 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.   https://youtu.be/66FYrn3JDJo?embedable=true  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  , qui occupera un cadre jusqu'à ce qu'il soit approprié de charger une version entièrement détaillée.  BlurHash  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é  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.  BlurHash  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  tout en essayant de trouver une meilleure solution pour le chargement des images sur une connexion Internet plus lente.   a eu l'idée de BlurHash   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  ou alors  .   Documentation   essai gratuit

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps