Optimiser la durée de chargement de la ressource LCP

Optimiser la durée de chargement de la ressource LCP

Le Largest Contentful Paint (LCP) est l'une des 3 métriques de performance Core Web Vitals qui mesurent votre expérience utilisateur en ligne. Le LCP capture le temps nécessaire pour que le plus grand élément de contenu (une image, une vidéo ou un bloc de texte) devienne visible dans la fenêtre d'affichage. La durée de chargement de la ressource est une sous-partie du LCP qui indique combien de temps est perdu à récupérer la ressource réseau pour l'élément LCP.  Plongeons dans l'aspect durée de chargement de la ressource du LCP et explorons son impact et les stratégies d'optimisation.

Qu'est-ce que la durée de chargement de la ressource dans le LCP ?

La durée de chargement de la ressource, souvent appelée durée de chargement, fait référence au temps nécessaire au navigateur pour télécharger la ressource réseau (par exemple, une image) qui deviendra finalement l'élément LCP. Pour les images et les vidéos, cette durée s'étend du début du téléchargement de l'image jusqu'à ce que le navigateur termine le téléchargement. Pour les éléments LCP basés sur du texte, la durée de chargement est généralement nulle.

La durée de chargement de la ressource est mesurée à partir du moment où le navigateur commence à télécharger la ressource LCP jusqu'à ce qu'il ait fini de la télécharger. Cette mesure est cruciale car elle impacte directement la rapidité avec laquelle les utilisateurs peuvent voir et interagir avec le contenu principal d'une page web. La durée de chargement de la ressource peut être influencée par plusieurs facteurs, notamment :

• Taille du fichier : Les fichiers plus volumineux nécessitent des temps de téléchargement plus longs.
• Vitesse du réseau : Les connexions plus lentes prolongent naturellement la durée de chargement.
• Réactivité du serveur : Les délais de réponse du serveur ralentissent la récupération des ressources.
• Téléchargements simultanés : Les ressources téléchargées simultanément entrent en compétition pour la bande passante, ce qui peut augmenter les temps de chargement.

Comment détecter la durée de chargement de la ressource

Il existe deux moyens efficaces d'identifier et de mesurer la durée de chargement de la ressource :

Inspection réseau dans Chrome DevTools : Utilisez le raccourci Ctrl + Shift + I pour ouvrir les outils de développement Chrome, puis sélectionnez l'onglet "Network" et rechargez la page. Recherchez l'élément LCP dans les requêtes réseau (si vous voulez connaître l'élément LCP, essayez le Core Web Visualizer). L'inspecteur réseau vous montrera combien de temps il a fallu pour télécharger la ressource.

Conseil de pro : Activez les grandes lignes de requête pour voir des détails supplémentaires tels que la latence LCP, la taille transférée et la taille réelle.

Exploiter les données de Real User Monitoring (RUM) : 

Les outils RUM enregistrent souvent les données d'attribution LCP. Les données d'attribution pour le Largest Contentful Paint contiennent des informations sur le délai de chargement de la ressource. Ces données permettent de visualiser les tendances de durée de chargement au fil du temps ou par page, offrant une vue claire des temps de chargement sur l'ensemble du site. En analysant ces modèles, il est possible d'identifier les éléments qui peuvent ralentir les temps de chargement et de découvrir des opportunités ciblées pour une performance plus rapide et plus fluide.

Comment améliorer la durée de chargement du LCP

Les délais de chargement des ressources surviennent lorsque les ressources sont téléchargées dans un ordre ou une taille sous-optimale. Deux approches principales pour y remédier : réduire la taille des données ou optimiser la livraison des données. Voici des techniques et des modèles efficaces pour améliorer la durée de chargement de la ressource LCP :

1. Optimiser la taille du fichier :

L'optimisation de la taille du fichier réduit la quantité d'octets à envoyer sur le réseau. Moins de données signifie généralement moins de temps de téléchargement.

Utiliser des formats d'image modernes : AVIF et WebP ouvrent la voie en matière de compression. AVIF, en particulier, offre des capacités de compression étendues, réduisant souvent la taille des fichiers jusqu'à 50 % par rapport à WebP, ce qui le rend idéal pour les photos complexes sans sacrifier la qualité. WebP, cependant, conserve une forte compatibilité avec une plus large gamme de navigateurs et est particulièrement efficace pour les images plus simples.

Images réactives : L'élément <picture> et l'attribut srcset permettent des images adaptées en fonction de la taille de l'écran, permettant des versions d'image plus petites pour mobile et des versions haute résolution pour les grands écrans. Voici un exemple de configuration:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy" alt="Description">
</picture>

Dimensions d'image correctes : Les images réactives ne sont qu'une partie de la solution car réactif ne signifie pas qu'elles sont à la bonne taille. Adapter les dimensions de l'image à leur taille d'affichage est l'une des erreurs les plus courantes que je vois. Servir une image de 2000px de large pour une zone d'affichage de 500px gaspille de la bande passante et peut ralentir considérablement les temps de chargement.

2. Améliorer les performances réseau : 

Une fois que la taille des ressources réseau est optimisée, l'étape suivante consiste à maximiser la vitesse du réseau — ou même à contourner le réseau complètement. Cela peut être réalisé par :

Contourner les besoins réseau : Il n'y a pas de connexion réseau plus rapide qu'une connexion réseau évitée. Les navigateurs ont la possibilité de servir du contenu statique (inchangé) comme des images, des scripts et des feuilles de style directement depuis le cache local du navigateur. Configurez le serveur pour envoyer les instructions de mise en cache correctes au navigateur. Par exemple avec l'en-tête expires.

La configuration la plus efficace pour envoyer un en-tête Cache-Control comme ceci :

Cache-Control: public, max-age=31536000, immutable

• public : Permet à la ressource d'être mise en cache par les navigateurs et les caches intermédiaires.
• max-age=31536000: Définit la durée maximale pendant laquelle la ressource est considérée comme fraîche à un an (31 536 000 secondes).
• immutable : Indique que la ressource ne changera pas avec le temps, évitant les demandes de revalidation inutiles.

HTTP/3: Le dernier protocole HTTP/3 peut améliorer les performances réseau en réduisant la latence et en gérant la perte de paquets plus efficacement que le TCP traditionnel. (HTTP/3 a plusieurs autres avantages, notamment en ce qui concerne le Time to First Byte) 

Pour vérifier si HTTP/3 est activé, inspectez simplement votre réseau avec le raccourci Ctrl-Shift-I. Sélectionnez l'onglet réseau, faites un clic droit sur les en-têtes de colonnes réseau et assurez-vous que 'protocol' est activé. Rechargez la page et vérifiez le protocole. Pour HTTP/3, le protocole devrait indiquer 'h3'

Hébergement autonome des ressources: Les ressources réseau importantes et/ou précoces devraient par défaut toujours être hébergées sur le serveur d'origine.  L'hébergement autonome évite le besoin de se connecter à des serveurs tiers, ce qui peut causer un délai considérables dû aux recherches DNS supplémentaires, aux négociations SSL et aux configurations de connexion. L'hébergement autonome assure la réutilisation d'une connexion unique déjà ouverte et réduit la surcharge liée à l'établissement de connexions séparées. Les ressources auto-hébergées permettent également un contrôle total sur la compression et les politiques de cache.

Utiliser un CDN : Un Content Delivery Network (CDN) est un réseau de serveurs distribués qui mettent en cache et servent des ressources statiques comme des images, des CSS et du JavaScript à partir d'emplacements plus proches de l'utilisateur. Cela réduit le temps de trajet des données (le temps d'aller-retour) qui affecte directement la durée de chargement de la ressource. En dehors de cela, de nombreux CDN offrent également plus d'avantages comme la compression d'image, des configurations réseau supérieures (comme HTTP/3 & 0-RTT) et bien plus encore. Les CDN d'images spécialisés peuvent aller plus loin en fournissant des optimisations automatiques et en temps réel comme la conversion de format, le redimensionnement et la compression.

3. Optimiser la priorisation des ressources

Après avoir réduit la taille des ressources et optimisé le réseau, il y a aussi la question de la compétition réseau. Lorsque plusieurs ressources sont demandées en même temps dans de mauvaises conditions réseau, cela peut ralentir considérablement le temps de téléchargement des ressources. C'est pourquoi il est logique de minimiser la compétition réseau en planifiant le téléchargement des ressources.

Prioriser les ressources critiques: Marquez les ressources essentielles, comme les images héros ou le CSS au-dessus de la ligne de flottaison, avec fetchpriority="high". Cela signale au navigateur de télécharger ces actifs en premier, les empêchant d'être ralentis par des scripts, des widgets ou des éléments tiers qui ne nécessitent pas un chargement instantané. Prioriser ces ressources critiques réduit le temps de chargement pour le contenu qui intéresse le plus vos utilisateurs. La combinaison du préchargement (pour résoudre la découverte tardive) et de fetchpriority="high" (pour résoudre la contention réseau) est la technique la plus puissante pour s'assurer que la ressource LCP est récupérée aussi tôt et aussi rapidement que possible.

<!-- Pour les images LCP visibles dans le HTML initial -->
<img src="hero-image.webp" fetchpriority="high" alt="...">

<!-- Pour améliorer la découverte -->
<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">

Réduire la contention réseau: Rationalisez les téléchargements initiaux en différant ou en chargeant paresseusement (lazy-loading) les actifs non essentiels. Reportez le chargement de toutes les images ou vidéos qui ne sont pas immédiatement visibles, ainsi que les éléments d'arrière-plan ou secondaires. L'utilisation de loading="lazy" pour les médias hors écran est un bon point de départ, tandis que le report d'autres scripts et actifs non essentiels libérera de la bande passante et réduira toute concurrence avec vos ressources critiques, gardant le contenu principal de votre page rapide à charger et à afficher. N'appliquez jamais loading="lazy" à votre image LCP ; c'est un anti-modèle critique qui nuira à votre score.

4. Configurer les règles de spéculation

Les règles de spéculation permettent aux navigateurs de précharger ou de pré-rendre des pages web en fonction de la navigation utilisateur prédite. Le préchargement élimine efficacement la sous-partie Time to First Byte du LCP et n'a aucun impact sur la durée de chargement de la ressource. Le pré-rendu rend la page suivante dans un onglet caché et télécharge toutes les ressources de la page.  Cela a éliminé la plupart des durées de chargement pour l'élément LCP comme le montre cet exemple de répartition LCP d'une page pré-rendue.