Audit & Web Vitals

Mettez en pratique vos connaissances sur les Core Web Vitals et l'audit de performance.

L'Audit Rapide

1. Ouvrez une fenêtre de navigation privée.
2. Allez sur un site média lourd (ex: lequipe.fr, cnn.com, dailymail.co.uk).
3. Ouvrez les DevTools > onglet Lighthouse.
4. Lancez une analyse "Mobile" / "Navigation".

Question : Quel est le score de performance ? Quel est le métrique qui impacte le plus le score (en rouge) ?

💡 Voir des pistes de réponse

Sur les sites médias, c'est souvent le LCP (Largest Contentful Paint) ou le CLS (Cumulative Layout Shift) qui posent problème.

• Pourquoi ? Les publicités et les images non optimisées retardent l'affichage principal et décalent le contenu.
• Le javascript tiers (trackers, pubs) bloque aussi le thread principal (TBT).

Mesure du LCP

Sur le même site :

1. Allez dans l'onglet Performance des DevTools.
2. Lancez un enregistrement (bouton rond ou Cmd+E) et rechargez la page (Cmd+R).
3. Arrêtez l'enregistrement quand la page est chargée.
4. Trouvez le flag "LCP" dans la timeline "Timings".

Question : Quel élément HTML correspond au LCP ? Est-ce une image, un titre, ou une vidéo ?

💡 Voir la Solution

En cliquant sur le petit carré "LCP" dans la timeline, puis dans l'onglet "Summary" en bas, Chrome vous montre :

• Related Node : L'élément HTML coupable.
• Souvent, c'est la grande image de "Une" ou une bannière publicitaire intrusante. Si c'est une image, vérifiez si elle est lazy-loadée (mauvais pour le LCP !) ou preloadée (bon pour le LCP).

L'expérience "Slow 3G"

1. Allez dans l'onglet Network.
2. Changez "No throttling" par "Slow 3G".
3. Rechargez la page.

Question : Combien de temps l'écran reste-t-il blanc ? Les polices d'écriture s'affichent-elles tout de suite ?

💡 Voir l'analyse

Ce test révèle la résilience du site.

• Si l'écran reste blanc 10 secondes : Le CSS/JS bloque le rendu (Render Blocking). Il faudrait du Critical CSS.
• Si le texte est invisible : Les polices ne sont pas optimisées (font-display: swap manquant).