Page Load Optimisation ​

The point is anyone can make a fast website. Making a website that looks good and has the functionality you want while being high-performant is where the challenge lies.

Images ​

Let’s start with one of the big performance sinners – images. Images take up a huge part of the website's total size.

As of August 2022, images made up on average 45% on desktop and 44% on mobile of a page’s total weight. The number of image requests made up 32% on desktop and 30% on mobile of a page's total requests (Source: HTTP Archive).

Optimizing the images can therefore result in big and easy wins. I’ve previously made an article about this exact subject: How to optimize your images for performance.

I will quickly summarize the points from the article and move on to a concrete example.

Choose the right image format (JPEG, PNG, GIF, SVG, WebP) ​

Each image format has its purpose. For instance, PNGs can be great for icons and smaller images, but the file size can quickly become pretty huge for larger images.

Be careful with using animated GIFs ​

GIFS can be fantastic for small “videos”, for instance in tutorials, but they come with a cost. File sizes can be enormous, so consider using a video instead.

Always try to compress images ​

It always amazes me how many kilobytes can be saved by running images through a compressing tool. I once managed to compress an SVG file with around 97% – absolutely bonkers.

One of my all-time favorite tools to use is TinyPNG (aka. TinyJPG). Their UI is beautiful, dead simple and more importantly – they have some insane compression results. They allow compression of PNGs, JPEGs, and WebP-files.

Remember to always check the quality after. One thing many compression tools don’t do well is trying to compress gradient colors – the result can be quite janky.

Scale down your images ​

There’s absolutely no reason in serving a 3000px width image. Moreover, there’s no reason in serving a 500px width image if you only render it in 300px.

Serve responsive images ​

Instead of using a single image for both desktop and mobile, consider serving 3 – 5 different sizes of the image depending on the viewport.

Check out Mozilla's article on responsive images here: Responsive images on MDN.

Lazy load images ​

Never load images until it’s necessary. Lazy loading images helps reduce the number of initial requests and page size resulting in a much faster site.

Nowadays we’re blessed with a built-in lazy loading attribute supported by all major browsers: Browser-level image lazy-loading for the web.

Use a CDN ​

Want to know how to speed up web page loading time? Shorten the distance information has to travel between your server and the end user. Makes sense right? An easy way to do that is to use a CDN. A Content Delivery Network (CDN) is a geographically distributed group of servers (also known as POPs). They work in tandem to deliver your web content more quickly. Whether your site uses HTML, JavaScript, stylesheets, images, or videos, a CDN is an excellent way to increase website speed.

Use Gzip for file compression ​

GZip is a form of server-side data compression that’s helpful in reducing page loading time. In other words, it takes a set of data and makes it smaller for more streamlined, efficient delivery to a user’s computer. Gzip compression reduces the size of your HTML, stylesheets, and JavaScript files. Note, it does not work on images or videos, as these are already compressed separately.

The good news is that major CDNs have GZip compression enabled by default, so as long as you are using a CDN, your website is most likely already covered.

Reduce the number of HTTP requests ​

A highly effective method for reducing page load time is the reduction of the number of HTTP requests a page makes. When someone visits a web page, the browser pings the web server, requesting the files that make up the content for the page. When the server responds with the requested files, the browser then renders the content on the page. The browser makes a separate HTTP request for every file comprising the page’s content. The more files on the page, the more HTTP requests, and consequently the longer your web page takes to load.

Minify CSS and JavaScript ​

Another effective page load time reduction tactic is to minify JavaScript and CSS files. Minification is a process that strips out all unnecessary characters, comments, and spaces in the code, and uses shorter variable and function names, thereby streamlining the code. The fewer bytes of data in your code, the easier and more efficient the page loading process.

Clean up your database ​

Similar to your media library, your database can become bloated over time with unused information like photos, files and so on.

Database optimization is the process of identifying and eliminating garbage data and unused content from your database. In turn, this helps your web hosting server to fetch requested information more efficiently.

Remove render-blocking JavaScript ​

When your web pages load in a browser, a call is sent to every script, often at other URLs. That queue of scripts needs to be completed and empty before the page is visible to the user. Render-blocking JavaScript files become quite a roadblock in these queues, as they can take time to load, blocking the primary content on the page from being rendered during this time.

By default, web browsers load resources in the order they occur in the HTML. Sometimes, when the resources require a lot of computing resources on the user’s device, they can cause a substantial delay in the visual rendering of the page. However, many of these scripts are not necessary for initially viewing the web page. In many cases, it would be fine for these scripts to run after the page has loaded.

To resolve this issue, set your render-blocking JavaScript to load asynchronously or remove unused or unimportant scripts (or unused portions of your JavaScript resources).

Avoid URL redirects ​

A URL redirect is an instruction or method that automatically takes a user from one URL to another. There are different ways to implement a redirect. A 301 redirect is the method used to retain the SEO value of the forwarding page. But no matter the type of redirect, this process slows down the speed of your page, as it takes time to go from one file to another. Therefore, try to avoid or minimize the number of URL redirects whenever possible.