As web users, we all know the frustration of a slow website. As our IT infrastructure has developed to allow many of us access to super fast broadband, the web has responded with a proliferation of rich media such as videos, large images and interactive websites. We have become accustomed to consuming this glorious abundance of media unhampered by frustrating delays, so when a click takes several seconds to deliver the expected results, we give up and click elsewhere.

As website owners, our users’ experiences on our website can have a direct and quantifiable impact on our business, and a sluggish website can be very damaging.

What are the causes of a slow website?

There are many factors that influence the speed of a web page. Among these are:

  • The visitor’s internet speed and their geographical location relative to the server your website is hosted on.
  • The size in Kilobytes or Megabytes of your web pages – this is the sum of all of your media files such as images and videos, plus all of your scripts such as JavaScript and CSS.
  • How many times your database is queried in order to display the web page in full.
    The configuration and power of the server that your website is hosted on.
  • Caching – whether the visitor’s browser has to ask the server individually for each element on the page, or whether these have been saved somewhere (including in the browser itself) for quick access.

As a website owner, the factors that you can control will depend on the platform used to build your website, the hosting environment and the technical expertise of those who maintain the website and its hosting environment for you.

If your website is hosted by a platform such as Squarespace, Shopify or Wix for example, you will be dependent on the platform to provide many of the tools required to ensure optimal performance. And on the whole they do. It is in their interests, not just to provide you with good service, but to minimise the load on their own servers. If your website is self-hosted (perhaps you have a WordPress site for example), you are much more likely to encounter problems with the performance (speed) of that website and to require the help of a developer and/or a good web host to achieve acceptable results.


Why does it matter?

Let’s take a look at some statistics*.

Back in 2007, Amazon discovered that every 100 milliseconds of latency cost them 1% in sales. In other words, for every extra tenth of a second their website took to load, they lost 1% of sales. At around the same time, Google discovered that by taking an additional half second to return a page of search results, they lost around 20% of traffic.

10 years later, in 2017, Akamai Technologies (a global leader in content delivery networks) published a report that suggests, not surprisingly, that those figures are now even more dramatic:

  • A 100-millisecond delay in website load time can hurt conversion rates by 7 percent
  • A two-second delay in web page load time increases bounce rate (when a visitor only views a single page and then leaves the website) by 103 percent
  • 53 percent of mobile site visitors will leave a page that takes longer than three seconds to load

Conversion rate

Whether or not sales are made directly on your website, the purpose of the website is most likely still to achieve a “conversion” of some sort. This may just be to give a visitor the information and positive impression they require to prompt them to contact you. If your website is slow, your conversion rate is certain to suffer.

Search Engine Optimisation (SEO)

While it has been a factor in Google’s ranking algorithm for many years, page speed is becoming more and more important for SEO year on year. This is largely in response to the increase in mobile search traffic, with mobile device users often hampered by slower download speeds and data usage restrictions.

Cost

Though the majority of small, low traffic websites on shared hosting packages may never approach the limits of the resources available to them, those that do may be forced to upgrade their package. Larger, more resource intensive sites will often pay directly for the bandwidth and server space they consume. In this case, optimisation will have very direct cost saving implications.

* https://blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/


What can you do about it?

1. Factors that you can’t control

Visitor’s internet speed – while many of us enjoy internet download speeds in excess of 10MB per second, a huge number are still stuck below 1MB some or all of the time. This may be wifi users at peak times or in remote locations, or it may be mobile users on a poor 3G network. As a website owner, you can either accommodate these users by ensuring that your website loads quickly, or risk losing them to a competitor, who is only ever a click away.

2. Factors that you can control, regardless of your technical ability

The size of your web pages – on most websites, the biggest drain on bandwidth and hence the main cause of slow loading is too many oversized and unoptimised images.

The file size of images is measured in Kilobytes (Kb) and is influenced by the file type (eg. JPEG, PNG, GIF), the dimensions (width x height in pixels) and the compression. Compression particularly applies to JPEG files, where the compression is represented as a percentage of quality, with 100% being not compressed at all. We optimise images for the web by finding the balance of these factors that allows us to display the image with the smallest possible file size and the least possible compromise to its visual appearance.

File type
In general JPEG is the best file type for complex images such as photographs, and PNG is the best choice for simple images such as logos, anything with a transparent background, and illustrations with very limited colours. Saving a photograph as a PNG can easily double the file size. It is not a common problem, but worth noting that JPEG images on the web must always have the correct colour space – RGB. CMYK colour space is used only for commercial printers and results in much larger file sizes as well as strange, excessively bright colours when used on the web.

Dimensions and compression
Typically, a JPEG image downloaded directly from a digital camera will be far bigger and of far higher quality than required for display on a website, and can easily have a file size in excess of 4Mb (4000Kb). There are no situations that I have encountered where an image should be more than about 2000px in width or greater than 80% JPEG quality. This should give the image a maximum file size of around 500Kb. Even 500Kb is a large file in web terms, and should ideally be the only image of its size on the page, with others kept well under 100Kb if possible.

The tools
Almost all desktop computers come with basic image management software that will allow you to control the format, dimensions and compression of your images. For Mac OS, you will find the Preview app has all that you need, and on Windows, Microsoft Paint should be able to do the job.

Alternatively, there are free online tools such as BeFunky (https://www.befunky.com/create/)

TinyPNG (https://tinypng.com/) is a great free service for compressing JPEG and PNG images. Their clever tool has been used to create all kinds of third party software to allow you to automate your image optimisation, either on your computer, or as you upload to your website, so you only have to think about the file dimensions. https://tinypng.com/third-party

3. Factors that may require technical support to address

If your images are optimised, but your website is still slow, the culprits are likely to be too much complexity in your website, and/or an unsuitable web hosting environment.

Themes and Plug-ins
Most self-hosted websites these days are built using WordPress, or a similar content management system such as Joomla or Drupal. All of these are fairly simple and lightweight applications when first installed, but their great strength lies in the mind-boggling array of ways in which we can enhance their appearance and functionality using themes and plug-ins.

Understanding how plug-ins can affect your website performance

  • The majority of plug-ins you add to your basic installation will add some overhead to the page load time. This is because in order to perform their intended function, they usually make queries to the website’s database and require the user’s browser to load additional scripts.
  • The standard of development of plug-ins and themes varies hugely. Those that have been developed well usually add little page load time, even to accomplish complex tasks, while others can add several seconds while performing very minor tasks.
  • Many people, not realising the consequences for their website’s performance, add far more plug-ins than they really need, and never think to disable the redundant ones. Although you may not be conscious of using them, there is a good chance that all active plug-ins are adding some additional load time to your web pages.

Web server configuration
It is possible for a very poorly optimised website to load at an acceptable speed on a very well configured web server, and conversely for a super optimised website still to be relatively slow on a very poor web server. The availability of memory and the PHP version are just two server options that will have a direct impact on the performance of your website. For those who do not have the luxury of a dedicated server environment, and who depend on shared hosting, your choice of web host is crucial. While not the cheapest, I highly recommend Siteground for great support and outstanding performance on their shared hosting plans.

Those with hosted sites such as Squarespace, Shopify, etc. have no control over web server configuration, but can rest assured that it will be optimal.

Caching and optimisation
If your website is hosted with Siteground, their optimiser tools will give you everything you need to optimise your website’s performance, and their technical support team will help you with the configuration if you don’t feel confident in doing so yourself. For a WordPress website on any other shared hosting package, you will most likely require one or more plug-ins and possibly the help of a web developer.

Browser cache
Instructs the visitor’s browser to save files in its memory so that it won’t have to download them from the server the next time they are needed.
Static cache
Saves whole pages in the server’s own memory so that the server doesn’t have to piece them together each time they are loaded.
Dynamic cache
Saves commonly used database queries in the server’s memory so they don’t have to be made afresh each time.
Minify (JavaScript, CSS and HTML)
A form of compression that slightly reduces file sizes.
Gzip compression
Compresses the content delivered to the visitor’s browser to reduce the file size.

Content Delivery Networks (CDN)

Wikipedia define a CDN as follows:

“A content delivery network or content distribution network (CDN) is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and high performance by distributing the service spatially relative to end-users.”
https://en.wikipedia.org/wiki/Content_delivery_network

As mentioned earlier, one factor that affects the time it takes for a web page to load is the viewer’s geographical location relative to the server the website is hosted on. Over many thousands of kilometres, a time lag can become apparent as the data transfers. A CDN is a vast network of servers all over the world that will cleverly display your web pages to end users using the server nearest to them.

Cloudflare is an extremely popular CDN, largely because it is free for basic use, but also because they provide much of the caching and optimisation functionality mentioned above, as well as enhanced security and protection against large spikes in web traffic.
https://www.cloudflare.com/

If your web hosting is provided by Siteground, you can begin using Cloudflare at the flick of a switch in your hosting control panel. If not, you can sign up with Cloudflare for free but will need to be able to make some simple configuration changes to your website domain in order to use the service.


How can I tell how my website is performing?

Use these tools to objectively test your website

Before you start optimising your website, enter the address of one of your web pages in to one or all of these free tools and they will scan and analyse the page and return a report.

Make a note of the results of each test you carry out using these tools so that you can see what effects your optimisation efforts have.

Now try whichever of the following you can comfortably manage on your own, and retest to see what effect it has on your speed. Hopefully on subsequent tests your page size and load time will be reduced. Always remember to back up your website before making any changes:

  • Optimise the images on your web page. This includes background images if you have access to them.

You may prefer to do the following with support from a web developer

  • Deactivate any plug-ins you are not using, or that are not essential to the functioning of your website.
  • Install a caching and optimisation plug-in. For WordPress, popular options are WP Super Cache and W3 Total Cache. W3 Total Cache can achieve superior results, but is far more complex to configure than WP Super Cache.
  • In your web hosting control panel, check what PHP version your website is running on. Upgrade it to the latest version or the version recommended by your web host.
  • Use a Content Delivery Network such as Cloudflare.