Understanding What Slows Down Your Website
The first step is understanding why your website may be slow. There are various tools to analyze page loading speed, but one of the most commonly used is PageSpeed Insights, introduced by Google in 2009. Another tool often used is Lighthouse, available through Chrome's developer tools.
Google's PageSpeed Insights and Lighthouse evaluate your site based on several factors:
- Largest Contentful Paint (LCP): Measures how quickly the main content of the page loads.
- First Input Delay (FID): Measures the time from when a user interacts with your site (such as clicking a button) to when the browser responds. A shorter FID guarantees a better user experience.
- Cumulative Layout Shift (CLS): Measures unexpected shifts in page layout during rendering.
- First Contentful Paint (FCP): Measures how long it takes for some content to appear on the screen after the page begins loading.
- Interaction to Next Paint (INP): Measures how well a site handles user interactions (ensuring that each click results in a fast response).
- Time to First Byte (TTFB): Measures the time it takes for the server to respond to a request.
Make sure to check results for both desktop and mobile devices.
Now, let’s look at how to optimize your Webflow site for faster speeds.
1. Webflow’s Built-in Optimization
Webflow offers several performance-enhancing features out of the box, thanks to its ultra-fast CDN hosting and lack of heavy plugins. Here are some of Webflow’s built-in optimizations:
- Minify CSS/HTML/JS
- Lazy load for images by default (excluding background images)
- Automatically adjusts images for different screen sizes
- Preload links with "prefetch" or "prerender" settings
- Smoother font loading using the “Swap” setting in font display options
While these built-in features help improve performance, they aren’t enough if you want to create a top-performing site. There’s plenty more you can do.
2. Third-Party Scripts
Third-party scripts are one of the most common causes of slow website performance because they are often not optimized. However, most websites rely on third-party scripts in some way.
Limit Scripts to Relevant Pages
If you only use a script on one page, there’s no need for it to run on all pages. Only include scripts on the pages where they are needed.
Move Scripts from the <head> to the <footer>
Place scripts just before the closing </body> tag. Browsers load pages from top to bottom, so placing scripts at the end ensures they don’t block the page’s main content from rendering.
Add “async” or “defer” Attributes
The async tag allows scripts to load alongside the HTML. It’s ideal for scripts that don’t need to access DOM elements or have a strict execution order, like analytics.
The defer tag loads scripts in the background and executes them after the page has finished rendering. It’s useful for scripts that need to access the DOM or rely on execution order, like JavaScript animations.
Delay Script Loading
For non-essential scripts (like live chat widgets), you can use the setTimeout function to delay loading by a few seconds.
Load Scripts Based on Conditions
Sometimes scripts are only needed when specific conditions are met. For example, ad scripts can be set to load only when a user clicks on a particular campaign.
3. Image Optimization
Images are one of the heaviest assets on a webpage, offering the most room for improvement. While Webflow handles some of this optimization by default, there’s more you can do.
Use WebP Format
Webflow supports the .webp image format, so be sure to use it. You can also use a service like Optily to automatically download, compress, and re-upload all images within the CMS.
Lazy Load Images
By default, Webflow lazy-loads all new images, but this isn’t necessary for above-the-fold images. Instead, set lazy loading for images that appear below the fold.
Avoid Background Images
Background images can’t be lazy-loaded or optimized. Instead, use an <img> element styled with the object-fit property for better control.
Use SVG for Vector Images
Most icons can be replaced with SVGs, but always compare SVG with WebP to ensure the smallest possible file size.
Embed Lightweight SVGs
If your SVG image is lightweight, embed it directly into the page's code. This method is only effective for small SVGs, as large ones can slow down the site.
4. Font Optimization
Webflow provides several built-in font optimization features, but there are additional tricks to improve performance.
Limit the Number of Font Types
One to three fonts are usually enough. System fonts like Arial or Helvetica are often the best choice.
Preload Fonts
Preloading fonts is an advanced trick and may not be necessary if you’ve already applied other improvements. Fonts are typically loaded after the CSS file is parsed, so preloading speeds up the process.
However, be careful: loading fonts via custom code can disable Webflow’s dropdown options for font selection. If you attempt this, make sure to upload the fonts, select them in your classes, and then remove them before adding custom code.
5. Video Optimization
Videos are large and can impact performance. Webflow automatically compresses video quality to improve optimization, but keep file sizes in mind.
6. Website Structure
Improving the foundational structure of your website can make a big difference.
Clean Up Unused Classes and Animations
Deleting elements or pages doesn’t remove associated classes or animations from the file. Regularly clean up unused items.
Organize Styles
Organize your styles so they can be reused efficiently. Set fonts, text sizes, colors, padding, and margins at the root level.
Disable Unused Features
If your website doesn’t need e-commerce features, disable them. E-commerce templates add extra JavaScript and pre-built pages that slow down the site.
Prioritize the First Section
The first section of your website is critical since it must load all at once. Keep it lightweight by avoiding heavy images, animations, and code.
Continuously Test
Regularly test your website’s performance to identify areas for improvement.
In Conclusion
While Webflow is a powerful and user-friendly tool, optimizing performance can be complex. If your site was developed by someone else, or if it’s large and image-heavy, implementing these changes can be time-consuming and technically challenging.
As official Webflow Ambassadors, offer no-code education, we manage one of the largest Webflow communities in Japan, and specialize in Webflow website development. We also provide the analytics needed to help grow your business.
If you’d like to improve your website’s performance, feel free to contact us at Supasaito!
.svg)
