Maximize Your Website Performance: Discover How To Improve your Page Speed!

In this article I am going to show you the strategies Stormfors used to make our client VO2's Webflow website score a 99 on googles page speed index.

Why is pagespeed important?

Here at Stormfors we spend a lot of time obsessing over Page speed. When we build websites in Webflow we consider page load speed to be one of the most important aspects. It has a big impact on several factors such as user experience, search engine rankings and conversion rates. Down below are the strategies we used to make our client VO2's website speed score top the charts in google's page speed index.

Google PageSpeed Results for VO2. A client website we built in Webflow in 2022

Optimize your images

Images often account for majority of a webpages' total file size so optimizing them properly will help reduce their overall weight significantly and thus boost the pagespeed drastically! You should compress all images before uploading them onto your server or use image optimization plugins in order to automatically optimize any uploaded photos/graphics that may otherwise cause slower loads times due to large filesizes. To compress your images you can use tools like Adobe Photoshop or similar free photo editing tools. There are also online alternatives like tinypng and optimizilla that get the job done quickly.

Use photoshop to compress you images and save them in the right format.

Free image compression tools

Here are some free alternatives to photoshop for image compression.


Optimizilla

https://imagecompressor.com/

Tiny PNG

https://tinypng.com/

Compressor

https://compressor.io/

Image format - Webp

At Stormfors we like to use the latest in tech and when it comes to images that is a format called WebP. WebP is an image format developed by Google that can significantly reduce the size of images while also maintaining a high quality. By using WebP images on a website, it is possible to significantly improve page load times. Converting images to WebP can be made in photoshop and other tools but it can also be made directly inside of Webflow. This makes it very easy to set up optimized images for sites built inside of Webflow.

Other image formats

Here are some other image formats that are good to know about. Me and my fellow colleagues at Stormfors love to geek out about these things. Knowing the subtle differences between image formats can help you make better decisions when picking images for your website.

  • .PNG
  • .JPG
  • .SVG

What is a PNG?

PNG is a lossless image format that is best suited for images with large areas of solid color and crisp lines, such as logos or text. PNG images support transparency and generally have larger file sizes compared to other formats like JPG or SVG. However they support lossless compression meaning you can compress and decompress the file many times without loosing image quality.

What is a JPG?

JPG is a lossy image format that is best suited for photographs or images with complex details and gradients. JPG images do not support transparency and have smaller file sizes compared to PNG, but may lose some image quality when saved at high compression levels.

Popular meme about JPG's

What is an SVG?

SVG (Scalable Vector Graphics) is a vector image format that uses geometric shapes and lines to represent an image. SVG images are resolution-independent, meaning they can be scaled up or down without losing quality. They are generally smaller in file size compared to PNG or JPG and support transparency, making them suitable for use on the web.

What is the best image format to use?

In general, PNG is the best choice for images with transparent backgrounds or sharp, defined lines, while JPG is better suited for photographs and complex images. SVG is ideal for simple graphics or logos that need to be resized frequently. It is important to choose the right image format for each use case to ensure the best balance of quality and file size for a website.

Reduce HTTP requests

The second thing we consider when building websites is the amount of HTTP requests being made. Every single element (images, stylesheets etc.) used on a webpage requires an individual request from the browser when accessing said page. This causes increased wait times if there are a lot of requests. These requests can include external scripts such as Google Analytics tracking codes & social media widgets. These can reduce the loading times and therefore it's beneficial to minimize these wherever possible. You can also combine multiple style sheets into fewer ones thereby reducing the amount of queries being sent out each visit.  

It's very easy to minify your Javascript and CSS inside of webflow. Make sure to activate the minified options under the publishing tab in site settings.

Minify JS inside of webflow

Enable Browser Caching

Browsers cache resources locally after they have been downloaded once so that they can be used more efficiently in the future. This means unless a resource has changed, it will not need to be re-downloaded by browsers every time someone visits your site; thus reducing load times significantly! You should enable caching on server side settings and also configure the expiration date settings accordingly.

Clear cache keyboard shortcuts

Here are the keyboard shortcuts for clearing the cache on the three biggest browsers:

Google Chrome:

Windows: Ctrl + Shift + Delete
Mac: Command + Shift + Delete

Mozilla Firefox:

Windows: Ctrl + Shift + Delete
Mac: Command + Shift + Delete

Microsoft Edge:

Windows: Ctrl + Shift + Delete
Mac: Command + Shift + Delete

Note: In all three cases, a dialog box will appear where you can select the specific items you want to clear, such as the cache, cookies, and/or history. You can also choose a time range for the items you want to clear.

Use Content Delivery Networks(CDN's)

A Content Delivery Network (CDN) is a group of servers spread across the globe that work together to give you quick access to internet content. Nowadays, most websites like Facebook, Netflix and Amazon rely heavily on CDNs for their online traffic - with everything from HTML pages, javascript files, stylesheets and pictures being served up fast. Not only do these networks increase speed but they can also help protect against common threats such as Distributed Denial of Service (DDOS). We recommend using a CDN for all modern websites. You can read more about the hosting we use at stormfors here: https://webflow.com/hosting

Leverage Browser Preloading

Prefetching and preloading are two key techniques for making websites faster. Prefetching allows a browser to download content ahead of time, so it can be cached and used when needed later on. Preload is another type of resource hint that tells browsers which assets are important and should be downloaded first, even if not visible yet on page-level (such as Web fonts). To ensure maximum performance improvements caching strategies must also be optimized using HTTP headers & ETags to store static elements locally after their initial request allowing them faster delivery upon subsequent visits instead of requesting over network each single time.

Inside of webflow this can be controlled on each link element. Just select the link you would like to preload a page from and select prefetch.

Set links to preload or prefetch to have the browser download linked pages before visitors click on them. (image rights owned by webflow)

Three “preloading” options are available from the settings panel for links on your page:

Default: linked page loads after the visitor.

Prefetch: tell the browser to download the linked page’s assets as soon as it has some free time (after the current page is fully loaded)

Prerender: tell the browser to fully render and start downloading all necessary assets (css, images, javascript) for that page before you open it. (This is a very heavy strain on the browser, so you should only use this option for main links like call to actions or other links you think visitors are very likely to click.)

A note of caution: these prefetching and prerendering options can definitely improve performance if you’re relatively certain a user will load those linked pages next — however if you aren’t so certain, these preloading methods can place unnecessary strain on your browser and slow down overall performance.

Source: https://webflow.com/feature/enable-link-prefetching-and-prerendering-to-improve-performance

In conclusion

Optimizing images, reducing HTTP requests, enabling browser caching and minifying JavaScript are all important steps to take when aiming for faster loading times on a webpage. Additionally using Content Delivery Networks (CDN's), Gzip compression & preloading can also help boost performance significantly.

Felix Hellström
Digital Designer