La Performance Web est constamment à la recherche d'optimisations pour le confort de navigation. Diminuer le temps d'attente de l'internaute est un facteur clé incontournable du succès des sites web modernes. Et ce n'est pas Google qui vous dira le contraire : Evaluating page experience for a better web.
La ligne de flottaison
De nombreuses techniques sont employées pour favoriser la performance perçue. L'une d'entres elles consiste à afficher en priorité tous les éléments situés au dessus de la Ligne de Flottaison.
La Ligne de Flottaison représente la partie visible d'une page web, directement atteignable sans nécessiter de scroller verticalement.
L'un des conseils emblématiques des outils de diagnostic des performances web est d'Éliminer les contenus (JavaScript, CSS, Polices) qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison.
Un certain nombre de techniques couvrent déjà les domaines suivants :
- JavaScript : Les attributs async et defer
- CSS : Des outils pour éliminer les styles CSS bloquants
- Polices de caractères : Les attributs rel=preload et font-display
Pour les images, soyez paresseux !
Concernant les images la technique du Lazy Loading, ou "Chargement Paresseux" (oui, ça passe mieux en anglais) permet de ne charger que les images situées au dessus de la ligne de flottaison. Les autres images ne sont alors chargées que lorsque cela devient nécessaire, au fur et à mesure que l'utilisateur scrolle (défile). On améliore ainsi le temps de chargement initial de la page.
Google Page Speed, nous conseille vivement de respecter cette consigne :
loading="lazy" à la rescousse
Pendant longtemps réalisée via JavaScript, la méthode de lazy loading est dorénavant décrite au sein d'une spécification du WhatWG sous la forme d'un attribut HTML loading dont les valeurs sont les suivantes :
eager: l'image est chargée immédiatement, qu'elle soit située dans ou hors de la fenêtre visible (valeur par défaut),lazy: le chargement est retardé jusqu'à ce que l'usager scrolle et s'approche du bas de la fenêtre du navigateur.
<img src="image.jpg" alt="..." loading="lazy">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
Déjà compatible sur de nombreux navigateurs caniuse : Lazy loading via attribute for images & iframes, l'attribut loading est parfaitement envisageable en production. Pour un support plus large, sachez qu'il existe un polyfill (une émulation) de cet attribut HTML.
Pensez dès à présent à l'intégrer pour favoriser la performance perçue de vos visiteurs.