1. LCP (Largest Contentful Paint)
Objectif :
Réduire le temps nécessaire pour charger le plus grand élément visible (texte, image, vidéo) à l’écran. Un LCP optimal est inférieur à 2,5 secondes.
Exemples concrets :
Image principale d’une page e-commerce :
Problème : Une image produit haute résolution (2-3 Mo) est hébergée sur un serveur lent.
Solution :
Utiliser un CDN (Content Delivery Network) comme Cloudflare ou Akamai pour charger l’image depuis un serveur proche de l’utilisateur.
Convertir l’image en format WebP (30% plus léger que JPEG/PNG) pour réduire le poids.
Appliquer le lazy loading pour différer le chargement des images non visibles immédiatement.
Exemple pratique :
<img src= »product.webp » alt= »Produit principal » loading= »lazy »>
Texte principal d’un blog :
Problème : Les polices personnalisées (ex. Google Fonts) prennent du temps à se charger.
Solution : Héberger les polices en local et définir une police de secours dans le CSS.
Exemple pratique :
font-family: ‘Roboto’, Arial, sans-serif;