7 Actionable Steps for Webflow Page Speed Optimizations

Page speed impacts conversions and is crucial to rank high on Google. The observations show that 90% of people are going to leave a site within 10–20 seconds.

This makes optimization a thing of consideration.

The goal of this post is to demonstrate and educate about Webflow Page Speed optimizations.

We had an opportunity to diagnose a site of our client on SoftwareSupp and found out these7 Actionable Steps that can be implemented straight away to improve the performance of your Webflow site.

1. Optimizing Lottie

The Webflow designer takes Lottie as SVG rendering by default which is good for quality but takes more time to load. The other option we have is Canvas Rendering which is much faster to render.

2. Optimizing SVG

The SVG images are preferred for images that need to scale like the logo but we often get wrong with SVGs. We use them directly in Webflow without minifying. An SVG could consistof many layers, paths, and groups that need to be removed for reducing the load on our site.

This can be done in any design software like Figma, XD, Sketch, or in some online tools.

3. Optimizing Fonts

Fonts are the most underrated things when it comes to optimization. The site’s 10%-20%load is with custom fonts themselves.

There are two things with fonts.

(1) Fonts are required to be optimized with software like Fontforge before uploading to a Webflow Project.

(2) Google Fonts should be manually downloaded and uploaded to avoid loading unnecessary scripts.

Fontforge allows deleting all the unnecessary characters that come bundled in a font like characters of a foreign language and other symbols which may not be required on anEnglish (or your language) website.

Make sure to generate the optimized fonts as .WOFF2.

There’s an extra step with Google fonts to manually download them from: https://fonts.google.com.

If ever there is a need to update text on the site and the required character is not available then that particular text will be loaded in the system font so ultimately there would be no impact on the content.

4. Defer Scripts

The scripts used on your site can be set to defer. This can be done under Project Setting’s custom code and also under Page Setting where the script has been used.

The “defer” tells the browser not to wait for the script and load the page while the script continues to load in the background.

This can be done by adding “defer” in the custom code before the src tag.

Here’s an example,
<script defer src="https://softwaresupp.com/blog/test.js?speed=1"></script>

5. Unused Styles

We create styles and classes during development but often end up removing them from theelements but whether linked to an element or not these styles and classes add to the site storage size.

Here’s the process,
Style Manager → Clean Up → Remove

6. Lazy Load Images

Webflow is set to lazy load images by default but sometimes there could be images that get escaped or by error we end up changing its load.

Here’s the process:
Image Settings → Load → Lazy: loads on scroll

Also, avoid using images as background as this only works with Image elements.

7. Unused Interactions & Triggers

While development we create interactions and add triggers but there could be some unused ones that can be cleaned.

Here’s the process:
Interactions → Clean Up → Delete

Do test these steps on your Webflow Project and share with people who could be benefited!

Please feel free to contact us if you need an expert to handle your Webflow Page SpeedOptimizations and help you in getting a high Google PageSpeed Insights Score.