April 28, 2022
8 Practical Steps to Improve my Webflow Site Speed
Having a fast and light website can help improve your SEO, rank higher in Google results & ease the user experience.
April 28, 2022
Having a fast and light website can help improve your SEO, rank higher in Google results & ease the user experience.
Having a fast and light website can help improve your SEO, rank higher in Google results & ease the user experience. To do this, you can compress heavy images, reduce animations, lazy load, and use .woff2 fonts. It also greatly helps to minimize CSS & JavaScript, defer JavaScript, clean up unused assets, and use a more efficient video player.
It's easy to think of site speed as a purely technological thing, but the reality is it also affects the quality of your user's experience. A slow-loading website can create a frustrating experience for your users, and it's our job to make sure they have a positive experience while they're on our site.
Webflow's default settings are pretty solid, but there are a few things you can tweak to make sure your pages load smoothly and quickly. Here's what we recommend:
Compressing your images makes your website faster. An image is a bunch of pixels, and the bigger those pixels are the more data is required to transmit them. It stands to reason then that if you decrease the size of your image files, you're decreasing how much data has to be sent across the Internet to load your page. We suggest images below <100kbs, since 10 images can quickly accumulate to 1mb.
If you have larger images than necessary, this can definitely slow down your site—in fact, some sites are large enough in file size that they could never be loaded in a reasonable amount of time on a slower Internet connection.
Some examples of efficient image compression sites to help you make your work easier:
To help keep your site running smoothly, Webflow has enabled a new feature that will load your images one by one as you scroll over them. This is the lazy load. Its efficiency relies on the fact that you don’t have to wait for an entire page to load all the images all at once.
This is especially helpful to sites that are loaded with image-heavy content that can affect the entire site’s loading time. However, it is also essential to note that this only works for inline images and you still have to ensure that your background images are well-optimized as well.
As we all know, fonts are one of the most important aspects of web design. Nowadays, there is an alternative to .woff font files – .woff2 file extension. It's a newer font format that is designed for speed and performance.
WOFF was created to combat the large file sizes that standard TrueType, OpenType, and PostScript fonts for the web. The WOFF format allowed for these larger font file types to be compressed down into a smaller file that could be loaded with ease and still retain visual quality. However, there were still some issues with how this compression affected load times, so other alternative methods were developed.
The .woff2 format uses a different algorithm for compression, resulting in even smaller font file sizes than what you would achieve using the original WOFF format. It results in less data being downloaded to the mobile device thus resulting in a faster browsing experience for your users. Its advantages are not only its smaller file sizes and faster load times but also its ability to support a greater number of characters per font face.
Beyond images and font types, another culprit in slowing down your website is CSS and JavaScript files. And they're used to implement features we love on the web: drop-down menus, slideshows, video players. We need them to achieve pretty design effects that make our sites visually appealing. And we want them to do so much more than just present text and images on a screen.
One way to address how these could possibly slow down your site is to streamline your site's CSS styles & embedded JavaScript codes that must be loaded onto the user's device in order for the page to load. This is often achieved through using caching strategies and minification techniques. In Webflow, however, there’s an easier way to do this through the advanced publishing options in the project’s settings.
Webflow gives the option to minimize the size of your HTML, CSS & JavaScript files in Webflow.
Caching and minification are essential components of optimizing your site speed as they help ensure that users aren't rendering unnecessary data each time they visit your site.
Unused assets can cause serious performance issues to your site because they prevent important website files from loading quickly. These files include CSS styles, JavaScript, components, CMS data and images. If you're not careful with your unused asset management, you might even end up with massive loading bloat or inaccessible JavaScript that is not being used by any part of your website.
Getting rid of unused assets is actually an easy process to do on Webflow. First, you can go to the Interactions panel and click on ‘clean up’, and then click on ‘delete’. This essentially cleans up any unused interactions present on your site pages. Next, you can navigate to Style Manager and clean up all the unused page elements. You can easily do this by hitting ‘Remove’ and then ‘Clean Up’.
Animations are used to make site pages look more attractive and eye-catching. However, too much animation can reduce web page speed and increase the loading time of your website pages. Animations require large amounts of processing power and can cause serious lag on mobile devices.
Animations are cool indeed and this is not to say you should avoid them entirely. Instead, you could use them as a special kind of feature rather than as a staple of your design. If you do use animations, keep them simple (no bouncing or extreme poses) and keep them few in number.
Just like our previous step, we can also clean unused animated interactions. The secret here is to use less JavaScript interactions & instead replace it with CSS styled interactions which lighter to load.
When it comes to playing videos online, we can't compromise. It's crucial that we choose the right video player for our site so that the videos will play perfectly.
One thing to look up is adaptive bitrate technology (ABR), which means they let us encode videos at different resolutions and bitrates, depending on the speed of your network connection. ABR uses data about your network speed to decide how much bandwidth (or bits per second) each video stream should use. This means that if you select an HD video from YouTube, it will automatically stream at a lower resolution if your connection can't support HD—which will make it play faster. On the other hand, if you select an SD video, it will automatically stream at 720p or 1080p—but only if your connection can support it.
Some of the most recommended video players are:
Defer basically means "to postpone until a later time," or "to delay until later." In the case of the defer attribute in JavaScript, it means you're putting off the loading of a script to a later point in time after the content has loaded.
Here, we're talking about holding off on rendering certain elements and images on a page until after other aspects have loaded, for instance, so that text is readable before images are drawn over it. The reason this technique becomes important for speed is that loading one part of a webpage can affect how quickly or slowly another part loads. The reason you would want to do this is that it can be better for performance--it will likely allow your page to load faster by reducing multiple script requests.
Speed is a competitive advantage, so it's worth taking your time to optimize the speed performance of your website. While there are still ways to make it faster, many of the fixes listed above require little to no effort on your part—and could end up saving you thousands in bandwidth costs. More than that, it will help give your users an amazing experience.
Want to know your site’s performance? Access Google’s page performance tester here.
We are sending a weekly email newsletter answering questions from the space in a condensed format.
You can almost read it in an eye glance.
