Google considers page speed an important ranking factor. Most people won't wait more than about 10 seconds for a website to load; that’s a short amount of time to make a first impression. And if your site is sluggish, conversions are bound to be affected. As a result, optimisation becomes ultra-important.
This post illustrates and explains seven easily-implemented steps that you can take today to improve the speed of your Webflow site.
1. Optimise your images
Webflow will, very helpfully, automatically create different sized versions of the images you upload, and then serve the appropriate size depending on the user's viewport width.
However, the images you upload could most likely benefit from some additional optimisation, as you can often significantly reduce the resolution of your image while having it still appear sharp as a tack – further reducing loading time by saving on file size.
If you're building a new site and uploading images for the first time, be sure to first resize your image so that its dimensions are only as large as required for maximum display size. Then, you can use Photoshop's 'Save for web' feature to optimise the file size. If you don't have this option, file size reductions can be achieved using free online tools such as TinyPNG.
If you're optimising an existing site, you can save hours of manual work by using a low-cost service such as Optily to automatically run TinyPNG on all the images already in your asset library – reducing the data size of your images by up to 80%, and without quality loss.
2. Optimise your SVGs
The SVG image format is often used for logos and icons on a site as, being vector-based, it scales well, and will usually have a smaller file size than other image formats.
However, complex SVGs can usually be optimised further still, as they will often contain lots of layers, paths, and groups that are unnecessary for final display, and can be 'flattened' to reduce complexity.
The process can be completed in any design software, such as Figma, XD, Sketch, or even online.
3. Don’t overlook the fonts
Fonts are often overlooked when it comes to site speed optimisation. Consider these two points:
- Google Fonts should always be manually downloaded and then uploaded to Webflow to make use of their CDN.
- Fonts should be optimised with FontForge before they are uploaded to Webflow.
Fontforge is a great tool because it allows you to delete unnecessary characters from a font – like a foreign language, or special characters that won’t be used on your English website. The same goes for other language sites where English may not be required.
Although fonts can come in a variety of formats, most modern browsers support the optimal WOFF2 format, so this is generally the only version you will need to reference.
And don't worry – if a content update makes use of a special character that's no longer in your optimised font file, it will simply fallback to the default system font and display the character using that instead.
4. Defer your script loading
It is commonplace to reference third-party scripts in a Webflow site to enable non-native functionality. Just like fonts, these should also be uploaded to the Webflow asset library to enjoy the CDN benefits.
Additionally, if the use of the script is not essential to the initial display of the page, its loading should be 'deferred' until after the markup has finished rendering so that the user isn't staring at a blank page while the browser loads the asset.
This can be done by simply adding the 'defer' attribute to the script tag, wherever this is referenced.
5. Get rid of unused styles
Another often-overlooked step is getting rid of the created styles and classes that we have removed from elements on our site, but not from the stylesheet.
Excess styles are often created during development which end up being removed from elements, but they’re still adding to the weight of the site itself.
Just head on over to Webflow's Style Manager and hit “Clean Up” then “Remove” to get rid of the unused styles. It’s as easy as that!
P.S. If you're using a design system (you should be!), all your predefined styles should be on a draft 'style guide' page so that they don't get accidentally cleaned-up if not currently in use anywhere else.
6. Lazily load your images
By default, Webflow “lazy loads” images, which means if they're 'below the fold' then Webflow won't load them until they are scrolled into view. However, if the load setting is accidentally changed during the development process, they might no longer load lazily.
Here’s what it should look like: go to your image settings and hit “Load.” Then “Lazy: loads on scroll.” It’s tedious, but make sure this is the setting for all your images.
PS. If you actually want an image to be visible as quickly as possible, such as the brand logo in the header, use the alternative setting "Eager: loads with page" to prioritise the loading of it.
(Pro tip: Background images don’t enjoy lazy load settings and will eat up your load time, so minimise the use of these as much as possible.)
7. Remove unused interactions & triggers
We often make interactions and triggers in development that don't make the final cut, so there might be some unused ones lingering around that need to be cleaned up.
Just go to “Interactions” then hit “Clean Up” and “Delete” your unused interactions and triggers.
If you’re stuck for ideas and looking to improve your site speed, this might be an easy fix for you.
Conclusion
By following these seven simple steps, you can easily start to optimise the speed of all your Webflow Projects.
Be sure to share this article with people who might also need to optimise their website speeds.
And of course, contact us any time you need to optimise your Webflow site to improve your Google ranking (or for any other reason).
Have a tip that’s not on this list? Send us a message so we can try it out!
