Addy Osmani est un directeur technique travaillant sur Google Chrome. Son équipe se concentre sur les outils et les cadres de vitesse, aidant à garder le Web rapide. Consacré au… En savoir plus sur Addy ↬
Les images ont également été un élément clé du Web. Ils communiquent des idées instantanément, mais ils sont aussi beaucoup plus lourds que du texte à charger. Cela signifie qu'il est essentiel de bien les charger et de les afficher, si vous voulez donner à vos utilisateurs une première impression fantastique. Un extrait du nouveau livre d'Addy (consultez également un aperçu PDF gratuit ).
L'humble élément a acquis quelques super pouvoirs au fil des ans. Compte tenu de son importance pour l'optimisation des images sur le Web, voyons ce qu'il peut faire et comment il peut contribuer à améliorer l'expérience utilisateur et les Core Web Vitals . J'aborderai l'optimisation d'image plus en détail dans le nouveau livre de Smashing Magazine sur l'optimisation d'image .
Évitez les images provoquant des conflits de réseau avec d'autres ressources critiques comme CSS et JS . Bien qu'elles ne bloquent pas le rendu, elles peuvent avoir un impact indirect sur les performances de rendu.
Remarque : Composants d'image modernes basés sur comme Next.js (pour React) et Nuxt image (pour Vue) essaie d'introduire autant de ces concepts que possible par défaut. Nous en parlerons plus tard. Vous pouvez bien sûr également le faire manuellement en utilisant directement l'élément . Si vous utilisez 11ty pour vos sites statiques, essayez le modèle de blog haute performance 11ty .
Quel est l'impact des images sur l'expérience utilisateur et les éléments vitaux du Web?
Vous avez peut-être entendu parler de Core Web Vitals ( CWV). Il s'agit d'une initiative de Google visant à partager des conseils unifiés pour les signaux de qualité qui peuvent être essentiels pour offrir une excellente expérience utilisateur sur le Web. CWV fait partie d'un ensemble de signaux d'expérience de page La recherche Google évaluera pour le classement. Les images peuvent avoir un impact sur la CWV de plusieurs façons.
Les images peuvent avoir un impact sur les éléments vitaux du Web de plusieurs manières. Par exemple. LCP mesure le moment où le plus grand élément de contenu (images, texte) dans la fenêtre d'un utilisateur, comme l'une de ces images, devient visible. ( Grand aperçu )
Dans de nombreuses expériences Web modernes, les images ont tendance à être le plus grand élément visible à la fin du chargement d'une page. Ceux-ci incluent des images de héros, des images de carrousels, des histoires et des bannières. Largest Contentful Paint (LCP) est une métrique Core Web Vitals qui mesure le moment où le plus grand élément de contenu (images, texte) dans la fenêtre d'affichage d'un utilisateur, comme l'une de ces images, devient visible.
Cela permet un navigateur pour déterminer quand le contenu principal de la page a fini de s'afficher . Lorsqu'une image est le plus grand élément de contenu, la lenteur du chargement de l'image peut avoir un impact sur LCP. En plus d'appliquer la compression d'image (par exemple en utilisant Squoosh Sharp ImageOptim ou une image CDN ), et en utilisant un format d'image moderne , vous pouvez modifier l'élément pour afficher la version responsive la plus appropriée d'une image ou la charger différemment.
La plus grande peinture de contenu affichée dans la bande de film WebPageTest. ( Grand aperçu )
Les changements de disposition peuvent distraire les utilisateurs. Imaginez que vous ayez commencé à lire un article quand tout d'un coup des éléments se déplacent autour de la page, vous déconcertant et vous obligeant à retrouver votre place. Cumulative Layout Shift (CLS, une métrique Core Web Vitals) mesure l'instabilité du contenu. Les causes les plus courantes de CLS incluent les images sans dimensions (voir ci-dessous) qui peuvent pousser le contenu vers le bas lorsqu'elles se chargent et se mettent en place; les ignorer signifie que le navigateur ne pourra peut-être pas réserver suffisamment d'espace avant leur chargement.
Il est possible que les images bloquent la bande passante et le processeur d'un utilisateur lors du chargement de la page. Ils peuvent entraver la charge des ressources critiques, en particulier sur les connexions lentes et les appareils mobiles bas de gamme, entraînant une saturation de la bande passante. Premier délai d'entrée (FID) est une métrique Core Web Vitals qui capture la première impression d'un utilisateur sur l'interactivité et la réactivité d'un site. En réduisant l'utilisation du CPU du thread principal, le FID peut également être réduit.
Lighthouse
Dans ce guide, nous utiliserons Lighthouse pour identifier les opportunités d'améliorer les Core Web Vitals. Lighthouse est un outil automatisé open source pour améliorer la qualité des pages Web. Vous pouvez le trouver dans la suite d'outils de débogage Chrome DevTools et l'exécuter sur n'importe quelle page Web, publique ou nécessitant une authentification. Vous pouvez également trouver Lighthouse dans PageSpeed Insights CI et WebPageTest .
Gardez à l'esprit que Lighthouse est un outil de laboratoire. Bien que ce soit parfait pour examiner les possibilités d'améliorer votre expérience utilisateur, essayez toujours de consulter données du monde réel pour une image complète de ce que voient les utilisateurs réels.
Les bases
Pour placer une image sur une page Web, nous utilisons l'élément . C'est un élément vide – il n'a aucune balise de fermeture – nécessitant au moins un attribut pour être utile: src la source. Si une image s'appelle donut.jpg et qu'elle existe dans le même chemin que votre document HTML, elle peut être incorporée comme suit:
Pour nous assurer que notre image est accessible, nous ajoutons le alt attribut . La valeur de cet attribut doit être une description textuelle de l'image et est utilisée comme alternative à l'image lorsqu'elle ne peut pas être affichée ou vue; par exemple, un utilisateur accédant à votre page via un lecteur d'écran. Le code ci-dessus avec un alt spécifié se présente comme suit:
Ensuite, nous ajoutons les attributs width et height ] pour spécifier la largeur et la hauteur de l'image, également appelées dimensions de l'image. Les dimensions d'une image peuvent généralement être trouvées en regardant ces informations via l'explorateur de fichiers de votre système d'exploitation ( Cmd + I sur macOS).
Lorsque width et height sont spécifiés sur une image, le navigateur sait combien d'espace réserver pour l'image jusqu'à ce qu'elle soit téléchargée. Oublier d'inclure les images Les dimensions peuvent entraîner des changements de mise en page car le navigateur ne sait pas combien d'espace l'image aura besoin.
Les navigateurs modernes définissent désormais le rapport hauteur / largeur par défaut des images en fonction de la largeur d'une image et height attributs, il est donc utile de les définir pour éviter de tels changements de disposition.
Identifier le plus grand élément de peinture de contenu
Lighthouse dispose d'un audit «Élément de peinture de plus grand contenu» qui identifie l'élément qui était le plus grand peinture pleine de contenu. Le survol de l'élément le mettra en surbrillance dans la fenêtre principale du navigateur.
Pour identifier la plus grande peinture de contenu, repérez le LCP dans la métrique Lighthouse. Il apparaît également en survol dans le panneau Performances de DevTools . ( Grand aperçu )
Si cet élément est une image, ces informations sont un indice utile pour optimiser le chargement de cette image. Vous pouvez également trouver ce Signet LCP par Annie Sullivan utile pour identifier rapidement l'élément LCP avec un rectangle rouge en un seul clic.
Remarque: L'élément de peinture le plus grand contenu candidat peut changer via le chargement de la page. Pour cette raison, il est utile non seulement de regarder ce que les outils synthétiques comme Lighthouse peuvent dire, mais aussi de consulter ce que vrais utilisateurs voient.
Survol d'une image dans Chrome DevTools Elements ] affichera les dimensions de l'image ainsi que la taille intrinsèque de l'image.
Le survol d'une image dans le panneau Chrome DevTools 'Elements' affichera les dimensions de l'image ainsi que le la taille intrinsèque de l'image. ( Grand aperçu )
Identification des décalages de mise en page à partir d'images sans dimensions
À limite Décalage cumulé de mise en page causé par des images sans dimensions, incluez les attributs de largeur et de hauteur sur vos images et des éléments vidéo. Cette approche garantit que le navigateur peut allouer la bonne quantité d'espace dans le document pendant le chargement de l'image. Lighthouse mettra en évidence les images sans largeur ni hauteur:
C'est une bonne idée de toujours inclure les attributs de taille largeur et hauteur sur vos images et éléments vidéo. ( Grand aperçu )
Qu'en est-il du changement de résolution d'image? Une norme nous permet uniquement de fournir un seul fichier source au navigateur. Mais avec les attributs srcset et tailles nous pouvons fournir de nombreuses images sources supplémentaires (et des indices) afin que le navigateur puisse choisir la plus appropriée. Cela nous permet de fournir des images plus petites ou plus grandes.
L'attribut srcset définit l'ensemble d'images parmi lesquelles le navigateur peut sélectionner, ainsi que la taille de chaque image. Chaque chaîne d'image est séparée par une virgule et comprend:
un nom de fichier source ( donut-400w.jpg );
un espace;
et la largeur intrinsèque de l'image spécifiée en pixels ( 400w ), ou un descripteur de densité de pixels ( 1x 1,5x 2x etc.).
L'attribut tailles spécifie un ensemble de conditions, telles que les largeurs d'écran, et quelle taille d'image est préférable de sélectionner lorsque ces conditions sont remplies. Ci-dessus, ( max-width: 640px ) est une condition de support demandant «si la largeur de la fenêtre est de 640 pixels ou moins», et 400px est la largeur de la fente, l'image est va remplir lorsque la condition du support est vraie. Cela correspond généralement aux points d'arrêt réactifs de la page.
Ratio de pixels de l'appareil (DPR) / plafonnement de la densité de pixels
Le ratio de pixels de l'appareil (DPR) représente la façon dont un pixel CSS est converti en pixels physiques sur un écran matériel. Les écrans haute résolution et rétine utilisent plus de pixels physiques pour représenter les pixels CSS pour des images plus nettes et plus détaillées.
L'œil humain peut ne pas être capable de distinguer la différence entre les images qui sont au format 2x -3x DPR par rapport à une résolution encore plus élevée. La diffusion d'images DPR trop élevées est un problème courant pour les sites exploitant et une suite de tailles d'image.
Twitter plafonne leur fidélité d'image à 2x, ce qui se traduit par des temps de chargement d'image chronologique 33% plus rapides. ( Grand aperçu )
Il peut être possible d'utiliser le plafonnement DPR pour fournir à vos utilisateurs une image avec une fidélité 2x ou 3x afin d'éviter les charges utiles d'image volumineuses. Twitter a plafonné leur fidélité d'image à 2x, ce qui se traduit par des temps de chargement d'image chronologique 33% plus rapides. Ils ont constaté que 2x était un point idéal pour les deux bonnes performances gagnantes sans dégradation des mesures de qualité.
Remarque: Cette approche du plafonnement DPR n'est actuellement pas possible si vous utilisez des descripteurs «w». [19659082] différence entre les images à l'échelle 1x, 2x, 3x. « /> Éléments de Twitter pour les échelles 1 ×, 2 × et 3 ×. ( Grand aperçu )
Identifier les images qui peuvent être mieux dimensionnées
Lighthouse inclut un certain nombre d'audits d'optimisation d'image pour vous aider à comprendre si vos images pourraient être mieux compressées, livrées dans une image moderne plus optimale
Notes de Lighthouse sur des images de taille appropriée. ( Grand aperçu )
Même les images réactives (c'est-à-dire dimensionnées par rapport à la fenêtre) doivent avoir une largeur et une hauteur définies. Dans les navigateurs modernes, ces attributs établissent un rapport hauteur / largeur qui aide à éviter les changements de mise en page, même si les tailles absolues sont remplacées par CSS.
Responsive Breakpoints vous aide à déterminer les points d'arrêt d'image optimaux et à générer du code srcset pour les images réactives. ( Grand aperçu )
Lorsque je n'utilise pas de CDN ou de framework d'image, j'aime utiliser responsivebreakpoints.com pour déterminer les points d'arrêt d'image optimaux et générer le code srcset pour mon images responsive.
Servir des formats d'image modernes
La direction artistique nous permet de servir différentes images en fonction de l'affichage de l'utilisateur. Alors que les images responsives chargent différentes tailles de la même image, la direction artistique peut charger des images très différentes en fonction de l'affichage.
Le navigateur peut choisir le format d'image à afficher à l'aide de l'élément . L'élément prend en charge plusieurs éléments et un seul élément qui peuvent référencer des sources pour différents formats, y compris AVIF, WebP et éventuellement JPEG XL.
Dans cet exemple, le navigateur commencera à analyser les sources et s'arrêtera lorsqu'il aura trouvé la première correspondance prise en charge. Si aucune correspondance n'est trouvée, le navigateur charge la source spécifiée dans comme solution de secours. Cette approche fonctionne bien pour servir tout format d'image moderne non pris en charge dans tous les navigateurs. Soyez prudent lorsque ordonne les éléments car l'ordre est important. Ne placez pas les sources modernes après les anciens formats, mais placez-les plutôt avant. Les navigateurs qui le comprennent les utiliseront et ceux qui ne le feront pas passeront à des frameworks plus largement pris en charge.
Comprendre la myriade d'options de format d'image disponibles aujourd'hui peut être un processus déroutant, mais vous pouvez trouver la comparaison de Cloudinary de formats d'image modernes utile:
Vous pouvez également trouver le sélecteur de paramètres de qualité AVIF et WebP de Malte Ubl utile pour sélectionner les paramètres de qualité correspondant à la qualité d'un JPEG à un paramètre de qualité donné.
Identifier les images qui pourraient être diffusées dans un format plus moderne
Lighthouse (ci-dessous) met en évidence les économies potentielles liées à la diffusion d'images dans un format de nouvelle génération.
Remarque: Nous avons un numéro ouvert pour mieux mettre en évidence les économies potentielles d'AVIF dans Lighthouse.
Vous pouvez également trouver un intérêt à utiliser des outils d'audit d'image tels que l'outil d'analyse d'image de Cloudinary pour un examen plus approfondi des possibilités de compression d'image pour toutes les images d'une page. En prime, vous pouvez télécharger des versions compressées des formats d’image suggérés tels que WebP:
J'aime aussi utiliser Squoosh pour sa prise en charge des formats de pointe, tels que JPEG XL, car il offre un moyen à faible friction d'expérimenter les formats modernes en dehors d'une CLI ou d'un CDN.
Squoosh prend en charge les formats de pointe, tels que JPEG XL, mais aussi AVIF. ( Grand aperçu )
Il y a plusieurs façons d'aborder les problèmes de dimensionnement car le srcset et les tailles sont tous deux utilisables sur et . en cas de doute, utilisez avec srcset / tailles pour des images uniques qui ont une mise en page simple. Utilisez pour servir plusieurs formats, une mise en page complexe et une direction artistique.
Chrome DevTools vous permet de désactiver les formats d'image modernes ( démo ), comme WebP, AVIF ou JPEG XL, pour tester différentes solutions de secours pour dans le panneau Rendu :
Chrome DevTools vous permet de tester différentes solutions de secours pour WebP, AVIF ou JPEG XL dans le panneau Rendu. ( Grand aperçu )
CanIUse dispose des derniers détails de prise en charge du navigateur pour WebP AVIF et JPEG XL .
Contenu Négociation
Une alternative à la gestion manuelle de la sélection de format d'image en utilisant consiste à s'appuyer sur l'en-tête d'acceptation . Celui-ci est envoyé par le client, ce qui permet au serveur de fournir un format d'image qui convient le mieux à l'utilisateur. Les CDN tels que Akamai Cloudinary et Cloudflare le prennent en charge.
Image Lazy Loading
Qu'en est-il des images hors écran qui ne sont pas visibles tant qu'un utilisateur ne fait pas défiler l'écran en bas de la page? Dans l'exemple ci-dessous, toutes les images de la page sont «chargées avec impatience» (la valeur par défaut dans les navigateurs aujourd'hui), ce qui oblige l'utilisateur à télécharger 1,1 Mo d'images. Cela peut nuire aux plans de données des utilisateurs en plus d'affecter les performances.
Une galerie d'images chargeant avec impatience toutes les images dont elle a besoin à l'avance, comme le montre le Chrome DevTools Network . 1,1 Mo d'images ont été téléchargées, bien que seul un petit nombre soit visible lorsque l'utilisateur arrive pour la première fois sur la page. ( Grand aperçu )
En utilisant l'attribut de chargement sur nous pouvons contrôler le comportement du chargement d'image. loading = "lazy" charge paresseusement les images, reportant leur chargement jusqu'à ce qu'elles atteignent une distance calculée de la fenêtre. loading = "eager" charge les images immédiatement, quelle que soit leur visibilité dans la fenêtre. eager est la valeur par défaut, il n'est donc pas nécessaire d'ajouter explicitement (c'est-à-dire, utilisez simplement pour un chargement hâtif).
Voici un exemple de chargement paresseux d'un avec un source unique:
Avec le chargement paresseux natif l'exemple précédent ne télécharge désormais qu'environ 90 Ko d'images! Le simple fait d'ajouter loading =" lazy " à nos images hors écran a un impact énorme. Dans l'idéal, vous voulez charger paresseusement toutes les images présentes en dehors de la fenêtre initiale et l'éviter pour tout ce qui se trouve dans la fenêtre initiale.
Une galerie d'images utilisant une image native paresseuse -chargement d'images en dehors de la fenêtre. Comme on le voit dans le panneau Chrome DevTools Network la page ne télécharge désormais que le minimum d'images dont les utilisateurs ont besoin à l'avance. Le reste des images est chargé au fur et à mesure que les utilisateurs font défiler vers le bas la page. ( Grand aperçu ) [19659026] Le chargement paresseux fonctionne également avec des images qui incluent srcset :
En plus de travailler sur srcset l'attribut loading fonctionne également sur inside :
<! - Images à chargement différé dans .
est celui qui pilote le chargement de l'image, donc et srcset tombent de cela ->
La section Lighthouse Opportunities répertorie toutes les images hors écran ou masquées sur une page qui peuvent être chargées paresseusement, ainsi que les économies potentielles qui en découlent.
La section Lighthouse Opportunities répertorie toutes les images hors écran ou cachées sur une page qui peuvent être chargées paresseusement ainsi que les économies potentielles qui en découlent. ( Grand aperçu )
Voir CanIUse.com pour la dernière prise en charge du navigateur pour le chargement paresseux d'images natives.
Demandez votre image tôt
Aidez le navigateur à découvrir votre LCP l'image tôt afin qu'elle puisse la récupérer et la restituer avec un délai minimal. Dans la mesure du possible, essayez de résoudre ce problème en minimisant les chaînes de requêtes de votre image LCP afin que le navigateur n'ait pas besoin de récupérer, d'analyser et d'exécuter JavaScript au préalable ou d'attendre qu'un composant soit rendu / hydraté pour découvrir l'image.
peut être utilisé avec pour permettre aux navigateurs de découvrir les ressources critiques que vous souhaitez charger dès que possible, avant qu'elles ne soient trouvées dans HTML.
Si vous optimisez LCP, le préchargement peut aider à augmenter le délai de découverte tardive du héros les images (par exemple celles chargées par JavaScript ou les images de héros d'arrière-plan en CSS) sont récupérées. Le préchargement peut faire une différence significative si vous avez besoin que les images critiques (comme les images Hero) aient la priorité sur le chargement d'autres images sur une page.
Remarque: Utilisez le préchargement avec parcimonie et toujours ] mesurent son impact sur la production. Si la précharge de votre image est plus tôt dans le document qu'elle ne l'est, cela peut aider les navigateurs à la découvrir (et à la classer par rapport aux autres ressources). Lorsqu'il n'est pas utilisé correctement, le préchargement peut retarder votre image First Contentful Paint (par exemple CSS, polices) – le contraire de ce que vous voulez. Notez également que pour que ces efforts de redéfinition des priorités soient efficaces, dépend également des serveurs qui hiérarchisent correctement les requêtes .
Le préchargement peut être utilisé pour récupérer les sources d'un d'un format particulier:
Remarque: Cette approche ne précharge que le dernier format où il est pris en charge, mais ne peut pas être utilisée pour précharger plusieurs formats pris en charge car cela les préchargerait tous les deux.
Veillez à ne pas abuser de la précharge (lorsque chaque ressource est considéré comme important, aucun d'entre eux ne le sont vraiment). Réservez-le pour les ressources critiques que le scanner de préchargement du navigateur peut ne pas être en mesure de trouver rapidement de manière organique.
Lighthouse suggère des possibilités d'appliquer cette optimisation dans Lighthouse 6.5 et versions ultérieures.
Voir CanIUse.com pour la dernière prise en charge du navigateur pour link rel = preload.
Image Decoding
Les navigateurs doivent décoder les images qu'ils téléchargent afin de les transformer en pixels sur votre écran. Cependant, la façon dont les navigateurs gèrent les images différées peut varier. Au moment de la rédaction de cet article, Chrome et Safari présentent les images et le texte ensemble – de manière synchrone – si possible. Cela semble correct visuellement, mais les images doivent être décodées, ce qui peut signifier que le texte n'est pas affiché tant que ce travail n'est pas terminé. L'attribut décodage sur vous permet de signaler une préférence entre le décodage d'image synchrone et asynchrone.
decoding =" async " suggère que le décodage d'image peut être différé, ce qui signifie que le navigateur peut pixelliser et afficher le contenu sans images tout en planifiant un décodage asynchrone hors du chemin critique. Dès que le décodage de l'image est terminé, le navigateur peut mettre à jour la présentation pour inclure des images. decoding = sync indique que le décodage d'une image ne doit pas être différé, et decoding = "auto" ] permet au navigateur de faire ce qu'il estime être le mieux.
Remarque : Voir CanIUse.com pour la dernière prise en charge du navigateur pour l'attribut de décodage.
Espaces réservés [19659023] Que faire si vous souhaitez montrer à l'utilisateur un espace réservé pendant le chargement de l'image? La propriété CSS background-image nous permet de définir des images d'arrière-plan sur un élément, y compris la balise ou tout conteneur parent éléments. Nous pouvons combiner background-image w ith background-size: cover pour définir la taille de l'image d'arrière-plan d'un élément et redimensionner l'image aussi grande que possible sans étirer l'image.
Les espaces réservés sont souvent en ligne, les URL de données codées en Base64 qui sont faibles – espaces réservés pour les images de qualité (LQIP) ou espaces réservés pour les images SVG (SQIP). Cela permet aux utilisateurs d'obtenir un aperçu très rapide de l'image, même sur des connexions réseau lentes, avant que l'image finale plus nette ne se charge pour la remplacer.
Remarque: Étant donné que les URL de données Base64 peuvent être assez longues, [svg text] est indiqué dans l'exemple ci-dessus pour améliorer la lisibilité
Avec un espace réservé SVG en ligne, voici à quoi ressemble maintenant l'exemple précédent lorsqu'il est chargé sur une connexion très lente. Remarquez comment les utilisateurs voient un aperçu immédiatement avant le téléchargement des images en taille réelle:
Images chargées sur une connexion lente simulée, affichant un espace réservé se rapprochant de l'image finale lors de son chargement. Cela peut améliorer les performances perçues dans certains cas. ( Grand aperçu )
Il existe une variété de solutions modernes pour les espaces réservés d'image (par exemple CSS background-color, LQIP, SQIP, Blur Hash Potrace). L'approche la plus logique pour votre expérience utilisateur peut dépendre de la mesure dans laquelle vous essayez d'offrir un aperçu du contenu final, de la progression de l'affichage (par exemple, chargement progressif) ou simplement d'éviter un flash visuel lorsque l'image se charge enfin. Je suis personnellement enthousiasmé par le support de JPEG XL pour un rendu progressif complet.
En fin de compte, inclure une URL de données en ligne pour votre image d'espace réservé de qualité médiocre qui est servie dans le code HTML initial dans les styles de évite la nécessité d'une demande réseau supplémentaire. Je considère qu'une taille d'espace réservé <= 1 à 2 Ko est optimale. LCP prendra en compte la taille intrinsèque de l'image d'espace réservé donc, idéalement, visez que l '«aperçu» corresponde à la taille intrinsèque de l'image réelle chargée.
Remarque: Il y a un numéro ouvert pour discuter de la prise en compte du chargement progressif spécifiquement dans la métrique Largest Contentful Paint.
Lazy-render Offscreen Content
Ensuite, parlons du CSS content-visibilité ]qui permet au navigateur d'ignorer le rendu, la mise en page et la peinture des éléments jusqu'à ce qu'ils soient nécessaires. Cela peut aider à optimiser les performances de chargement de la page si une grande partie du contenu de votre page est hors écran, y compris le contenu qui utilise des éléments . visibilité du contenu: auto peut réduire la quantité de travail CPU que le navigateur doit faire moins de travail en amont, y compris le décodage d'image hors écran.
section {
visibilité du contenu: auto;
}
La propriété content-visibilité peut prendre un certain nombre de valeurs, cependant, auto est celle qui offre des avantages en termes de performances. Les sections de la page avec content-visibilité: auto obtiennent un confinement pour la mise en page, la peinture et le style. Si l'élément était hors écran, il obtiendrait également une limitation de taille.
You can pair content-visibility with contain-intrinsic-size which provides the natural size of the element if it is impacted by size containment. The 700px value in this example approximates the width and height of each chunked section.
See CanIUse.com for latest browser support for CSS content-visibility.
Next.js Image Component
Next.js now includes an Image component with several of the above best practices baked in. The image component handles image optimization, generating responsive images (automating ) and lazy-loading in addition to many other capabilities. This is just one of the optimizations that has come out of the Chrome and Next.js teams collaborating with sites adopting it seeing up to a 60% better LCP and 100% better CLS.
In the below Next.js example, the standard element is first used to load 3 donut images downloaded from Unsplash.
import Head from 'next/head';
export default function Index() {
return (
When this page is loaded with the DevTools network panel open, we see that our images are very large in size (325KB + 4.5MB + 3.6MB = 8.4MB in total), they all load regardless of whether the user can see them and are likely not as optimized as they could be.
Loading images at these sizes is unnecessary, in particular if our user is on a mobile device. Let’s now use the Next.js image component instead. We import it in from ‘next/image’ and replace all our references with .
import Head from 'next/head';
import Image from 'next/image';
export default function Index() {
return (
Next.js Image Component
);
}
We can reload our page and take a second look at the DevTools network panel. Now only 1 image is being loaded by default (the only one visible in the viewport), it’s significantly smaller than the original (~33KB vs 325KB) and uses a more modern format (WebP).
An image is being loaded by default (the only one visible in the viewport), it’s significantly smaller than the original (approx. 33KB vs 325KB) and uses a more modern format (WebP). (Large preview)
Note: Next.js will optimize images dynamically upon request and store them in a local cache. The optimized image then gets served for subsequent requests until an expiration is reached.
Next.js can also generate several versions of the image to serve media to smaller screens at the right size. When loading the page under mobile emulation (a Pixel phone), an even smaller 16KB image gets served for our first image.
Next.js generates several versions of the image to serve media to smaller screens at the right size. (Large preview)
When a user scrolls down the page, the additional images are lazy-loaded in. Note how no additional configuration or tweaking was needed here — the component just did the right thing by default.
The performance optimizations offered by the Next.js image component can help improve Largest Contentful Paint. To learn more about the component, including the different layout modes it supports, check out the Next.js documentation. A component with similar capabilities is available for Nuxt.js.
What Are Examples Of Businesses Improving LCP Via Image Optimizations?
Vodafone found that a 31% improvement in LCP increased sales by 8%. Their optimizations to improve LCP included resizing their hero image, optimizing SVGs and using media queries to limit loading offscreen images.
Agrofy found that 70% improvement in LCP correlated to a 76% reduction in load abandonment. Their optimizations to LCP included a 2.5s saving from switching their first large image from being behind JavaScript (client-side hydration) to being directly in the main HTML document.
Agrofy found that 70% improvement in LCP correlated to a 76% reduction in load abandonment. (Large preview)
French Fashion house Chloè used Link Preload to preload their 1x and 2x Hero images, which were previously bottlenecked by a render-blocking script. This improved their Largest Contentful Paint by 500ms based on Chrome UX Report data over 28 days.
Optimizations to Cumulative Layout Shift helped YAHOO! Japan increased its News page views per session by 15%. They determined shifts were caused after their hero images were loaded and snapped in for the first view. They used Aspect Ratio Boxes to reserve space before their image was loaded.
Optimizations to Cumulative Layout Shift helped YAHOO! Japan increased their News’s page views per session by 15%. (Large preview)
Lab Data Is Only Part Of The Puzzle. You Also Need Field Data.
Before we go, I’d love to share a quick reminder about the importance of looking at the image experience your real users might have. Lab tools like Lighthouse measure performance in a synthetic (emulated mobile) environment limited to page load, while field or real-world data (e.g. RUM, Chrome UX Report) are based on real users throughout the lifetime of the page.
It’s important to check how realistic your lab results are by comparing them against typical users in the field. For example, if your lab CLS is much lower than the 75th percentile CLS in the field, you may not be measuring layout shifts as real users are experiencing them.
CLS is measured during the full lifespan of a pageso user behavior (interactions, scrolls, clicks) can have an impact on the elements that are shifting. For images, lab CLS may not see an improvement from fixing missing image dimensions if the images happen to be far down a page requiring a scroll. This is just one place where it’s worthwhile consulting real-user data.
For LCP it is very possible that the candidate element can change depending on factors such as load times (the LCP candidate could initially be a paragraph of text and then a large hero image), personalization or even different screen resolutions. Lighthouse’s LCP audit is a good place to start, but do take a look at what real users see to get the full picture.
Whenever possible, try to configure your lab tests to reflect real-user access and behavior patterns. Philip Walton has an excellent guide on debugging Web Vitals in the field worth checking for more details.
Editorial Note: Addy’s Book on Image Optimization
We’re happy and honored to have teamed up with Addy to publish a dedicated book on image optimizationand the book is now finally here. With modern approaches to image compression and image delivery, current and emerging image formats, how browsers load, decode and render images, CDNs, lazy-loading, adaptive media loading and how to optimize for Core Web Vitals. Everything in one, single, 528-pages book. Download a free PDF sample (12MB).
Now that we’ve covered the foundations of the modern tag, check out the pre-release of the Image Optimization book to get a deeper understanding of how images can impact performance and UX.
Throughout the bookwe will cover advanced image optimization techniques that expand heavily on the above guidance, as well as how to best use elements like and to make your images on the web shine.
You may also be interested in reading Malte Ubl’s guide to image optimizationJake Archibald’s guide to the AVIF format and Katie Hempenius’ excellent guidance on web.dev.
With thanks to Yoav Weiss, Rick Viscomi and Vitaly for their reviews.
est celui qui pilote le chargement de l'image, donc 
(vf, yk, il)