6 free website pagespeed & performance improvements

While there are a lot of articles to be found on the subject of pagespeed or improving overall sitespeed, most will come out-of-the-box.

Browsers are already quite smart and fast by default. And even network infrastructure and hosting providers are helping us, without the need to change a single line of code within our website of webshop. This leaves us with almost no excuse to still build slow loading webpages today and offering slow user experiences to your potential customers.

I summed up a few technologies we are given for free, improving UX and maybe your conversion, in preparation of an article on 5G.

File compression (gzip)

A performance recommendation most developers know of, is file compression, better known as gzip (or brotli, since 2015). Gzip being around since 1992, most hosting providers will enable file compression by default, making HTML, stylesheet and JavaScript files considerably smaller.

Leading to file size reduction up to 70%, this is an impressive win and thus individual file sizes are already reduced to a minimum.

Varnish HTTP accelerator

Varnish is already here since 2006 and at least everybody in the (maybe non-SaaS) e-commerce ecosystem will have heard of Varnish cache. Of the top 10,000 sites in the web, 5% used Varnish in 2012. Being designed as an HTTP accelerator, Varnish can often be enabled on hosting-level. Varnish stores data in virtual memory and leaves the task of deciding what is stored in memory and what gets paged out to disk to the operating system.

This means that the Time to First Byte metric could be reduced for content-heavy dynamic web sites.

Preload scanner or look-ahead pre-parser

The preload scanner or look-ahead pre-parser is already around since 2009, even in Internet Explorer back in the days. Not known by a lot of developers, this preload scanner will detect other (critical) resources as rendering is delayed due to render blocking resources. Resources late in the DOM tree will be detected early-on, improving pagespeed out-of-the-box.

When developers would do insensitive coding towards browsers and thus user experience, the preload scanner will improve pagespeed out-of-the-box.

From 3G to 4G coverage

Another improvement where no changes need to be done by developers: Dutch Telecom company KPN was the first to have countrywide 4G coverage in The Netherlands as of 2014.

The average 3G speed in The Netherlands is 7Mbps, where a webpage of 1MB would take slightly more than a second to download (8 bits = 1 byte).
Based on Dutch minimum, maximum and average numbers, this means download speed will improve by at least 1,4 to 21 times, going from 3G to 4G. Theoratically, of course.

Simultaneous downloads with multiplexing

I am talking about HTTP/2, where multiplexing is the heart of this new protocol. It means: multiple HTTP requests can be sent and responses can be received asynchronously over a single TCP connection.

We used to bundle CSS and JS resources (and some still tend to do today), and even come up with sprite images to reduce the number of HTTP requests within the HTTP/1 era.

With HTTP/2 being here since 2015, excessive bundling will often be counter-productive, where we can now have more simultaneous downloads, instead of HTTP/1's limited number of 2 to 8 downloads (depending on your browser) at a time.

Lazyloading images and iframes

This was a long desired wish amongst developers, firstly introduced by Chrome in 2019: Native lazyloading for images and iframes.

Think about product listings within a webshop. Lazyloading will speed things up out-of-the-box, as the onload event isn't delayed by images, and thus your app or third party JS will be executed sooner. Another advantage: Lazyloading images is likely to reduce the amount of downloaded images and thus transferred kilobytes, for example when a user will never scroll to the end of the product listing with related images.