Discover Webflow's 3 link preloading options

Did you know that there are 3 different preload configurations for your Webflow links? These configurations, called :

• Default
• Prefetch
• Prerender

And they can transform the user experience on your website. Each of these configurations has its own advantages and use cases. Let's explore them in detail.

Default, Prefetch and Prerender.

1 - Default

The "Default" configuration is the standard mode in Webflow. In this mode, the browser starts downloading the linked page only after the user has clicked on the link.

2 - Prefetch

The "Prefetch" configuration allows the browser to start downloading the assets of the linked page once the current page has fully loaded. This means that when the user clicks on the link, some or all of the linked page's assets are already cached, speeding up page loading time.

Benefits:

• Speed: Reduces loading time for linked pages.
• Enhanced user experience: Provides a smoother transition between pages.

Use cases:

• Use this configuration when you want to improve browsing speed between pages linked to a specific link.

3 - Prerender

The "Prerender" configuration is the most advanced of the three. It tells the browser to start downloading all the necessary assets from the linked page before it is even opened. This enables almost instantaneous browsing when the user clicks on the link.

Benefits:

• Maximum performance: Preloads the entire landing page, delivering an almost instantaneous click experience.
• User engagement: Can increase engagement by reducing waiting time.

Disadvantage:

• Higher loading for the browser: Prerendering can put a strain on the browser, so it's recommended to use it only for main links, such as calls to action (CTAs) and other links that visitors are very likely to click.

Use cases:

• Use this configuration when you want to offer the best possible user experience, especially for your site's key pages.

How to modify the Preload parameters of your link in your Webflow project?

Modifying the Preload parameters of your Webflow links is a simple and straightforward process. Here's how you can do it from the designer interface of your Webflow site:

1. Select your link/button: Find the link or button you want to configure from your website interface.
2. Access the link parameters: Click on the gear icon ⚙️ next to the link or button to open the settings.
3. Modify the Preload configuration: Use the drop-down menu - Preload - to choose the preload configuration you wish to apply. You can choose from Default, Prefetch, and Prerender options to suit your needs.
4. Publish your site: Don't forget to publish your site so that changes can be applied. You can do this by clicking on the "Publish" button in the Webflow interface.

By following these simple steps, you can easily adjust your link preload settings, optimizing navigation and engagement on your Webflow site.

Conclusion

Webflow's ability to choose from three link preloading configurations offers great flexibility in optimizing the user experience. Whether you want a simple link with the "Default" configuration, speed up browsing with "Prefetch", or offer an ultra-fast experience with "Prerender", Webflow gives you the tools to make it happen.

Caution: Preloading and prerendering options can significantly improve performance if you are certain that the user will load these linked pages afterwards. If you're not sure, these preloading methods can overload the browser and slow down overall site performance.

By understanding these configurations and using them wisely, you can create a more responsive and engaging webflow site, improving conversion rates and user satisfaction.