Performance Series - Quick Wins

The optimisations we will discuss are often the easiest to process and will give you the most performance gains. There are a lot more optimisations possible but they often take a lot more effort. These optimisations should get you a fast running website on almost all hosting platforms. The tools mentioned below are based on WordPress. For popular CMS systems there are often similar tools available.

Caching

A lot happens in the background when your loading a webpage. Grabbing data from a database, processing data, generating the HTML, retrieving files from the server and more. Using cache is one of the optimisations that often makes the greatest difference in performance. Caching allows storage of data for reuse. In this post we'll talk about service side and browser as these are often relatively easy to use.

Server Side Caching

Pages being requested by the user often require a lot of work before being shown. This work is often the same for all users. A blog list as example shows a list of posts that only change when a new post has been added. It is a waste of work to gather and format all the data again and re-generate the HTML. Using caching the resulting HTML can be stored. On each new request this cached result can be fetched instead. The loading speed can sometimes be reduced from seconds to milliseconds (varies per setup) without much effort.

Tools: WP Rocket (paid) or W3 Total Cache (free)

Browser Caching

Pages ion a website often contain a lot of the same files. Files like fonts, images and styles are often used on all pages. Downloading them again on each page visit is a waste. That's where browser caching comes into play. The server can inform the browser of how long the files can be stored in the browser. On loading of new pages the browser will first check if the file is already cached locally. This saves a lot of data and will decrease your page load time. Especially noticeable when in low bandwidth. 

Tools: WP Rocket (paid) or W3 Total Cache (free)

Image Optimisations

Images can be one of the largest parts, data-wise, of your website. Images are often uploaded without resizing and compressing. Causing them to be much larger than they have to be. This can make your website very large and slow to download. They can also be in a format (e.g. PNG) that is not optimal. 

Image File Type

Using the correct file type for your image can make a large difference in image size. The filetype WebP is now supported in most browsers. This is a relatively new file type that has better performance than PNG and JPEG. Often resulting in file sizes ~25% lower than JPG/PNG. If you are not able to use WebP than you should use JPEG and only use PNG when you need to have a transparent background. JPEGs often require less data.

Tools: TinyPNG (free)

Resizing Images

Before uploading your images you should always check the required size for the image. Is the image only shown in a 500x500 resolution on your website? Than you don't have to use a 2000x2000 resolution.

Tools: Preview (Mac) or ImageResizer

Compressing Images

Your image can be compressed by using online tools or plugins. This compression can often save half or even more in size. Depending on the image. These compression tools remove data that is not needed or pixels that aren't visible to the human eye.

Tools: TinyPNG (free)

Video Optimisations

Same as for images, videos must also be optimized. They are often in a high quality and unoptimized. Do you really need a 4K auto-play video or is 1080P good enough? This will save loads of data. Using video optimization tools you can also place the video header at the start of the video file (automatically). This header is required to be read before the video can start. By default this can be anywhere in the file. Placing this at the front allows progressive video loading. This will improve the speed at which the video will start.

Tools: Handbrake (desktop application)

Lazy Loading

Not all images need to be loaded immediately when you open a webpage. Most images are only visible after scrolling down. Using lazy loading you can make images load only when they are almost in view. This will reduce the initial load of your webpage. Browsers support that feature natively since 2020. To make use of this feature you can add 'loading="lazy"' to image HTML tags. Tools like WP Rocket or W3 Total Cache can also add this automatically for you.

Tools: WP Rocket (paid) or W3 Total Cache (free)

Overuse and Unused Tools

A simple but often overlooked performance issue is the over-use of tools and keeping tools installed that aren't used anymore. These tools often load CSS and JavaScript or run code in your backend. This causes slow-downs that are unnecessary. Always uninstall or at least disable tools that aren't used and make sure you only install tools you actually need. Sometimes external systems can be used if WordPress plugins are slowing down your website too much.

Hosting Platform

As mentioned at the beginning, with the above points you should be able to get a fast Web site on most hosting platforms. However, your hosting partner can still have a big impact on performance. Consider enabling the latest PHP versions or activating JIT for accelerated compilation of your website's PHP code. In most cases, your website also resides on a server shared with many other websites. These can be overloaded by too many other websites. Your website may suffer from this as well.