These days, people are used to things happening instantaneously. We expect to be able to load a web page in a matter of seconds, and if it takes any longer than that, we're likely to click away in frustration. This is why page speed is so important for both web users and search engines. A slow website will not only result in a poor user experience, but it will also hurt your chances of ranking well in the search results.
Fortunately, there are a number of things you can do to improve your Webflow site's page speed. By following some best practices and employing some of the latest optimization techniques, you can ensure that your site loads quickly and efficiently. So whether you're just getting started with Webflow or you've been using it for a while, read on for some tips that will help improve your website's performance, we’ll start with the basic methods and then transition to more advanced webflow page speed optimization strategies.
According to Google, we can see the chart below is saying that most people will leave a website if it takes more than 3-5s to load. As unfortunate as that statistic is, we can still optimize our websites to load fast and avoid losing potential customers.
There is a tool developed by Google called PageSpeed Insights Tool, where you basically input your website URL and it’ll give you the metrics, issues, and recommendations in regards to your page speed.
It's likely that you’ve used images on your site without really caring about what the file format is, but we have different image file formats for a reason. We’ll go explain the most common ones and what they’re each best suited for.
JPEG is a compressed/processed image file format that was developed in the 1980s-1990s, it compresses unprocessed/raw images into much smaller file sizes without affecting the image quality by much, which makes it very convenient to use, in fact, most of the images on the web today use JPEG. It is best suited for photographed/realistic/lifestyle images.
PNG is a lossless/uncompressed file format, meaning they store the data of an original image, as a result, they maintain a higher image quality at the cost of larger file sizes. Unlike JPEG, a major advantage of PNG is that images can have transparent backgrounds, making it ideal for graphics, logos, cutouts, etc. Due to larger file sizes, you should try to use PNG as little as possible, which in most cases would be using it for transparent images.
It stands for Scalable Vector Graphics, which is also known as the text-based file format. SVG file format is built specifically for vector-based graphics, hence the name. Unlike other formats which use pixels to render an image, SVG uses text data to display a particular shape and color. As a result, SVG file sizes are significantly lower than pixel-based file formats. SVG is the preferred format for vector-based graphics like logos and other illustrations. You can still technically use JPEG or PNG for graphics, but they’ll come at much larger file sizes, resulting in a slower website.
WebP is an image format developed by Google to be used for the web in 2010. It has better compression and quality retention capabilities compared to traditional image formats. Since it was released in 2010, its not as widespread as JPEG and PNG yet, but all major browsers today support WebP images. If your website builder platform supports WebP, then make sure you use it instead of JPEG and PNG images.
If you like to dive deeper into this, then checkout Google’s web.dev page about choosing the right image format.
In addition to choosing the right image format, you can still run into large file sizes. Ideally, you need to keep image file sizes under 200kb or under 3Mb of total images for each page. You can use TinyPNG to compress image file sizes or use Adobe Photoshop if you want more control over the compression by using the Export feature.
Image resolution is directly correlated to file size, the larger the resolution, the bigger file size. However, you don’t want to compress the file size of a high resolution (ex: 4k image) image and put it on a small section of your website, because all those extra pixels won’t make a difference on how the image looks and may even make it look worse since all those extra pixels are crunched into a small image, the image will look pixelated/distorted as a result.
You need to have an image that is compressed but also has the resolution of the section on the website it's going to be placed on, for example, if the image is 500px tall, then the section of the website for that particular image needs to be close to 500px (preferably) as well.
Using a lot of third-party scripts will reduce your website performance significantly, so it's best to use the ones that you really need and remove the ones that aren’t beneficial. Every website should have a Google Analytics script to see how the website is performing, and everything on top of that should be up to you to decide whether it's crucial for your website or not.
You most likely have used reCAPTCHA on the web where it asks you to match the matches based on what is being asked before submitting a form or creating an account. reCAPTCHA is designed to prevent or at least reduce the number of bots/spam on your website forms, but that will also affect your website’s page speed. This system is more useful if you’re running a website with loads of traffic, but for a small business, you most likely won’t benefit from it.
Google Tag Manager makes it very convenient to install multiple scripts on your website, and gives you more control over the scripts without playing with code. Instead of pasting multiple scripts on your site, you just need to paste one script for Google Tag Manager, and everything else will be pasted in GTMs website.
Defer scripts
GTM has a very important feature in its script that will increase your website performance by a large margin. By default, when you open a page, the scripts will load together with the page, and that will slow down the page, this is known as Asynchronous (Async) function In javascript. We also have another function called “Defer”, which basically defers/holds the scripts from initiating until a page is fully loaded. To change this, head over to the GTM code and change the word “async” to “defer”. This will defer all the scripts under GTM. This would be a lot more difficult without GTM, since you have to code the defer script manually.
More script control
Another benefit of using GTM is the control you have on how your scripts will load. For example you can pause certain scripts without having to remove the entire code, and enable them whenever you want. You can also add filtering options that will control how the script will initiate, such as enabling a script only for specific pages, adding exceptions, linking multiple scripts, and much more.
Easier script management
Having your scripts all together in one place makes it much easier to manage them without having to shuffle between pages in Webflow to find the scripts (especially for large websites). GTM makes your scripts much more organized and saves you the headache as well.
This will be a hard one to accept for many web designers/developers. As much as you like to implement animations that make your website look more sophisticated, the performance will take a big hit as a result. Only use javascript animations if they play an important role in conveying a message or make navigating through the information on the site easier.
Each and every font will have a different impact on the speed of your website, with so many different types of fonts to pick from, it can be quite confusing to know which ones are best suited for your website. In most cases, you should stick to sans serif fonts, because they have smaller file sizes and load faster due to their simple and clean look. Serif fonts like Times New Roman aren’t as web-friendly as sans serif fonts, but they're still used by some major media organizations such as New York Times.
Fonts we recommend for the best page speeds are:
Another tip is to self-host your fonts rather than having your site connect to an external API like Google Fonts. Downloading the fonts into the site will improve your page speed by a considerable amount.
So there you have it, we’ve covered pretty much everything you need to know when it comes to optimizing Webflow websites for the best page speed performance that Google will reward you with ranking benefits and convert more customers coming through your site.
Contact us today to get an audit of your website and learn how we can help your business generate results.