Comment améliorer le score PageSpeed de son site Webflow ?
Apprenez à améliorer le score PageSpeed de votre site Webflow : images, fonts, scripts tiers et Core Web Vitals.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment améliorer le score PageSpeed de votre site Webflow étape par étape.
| Levier | Impact | Difficulté |
|---|---|---|
| Images : format WebP/AVIF + lazy load | Fort | Facile |
| Fonts : préchargement + font-display: swap | Fort | Facile |
| Scripts tiers : chargement différé | Moyen | Moyen |
| CSS inutilisé : suppression | Moyen | Moyen |
| LCP : image hero en loading eager | Fort | Facile |
1. Mesurez votre score de départ
Rendez-vous sur PageSpeed Insights et testez votre URL en mobile ET desktop. Notez les scores LCP, CLS et INP séparément : ce sont les trois Core Web Vitals sur lesquels Google se base pour le ranking.
2. Optimisez vos images
Dans Webflow, toutes les images uploadées sont automatiquement converties en WebP depuis 2023. Vérifiez que le champ Loading de vos images above-the-fold (hero, logo) est bien sur Eager et que toutes les autres sont sur Lazy. Spécifiez toujours une width et une height sur vos images pour éviter le CLS.
3. Optimisez le chargement des polices
Dans les Page Settings > Custom Code > Head, ajoutez un preload sur vos fonts critiques :
<link rel="preload" href="/fonts/votre-font.woff2" as="font" type="font/woff2" crossorigin>4. Différez les scripts tiers
Intercom, HubSpot, les pixels Meta et TikTok sont les plus lourds. Chargez-les via Google Tag Manager avec un trigger Window Loaded plutôt qu'All Pages pour retarder leur exécution après le rendu initial.
5. Supprimez le CSS inutilisé
Dans Chrome DevTools > Coverage, identifiez le CSS non utilisé. Dans Webflow, désactivez les classes inutiles via le panneau Styles. Evitez d'importer des librairies CSS complètes (Bootstrap, Tailwind) dont vous n'utilisez qu'une fraction.
Conclusion
Un score PageSpeed élevé améliore directement votre SEO et votre taux de conversion. Cas d'usage :
- Audit avant/après refonte Webflow
- Optimisation d'une landing page publicitaire
- Amélioration du ranking SEO sur des pages clés
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.
