La règle des 3 secondes pour la performance web

Vous n'avez que trois secondes.

Après cela, vos utilisateurs partent.

Les recherches de Google montrent que 53 % des utilisateurs mobiles abandonnent un site s'il met plus de 3 secondes à charger.

Les sites lents vous coûtent de l'argent. Améliorer le temps de chargement mobile de 0,1 seconde augmente les conversions e-commerce de 8,4 %.

La performance n'est pas seulement une métrique technique. C'est une métrique métier.

Pour gagner, vous devez comprendre les Core Web Vitals :

• LCP (Largest Contentful Paint) : la rapidité avec laquelle les utilisateurs voient le contenu principal. Visez moins de 2,5 s. • INP (Interaction to Next Paint) : la rapidité avec laquelle la page réagit aux clics. Visez moins de 200 ms. • CLS (Cumulative Layout Shift) : la stabilité de la mise en page. Visez moins de 0,1.

Arrêtez de deviner et commencez à optimiser. Voici comment battre la montre :

Optimisation JavaScript • Envoyez moins de code. Utilisez les imports dynamiques pour ne charger le code que lorsque c'est nécessaire. • Utilisez le tree-shaking. Passez de CommonJS aux modules ES pour supprimer le code inutile. • Déportez les tâches lourdes vers les Web Workers. Gardez le thread principal libre pour les interactions utilisateur. • Utilisez defer ou async. Ne laissez plus les scripts bloquer l'analyse de votre HTML.

CSS et rendu • Intégrez le CSS critique en ligne (inline). Chargez d'abord uniquement ce qui est visible au-dessus de la ligne de flottaison. • Évitez le layout thrashing. Regroupez vos lectures et écritures pour éviter les recalculs constants. • Animez avec transform et opacity. Ces propriétés utilisent le GPU et évitent les décalages de mise en page. • Utilisez content-visibility: auto. Ignorez le rendu pour le contenu qui n'est pas à l'écran.

Stratégie d'images • Utilisez des formats modernes. WebP et AVIF sont bien plus légers que le JPEG. • Définissez les attributs width et height. Cela évite les décalages de mise en page (CLS). • Utilisez le lazy-loading pour les images sous la ligne de flottaison. Ne passez pas en lazy-loading pour votre image héro LCP. • Utilisez srcset. Servez des images plus petites aux utilisateurs mobiles.

Réseau et mise en cache • Utilisez un CDN. Rapprochez votre contenu de vos utilisateurs pour réduire la latence. • Activez la compression. Utilisez Brotli ou Zstandard pour réduire la taille des fichiers. • Mettez en cache de manière agressive. Utilisez des en-têtes de cache immuables pour les ressources avec hash. • Assurez le bon fonctionnement du bfcache. Évitez d'utiliser l'événement unload pour garantir une navigation instantanée lors du retour ou de l'avance.

L'objectif est simple : éviter le travail.

Le code le plus rapide est celui que vos utilisateurs ne téléchargent jamais. La requête la plus rapide est celle que le navigateur n'a jamais besoin d'effectuer.

Source : https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1