How to optimize your website performance

How to optimize the performance of your website

Look around the internet, and you’ll find plenty of statistics quoted about how little time people are willing to wait for any website to load before losing interest (in that case, don't always blame the web hosting provider). 

Those with fixed broadband connections expect a website to appear almost instantly, and even mobile users don’t have infinite patience. 

According to research, the optimal load time for a page is three seconds, though the majority of sites are closer to double that – or more. And if you go much beyond 10 seconds, the majority of people are likely to abandon the page and go elsewhere. 

How long a web page takes to appear on a browser depends on factors divided between both the server and the client device on the other end.

While it isn’t possible to speed up all users due to things beyond the web designer’s control, it is practical to make a site as efficient as possible, improving performance for the majority of visitors. 

Enhanced speed can be achieved with a range of different methods, but there are three central pillars to improving site performance. These are enhanced hosting, site optimization, and also some platform-specific considerations.

The importance of hosting

The importance of hosting

How much a site spends on web hosting is usually in proportion to the number of visitors expected on any given day, factoring in how long each stays and how many pages they browse.

This is the primary reason, along with security concerns, why relatively few companies host sites internally. 

Typically, web hosting is ‘virtual’ in that a specific piece of hardware isn’t allocated to the website – rather, it’s shared with other sites through virtualization. 

The beauty of having this solution is that more resources can easily be allocated to a site in times of high demand, providing the hosting agreement allows for this flexibility. 

What’s important to decide is the projected traffic you expect to receive, and to elevate your service appropriately.

If you have a rapidly growing site, but due to the hosting level it starts to become unresponsive when a flood of visitors turn up, this could undermine your whole project. Therefore plan to start small and then scale when the site reaches maturity. 

Site optimization

The performance of any website is very dependent on how it was built, and what software technology it uses. 

Once you have a prototype site, one of the first procedures you need to perform is to score each page on how long it takes to load. There are numerous tools available to measure page performance, and some of them will break down the timings to identify exactly what caused the most delay on any given page. 

This testing isn’t something that you should only perform once on a single PC, as your visitors will be coming from a diverse number of different locations, with varied broadband connections, and they will be using different types of devices.

It’s especially critical that mobile platforms are tested both under Wi-Fi and cellular connections. And, in an ideal world, getting results from remote geographic locations is also valuable information. 

Once you have collated this performance data, it is time to return to the site and see what alterations you can make to enhance the user experience. 

Here’s a list of the top seven issues that slow down a site which can easily be addressed.

1. Multi-source pages

If a page is made up of elements that come from other locations, including ads, this can dramatically impact on speed. The page becomes dependent on how rapidly those elements from outside the site are being served, compounding performance issues.

If you have a page that repeatedly takes too long to load, identify what’s slowing it down and remove it.

2. Widgets and plugins

Too many of these components cause much the same problems as multi-source pages, but they’re an issue that affects WordPress sites in particular. The temptation to pre-load pages with all manner of calendars, animated buttons, clocks, and so on is strong, but you must resist. 

These features require server-side code and client-side code to execute, and will often pause the presentation of other page elements before they finish loading.

Scaling graphics

3. Scaling graphics

Website graphics shouldn’t be scaled unless they are photographs that you wish to be clickable for a full-quality presentation. 

Having them scaled up is also bad, as this makes them blocky or reveals compression artefacts. 

Making the graphics the same size as they should be viewed takes the workload off the server and the client browser, and avoids the user downloading larger graphics than needed.

4. Incompatible media

There exists a raft of file types that were once popular on the PC, but are now effectively defunct. Mobile users won’t be able to access them, and most desktop users will also have issues unless they’re still running a plugin on an old browser version. 

As a rule, don’t host video, image or music formats that won’t work by default with Google Chrome or Microsoft Edge. It annoys users when the website has elements missing, or comes up with odd errors.

Backend code

5. Backend code

How many times have you seen a neat feature that can be added to a website with ‘just a short line of code’? There are many of these, and they can be useful. However, they often cause a headache for a much larger piece of code that is running on the server in order to make the code snippet do something useful. 

Have too many of these – because you put that code on every page – and the server will become bogged down trying to process these requests rather than serving the site pages. 

The most common culprits for these things are, ironically, analytics and form processing. But code that tackles other tasks can also have a negative impact on overall performance.

6. Mobile mistakes

A classic mistake that impacts mobile users is for the redirect to the mobile version of the site to come only after most of the desktop-intended homepage renders on the phone or tablet. 

The result is often a long wait before the browser is whisked away to the mobile site, followed by another delay before that renders. 

While statistically mobile platforms still lag slightly behind conventional computers in terms of web browsing, mobile surfing is rapidly expanding and will very soon be the dominant way that most users will access the majority of sites. 

Therefore, attention to the mobile variant of any site is at least as important, if not more so, than the desktop counterpart. 

Because mobile users are often connecting using 3G or 4G data services without the consistent transfer speeds that wired broadband users might expect, the significance of rapid web page delivery is even greater.

7. Use compression

There are numerous ways that it is possible to ensure that the files which make up the site are smaller, and therefore quicker to download for a visitor. 

There are global server-side technologies like Gzip that can crunch file sizes by as much as 70%, although just picking the right file types and compression levels for JPG files can also bring performance benefits. 

Gzip will require server activation, and you can check if it’s active on your server by using this site.

The only caveat to using compression is that you must identify those files and folders that you don’t want compressing to the system. Because already compressed video files and compressed volumes (ZIP, RAR or LZH) can’t be squeezed down any further.

Mark Pickavance

Mark is an expert on 3D printers, drones and phones. He also covers storage, including SSDs, NAS drives and portable hard drives. He started writing in 1986 and has contributed to MicroMart, PC Format, 3D World, among others.