Having worked with several Webflow clients, I've frequently encountered a common request: "Our previous developer built our website, but it loads super slow. How can we make it faster?"
To address this, I've compiled a comprehensive list of almost every step I've used to help clients optimize their page speed.
Font loading:
How you load fonts is super crucial in a large webflow build. However the default implementation in which fonts are loaded in Webflow is done very poorly. This is what you should do.
- Minimize the number of fonts you should use in a page. If possible use system fonts-if site speed is your main goal(This way, when the website loads it displays the users system default font)
- Upload fonts manually; Google Fonts should be manually downloaded and uploaded to avoid loading unnecessary scripts.
- Optimize your fonts with software like Fontforge before uploading to a Webflow Project.
NEVER use the default Google or Adobe fonts from the drop-down menu in the “Fonts” section. They are loaded poorly
Efficient script management:
Third party scripts are probably the biggest reason for slow websites. You'll probably see them flagged as an issue in website performance testing tools like Lighthouse or PageSpeed Insights (PSI).
- Use the
asyncanddeferattributes when loading script tags. This ensures scripts load without blocking page rendering. Place scripts before the</body>tag, except for those needed immediately. - Place all custom code in external files and load them directly into Webflow. This prevents the use of inline CSS and JS, making the code cleaner and more efficient, and avoid placing custom code in the site settings unless it’s needed on all pages.
Media assets optimization:
- Convert images to the WebP format for better compression and quality.
- Whenever possible, export images as SVGs, which are scalable and lightweight.
- When optimizing SVGs, remove unnecessary layers before exporting the SVG image.
- For Lottie files, use the
.lottieformat instead of.jsonto reduce file size. Lottie animations are automatically rendered as SVGs in Webflow for better quality. However, changing the format to canvas can significantly reduce the quality of the Lottie animation - Lazy load images. Images are lazy loaded by default in webflow. However, if the image appears on the first screen, no need to lazy load it, since it will only delay the total load time.
- Avoid using images as backgrounds, as they can't be lazy-loaded or optimized. Instead, use the
<img>tag with the “object-fit” property for the same effect. - You can use them with caution, below the fold of your website after your website loads. Reserve backgrounds for colors and gradients only.
Site Organization:
- Limit the use of nested divs to reduce the number of DOM elements. This makes the website faster and easier to manage. Excessive nesting triggers Lighthouse errors like this:
- Regularly remove unused classes, interactions, and HTML elements. This reduces clutter and speeds up the site.
Other notable mentions:
- Always check the documentation to avoid using deprecated Webflow modules. This ensures your site uses the latest and most efficient practices.
- Utilize custom attributes more frequently when using combo classes to avoid adding extra lines of code to your website.
- Preload Webflow media assets before the full site load. Use "preconnect" or "dns-prefetch" for required origins by adding the following tags to the
<head>:
<link rel="preconnect" href="https://assets.website-files.com">
<link rel="dns-prefetch" href="https://assets.website-files.com">- Implement selective loading strategies for different devices. Load only necessary resources for mobile or desktop to improve performance.
- Preloading directs your browser to load another page before the user clicks on it, impacting website speed as it loads two pages simultaneously. Note that preloading is disabled for all links by default in Webflow.
- Remember to minify HTML, CSS, and JS in the site settings under advanced publishing options.
No one likes a slow website, it SUCKS.
Achieving god speed load times for your Webflow website is crucial for providing an exceptional user experience and improving your site's performance. By implementing the best practices outlined in this guide, you can significantly enhance your site's speed and responsiveness.
For a more comprehensive understanding and additional tips on optimizing your Webflow site's performance, be sure to check out Sommo's in-depth blog post on site speed performance.
Until next time...