Google's Search protocols now include the Core Web Vitals of a page. So any bad performance results now directly affect SERPs (search engine results pages) rankings. This is easy enough to monitor thanks to Google Search Console, which shows how pages perform. If figuring out what can improve your website's performance is unclear, you've got Webflow.
Read on to learn about the best way to optimize a Webflow page's performance:
Ensure A Preconnect to the Origin of Your Assets
Want page load speed to pick up? Add this code above the head tag of the project's settings:
<link rel="preconnect" href="https://assets.website-files.com/">
By default, Webflow servers have assets, including fonts and images from a certain domain. When assets are being loaded, the browser makes an extra connection to the domain. When there's a preconnect tag, the browser will get a signal that there's a connection to be established by the page from another origin. It also sends the message that it has to start (and get established) pretty much immediately.
Have Webflow’s Lazy Load Work to Your Advantage
As the name suggests, lazy loading means that images load as needed (instead of at the same time). Since off-screen images don't need to load just yet, that means the loading speed for the necessary content can be much quicker.
This is generally the default on Webflow now, but older images may need an update anyway. Check the image settings pane and update the "Load" setting according to your preferences. Be sure you include the width and height of the elements in question!
Make Sure That the LCP Image Is Preloaded
A browser needs to be informed about vital resources that should load first and soonest. Preloading is the best possible way to go about this—especially if the viewport's largest visible element is an image. The preload tag can practically be a gamechanger. Not sure what that is exactly? Try out this code:
<link rel="preload" as="image" href="https://assets.website-files.com/...hero.png" imagesrcset="https://assets.website-files.com/...hero-p-800.png 800w, https://assets.website-files.com/...hero.png 1400w" imagesizes="(max-width: 479px) 100vw, (max-width: 767px) 100, (max-width: 991px) 600px, 55vw">
Make Use of Image Elements Instead of Background Images
In terms of optimization, background images don't fare nearly as well as image elements do. The best route to take is to have image elements replace every single existing background image. Take note, however, that reproducing background behaviour may require making use of the object-fit property.
Pay Close Attention to Images: Ensure They’re Compressed and Resized
One of the heaviest things about the load time on any website involves image sizing. This is why they need to be sized properly and compressed as well. It should be noted that there are plenty of tools available for the images to be set right. Ideally, any images within your existing assets with those that are already optimized properly. That way, the loading time will be quicker and images will appear better as well.
