How to use preload in Webflow to speed up rendering

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to use preload in Webflow to speed up the rendering of critical assets.

What is preload?

Preload is an HTML directive that tells the browser to download a resource first, even before it’s discovered in CSS or JS. Unlike prefetch, which is for future resources, preload applies to resources on the current page.

1. Preload your LCP image

If your hero image isn’t detected by the browser as the priority LCP image, which often happens with CSS background-image, add a preload in the head:

<link rel="preload" href="https://cdn.prod.website-files.com/votre-image.webp"
     as="image" fetchpriority="high">

2. Preload your main font

Copy the WOFF2 URL for your font from the Network tab in Chrome DevTools (filter by Font). Add the preload in the Custom Code Head section of your Page Settings.

3. Avoid over-preloading

Every preloaded resource gets downloaded immediately, whether it’s used or not. An unused preload creates a warning in Lighthouse and wastes bandwidth. Stick to the 2 or 3 most critical resources for the initial render.

Conclusion

Preload is a simple lever for improving LCP by 20 to 40%. Use cases:

• Hero image set as a CSS background on a landing page
• Custom font displayed in the main heading
• Critical third-party script loaded asynchronously