Optimisation des Performances Web : Core Web Vitals et Amélioration de Vitesse

Qu'est-ce que les Core Web Vitals ?

Les Core Web Vitals sont trois métriques clés définies par Google pour mesurer l'expérience utilisateur : LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) et INP (Interaction to Next Paint).

LCP mesure le temps de chargement du plus grand élément de contenu de la page (généralement une image hero ou un titre). Il doit être inférieur à 2,5 secondes. Un LCP lent fait quitter la page aux utilisateurs.

CLS mesure les décalages de mise en page inattendus pendant le chargement. Les décalages causés par des images ou publicités chargées tardivement frustrent les utilisateurs. Il doit être inférieur à 0,1.

INP mesure le temps de réponse aux interactions utilisateur (clics, pressions de touches). Il doit être inférieur à 200 millisecondes. Un INP lent rend le site inutilisable.

De bons Core Web Vitals sont utiles, sans garantir un classement élevé dans les recherches.

Optimisation du LCP

Chargez rapidement le plus grand élément de contenu. L'image hero ou le titre principal est généralement l'élément LCP. Priorisez son chargement.

Ne différez pas le chargement de l’image LCP. Réservez le lazy loading aux images hors de la vue initiale.

Réduisez le temps de réponse du serveur (TTFB). Utilisez un CDN (Content Delivery Network), optimisez les requêtes de base de données, implémentez le cache de page.

async et defer concernent JavaScript ; le CSS non critique demande une autre stratégie de chargement.

Préchargez les ressources critiques avec la directive preload : <link rel="preload" as="image" href="hero.webp">. Cela aide le navigateur à découvrir les ressources plus tôt.

Optimisation du CLS

Ajoutez des attributs width et height aux éléments image et vidéo. Cela permet au navigateur de réserver l'espace et d'éviter le décalage de mise en page.

Réservez des conteneurs de taille fixe pour les publicités et embeds. Les publicités chargées tardivement déplacent la mise en page et augmentent le CLS.

Optimisez les polices web : utilisez font-display: swap, préchargez les polices critiques. Minimisez les problèmes de FOUT et FOIT.

Des éléments sans espace réservé ajoutés au-dessus du contenu peuvent déplacer la mise en page.

Utilisez transform et opacity dans les animations CSS. Ces propriétés ne déclenchent pas le layout et ne contribuent pas au CLS.

Optimisation de l'INP

Réduisez le temps d'exécution JavaScript. Divisez les longues tâches en morceaux plus petits. Les tâches de plus de 50ms affectent négativement l'INP.

Optimisez les event handlers. Écrivez des handlers qui répondent rapidement aux clics et aux pressions de touches. Déplacez les calculs lourds vers les Web Workers.

Des scripts tiers lourds peuvent augmenter INP. Supprimez les inutiles et mesurez à nouveau.

Différez les opérations lourdes avec requestIdleCallback et setTimeout. Déplacez le travail non critique en arrière-plan pendant les interactions utilisateur.

Dans les frameworks comme React/Vue, évitez les re-renders inutiles. Ignorez les calculs inutiles avec useMemo, useCallback et memo.

Optimisation Générale de Vitesse

Utilisez HTTP/2 ou HTTP/3. Ils permettent le traitement parallèle de plusieurs requêtes et la compression des headers. Les hébergeurs modernes les supportent par défaut.

Activez la compression Gzip ou Brotli. Les ressources textuelles (HTML, CSS, JS) rétrécissent de 60 à 80%. Activez dans la configuration du serveur.

Mettez en cache les assets statiques. Définissez les durées de cache navigateur et CDN avec les headers Cache-Control. Utilisez des TTL longs pour les assets immuables.

Intégrez le CSS critique inline, chargez le reste en async. Intégrez le CSS nécessaire pour le contenu above-the-fold en haut de la page.

Divisez le JavaScript avec le code splitting. Chargez uniquement le code nécessaire pour chaque page. Appliquez le lazy loading avec dynamic import().

Lazy loadez les images. Chargez les images sous le fold uniquement lorsqu'elles deviennent visibles. L'attribut loading="lazy" suffit.

Préchargez les ressources avec prefetch et preconnect. Établissez les connexions DNS et TCP à l'avance avec <link rel="preconnect" href="https://fonts.googleapis.com">.

Outils de Mesure

Google PageSpeed Insights : Rapport de performance basé sur Lighthouse. Fournit des scores séparés pour mobile et desktop. Propose des suggestions d'amélioration.

Chrome DevTools Performance tab : Analyse le processus de chargement de la page étape par étape. Affiche les long tasks, layout shifts et paint timing.

L’extension Web Vitals n’est plus prise en charge. Utilisez Performance dans Chrome DevTools.

CrUX (Chrome User Experience Report) : Collecte des données d'utilisateurs réels. Apparaît comme rapport Core Web Vitals dans Search Console.

Rapport Core Web Vitals de Search Console : Classe vos URLs comme 'Bon', 'Amélioration nécessaire' et 'Mauvais'. Montre quelles pages nécessitent une optimisation.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience