How to make websites load faster

One of the most common requests I get from small businesses who manage their own website is how to make their website load faster.

The first step to any sort of improvement is this: know where you are and know where  you want to be.

Audit the loading process

By using a website speed tool (like Pingdom‘s), you can easily gather all the information you need to understand the basis of your loading.

There are 4 things that are useful in figure 1 for understanding our load time:

  1. HTTP Requests
  2. Load time
  3. Total size of page/data
  4. A waterfall chart

    load1
    figure 1

Manage HTTP Requests

A web browser can load a finite amount of files (text files, images, scripts, etc) simultaneously from a single domain. Each file creates an HTTP request. In the current desktop browser landscape, there is a limit of around 4 to 11 HTTP requests.

When a website has an overwhelming amount of files being loaded, this creates a prolonged loading process, despite the fact that the site itself is not large in size. This is where a bottle-neck constraint happens.

In the figure 2, we see that in my test, it took 27 seconds to load the site, even though the site itself is only 11.3mb. The reason is that there are 403 HTTP requests, an exorbitant amount.

load2
figure 2

Solution: Reduce HTTP requests or use a Content Delivery Network

The easy way is to simply reduce HTTP requests by going in and reducing the amount per page by dividing them into multiple pages or simply deleting necessary files.

For larger sites that are growing, it makes more sense for them to use a CDN or Content Delivery Network like Amazon Cloudfront or MaxCDN. They increased load time by loading from multiple domain sources, thus reducing the impact of a the HTTP request bottleneck.

https://en.wikipedia.org/wiki/Content_delivery_network#/media/File:NCDN_-_CDN.png

https://en.wikipedia.org/wiki/Content_delivery_network

Reduce Size of Page

Reducing the size of the website can also be useful. Due to the increased availability and affordability of high-speed internet, this is slowly becoming less of an issue. By looking at the waterfall, we can see any outliers in terms of size.

The main takeaway from this is that images and video take up a lot of space. In figure 3, we can usually easily spot these exceptionally large files (in this example, they aren’t that large though). When reducing size, it is smartest to reduce these items first if possible, as they make the majority of the page size.

For images, it requires an understanding of web-optimization of images. A single image for regular use should be no more than 400kb. If there are larger images, such as full-size photographs, they should be linked to via smaller thumbnails.

Note: Video streaming services are also becoming more efficient, due to the fact that Youtube and Vimeo will adjust the video quality based on the detected latency. However, if someone self-hosts videos, that will cause the load time to skyrocket.

figure 3
figure 3

Change Web Hosting

For those using Content Management Systems on budget hosting, another idea is to migrate to another web hosting company. Budget hosts tend to overload databases on servers to increase profit, leading to increased database query time and causing a normal-sized website that would load in 5 seconds to load in 25 instead. This is true of any website whose website bandwidth needs exceed their current web hosting capabilities.

The general path for a growing site would be this:

Shared Hosting (budget hosting) -> Virtual Private Server (VPS) -> Dedicated Server

Due to the complex nature of web servers, for websites being used for the public digestion, it is 99% recommended to outsource web hosting needs to a web hosting company such as Godaddy, Rackspace, Bluehost or Google.

Leave a Reply

Your email address will not be published. Required fields are marked *