Slow Website? Get page loads in under a second

Having a fast website is essential for providing a good user experience, improving conversions and sales, as well as ranking well in search engines (improving your organic SEO reach). No one wants a slow or sluggish website. And, no one wants to use a slow or sluggish website.

In fact, a recent optimisation project we worked on resulted in a significant decrease in page load time, down from 5 seconds to under 1 second. 🚗💨

Optimising a website or app for performance is an art, there are lots of competing factors that result in a fast website. This makes it notoriously hard to measure. It can be very tricky to shave even milliseconds from your load time.

It's important to focus on the basics first before getting bogged down in the finer details of optimisation. In our experience, neglecting the basics is often the reason for slow websites. These basics include optimising assets (images, videos, or music) for performance, implementing caching, and ensuring a separation of concerns. Failing to address any of these can lead to slow loading times and a poor user experience.

Asset Optimisation 🖼️

Images, diagrams, video, or audio, will impact your page load time. Minimising these assets will help improve your page speed. It might seem obvious, but the simplest trick in the book is often forgotten here.

Reduce File Size: Compress your JS, CSS, images, videos, or audio. Use tools like ImageOptim or TinyPNG to compress images without sacrificing quality. Minifying CSS and JavaScript files removes unnecessary characters, such as white space and comments, to reduce file size. Concatenating multiple CSS and JavaScript files into a single file can also reduce the number of HTTP requests.
Picking File Format: Using the right file format can make a big difference; e.g. PNG, GIF, JPG (JEPG), WEBP, or AVIF. JPG is better suited to photographic images, whilst PNG's work well for non-photographic images. Animated GIF's are often larger than videos. WEBP can cut image size down by 25% on average.
Resize: An image or video will take up fixed height and width on your page. There is no need to send a larger than required asset. You might want to supply them at twice the number of pixels they show at for retina displays like Apple iPhones.
Optimal Options: Modern browsers support the <picture> tag and srcset. This allows the users device to pick the most appropriate asset for their device. If they don't support AVIF they can fallback to the JPG, if they have a large display, or their device is portrait they can use the best image.

CDN

Reducing the distance between your website and your end user will speed up your load times. The closer every part of your website is, the less time it needs to travel and reach your user. A Content Delivery Network (CDN) is a distributed network of servers that are used to deliver web content to users based on their geographical location.

CDN's can distribute the load and improve the performance of the website for users in all locations. They often provide additional functionality like gzip which can reduce page size further.

Caching

Nothing is closer than already being on the users device. Telling the browser to cache (store a copy of the asset locally) and use it for future visits saves the user having to make requests for the same asset time and time again.

You can apply this concept at every stage of your website. There are several types of caching that can be used to improve the performance of a website:

Browser caching: When a user visits a website, the browser stores a copy of the web documents in the browser cache. This allows the browser to load the website more quickly on subsequent visits, as it does not have to download the same content again.
Server-side caching: Web servers can also use caching to store frequently accessed web documents in memory, rather than having to retrieve them from the disk or a database on each request. This can significantly improve the performance of a website, especially for websites with high traffic or dynamic content.

Separation of Concerns

Separation of concerns refers to the practice of dividing a web application or website into distinct functional areas, each of which addresses a specific concern or responsibility. You don't always need to send each user all of the JavaScript or CSS for the site if they are only accessing one part of it.

Imagine your website has two parts, a blog (that is public and everyone can see) and an administrative area (only admin users can use). It doesn't make sense to send all the admin functionality and styles to every user. By dividing up the Javascript and CSS you can avoid sending more data than you need, stream lining the experience.

Still Slow? 🐌

The basics aren't always enough, for persistent performance issues you can start to think about more complex performance improvement techniques. The good news is that most apps and websites can be transformed without a major rebuild or disruptions. So, if you find yourself with a website that is slower than you’d like, get in touch and our team will be able to help.