Comment auditer et corriger les performances Webflow avec Lighthouse ?
Apprenez à auditer votre site Webflow avec Lighthouse : métriques Core Web Vitals, lecture du rapport et corrections prioritaires.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment auditer et corriger les performances de votre site Webflow avec Lighthouse.
| Métrique Lighthouse | Seuil Bon | Ce qu'elle mesure |
|---|---|---|
| LCP | < 2,5s | Temps d'affichage du plus grand élément visible |
| INP | < 200ms | Réactivité aux interactions utilisateur |
| CLS | < 0,1 | Stabilité visuelle de la page |
| FCP | < 1,8s | Premier affichage de contenu |
| TTFB | < 800ms | Temps de réponse du serveur |
| TBT | < 200ms | Blocage du thread principal |
1. Lancez un audit Lighthouse
Ouvrez Chrome DevTools (F12) > onglet Lighthouse. Sélectionnez Mobile, cochez Performance et cliquez sur Analyze page load. Utilisez toujours le mode Mobile en priorité : c'est le score que Google utilise. Fermez tous les autres onglets pour éviter les interférences.
2. Lisez le rapport par ordre de priorité
Lighthouse classe les opportunités par impact estimé en secondes. Concentrez-vous d'abord sur les items marqués en rouge avec un gain > 0,5s. Les items orange sont importants mais secondaires. Les items verts sont des bonus.
3. Corrigez les opportunités les plus fréquentes sur Webflow
- Reduce unused JavaScript : supprimez les scripts tiers inutiles ou différez-les via GTM
- Properly size images : vérifiez que vos images ne sont pas plus larges que leur conteneur
- Eliminate render-blocking resources : passez vos scripts en defer ou async
- Serve images in next-gen formats : Webflow gère WebP automatiquement, vérifiez que c'est actif
4. Mesurez en conditions réelles avec CrUX
Lighthouse mesure en conditions de laboratoire (simulées). Pour les données réelles, utilisez PageSpeed Insights qui affiche les données Chrome User Experience Report (CrUX) basées sur de vrais utilisateurs. Les deux métriques peuvent diverger significativement.
Conclusion
Lighthouse est le point de départ de tout audit de performance. Cas d'usage :
- Audit mensuel de vos pages clés
- Validation avant mise en ligne d'une refonte
- Benchmark avant/après optimisation
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
