Comment utiliser le preload dans Webflow pour accélérer le rendu ?
Apprenez à utiliser le preload dans Webflow pour accélérer le rendu : image LCP, font principale et règles d'utilisation.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment utiliser le preload dans Webflow pour accélérer le rendu des ressources critiques.
| Ressource | Attribut as | Quand l'utiliser |
|---|---|---|
| Font WOFF2 | font | Toujours sur la font principale |
| Image hero (LCP) | image | Si image above-the-fold non détectée |
| Script critique | script | Rare, uniquement si bloquant |
| CSS critique | style | Non applicable sur Webflow (CSS inline) |
Qu'est-ce que le preload ?
Le preload est une directive HTML qui indique au navigateur de télécharger une ressource en priorité, avant même qu'elle soit découverte dans le CSS ou le JS. Contrairement au prefetch (ressources futures), le preload concerne les ressources de la page courante.
1. Préchargez votre image LCP
Si votre image hero n'est pas détectée comme LCP prioritaire par le navigateur (cas fréquent avec les background-image CSS), ajoutez un preload dans le head :
<link rel="preload" href="https://cdn.prod.website-files.com/votre-image.webp"
as="image" fetchpriority="high">2. Préchargez votre font principale
Copiez l'URL WOFF2 de votre font depuis l'onglet Network de Chrome DevTools (filtrez par Font). Ajoutez le preload dans Head Custom Code de votre Page Settings.
3. Évitez le sur-preload
Chaque ressource preloadée est téléchargée immédiatement, qu'elle soit utilisée ou non. Un preload inutilisé génère un warning dans Lighthouse et gaspille de la bande passante. Limitez-vous aux 2 ou 3 ressources les plus critiques pour le rendu initial.
Conclusion
Le preload est un levier simple pour améliorer le LCP de 20 à 40%. Cas d'usage :
- Image hero en CSS background sur une landing page
- Font custom affichée dans le titre principal
- Script tiers critique chargé en async
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.
.avif)
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.
