How Receptional Solved Its Site Speed Issues – 6 Things You Can Do Too | Receptional Ltd

How Receptional Solved Its Site Speed Issues – 6 Things You Can Do Too

May 5, 2018

How Receptional Solved Its Site Speed Issues – 6 Things You Can Do Too

A fast-loading site is one of the fundamental features of a good user experience – get this wrong and it doesn’t matter how nicely designed your website is, or how engaging and slick the contact forms are. Personalised messaging, a fresh new User Interface (UI) and seamless responsive design is all great… but only if the website loads sometime this year.

In the latter half of 2017, Receptional’s site had developed a speed issue, clocking averages above 20 seconds last autumn. The site now loads in a reported 3.00 seconds and here is how we did it.

Gathering Data

Let’s go back to October, 2016 and take a close look at how the site was performing. Analytics gives us a neat breakdown of a handful of contributing factors:

Here we can see that the slowest single component is server response time. Noted!

Now we can use a handful of other analytics reports to gauge which resources are slowing down important pages. Firstly we can look at the worst offenders in the Page Timings report:

This report revealed that some of the most popular pages on our site were performing far worse than the site average. In fact, there seemed to be a problem with the blog posts in general.

Finally, there’s huge value in a second, third, or even fourth opinion. Some of the tools you can use to get even more analysis on your pages include:

  • Google PageSpeed Insights
  • GTMetrix.com
  • Webpagetest.org

From these we were able to establish a task list, which the rest of this post will discuss in detail:

  • Compress images
  • Fewer HTTP requests
  • Implement CDN
  • Minify code
  • Enable cache

Compress and Scale Images

It turns out that a big part of why the blog posts were under-performing was because of numerous uncompressed, high resolution images that were uploaded to the blog. Unfortunately this happens. Especially when you’re getting blog posts out in a hurry or using the blog to show off – you want big beautiful images, right?

However, remembering to run images through a lossless compression app or plugin is really all it takes to reduce an image to web-appropriate size without losing quality and this can make a huge difference over time.

Fewer HTTP Requests

Every time a web page has to make a request to a server to load an individual file there is a delay. The more requests that need to be made to load the entire page, the longer we have to wait. Reducing the number of requests by combining separate JavaScript and CSS files into single resources can dramatically improve the time it takes for a page to finish loading. Sometimes these files won’t even be visible, but users and search engines alike can tell when the page is still waiting for external scripts to load.

Implement CDN

A Content Delivery Network (CDN) allows users to load parts of your website (usually heavy content such as images and JavaScript) from any of an array of servers. International users in particular can enjoy a much faster browsing experience thanks to these servers being spread throughout the world, reducing the latency between making the request and loading the content.

Not every site will benefit massively from a CDN. For us, the detectable improvement to site speed made the switching worthwhile.

Minify Code

In programming, minification is the process of removing all the junk from your code without changing what it does. ‘Junk’ includes spaces, line-breaks and comments which are helpful for humans whilst reading the code but ignored when it is actually executed.

For example, this code:

var array = [];

for (var i = 0; i < 20; i++) {

array[i] = i;

}

 

Becomes this code:

for(var a=[i=0];++i<20;a[i]=i);

 

The purpose of this is to minimise the amount of data being transferred and speed up the web experience. Some developers get so into this concept that Code Golf is a thing. Look it up.

Enable Cache

The first page load isn’t the only one that counts. If your average user visits more than one page in a session, there are things you can do to speed up the browsing experience. Caching resources is when your computer keeps a copy of a particular resource and loads it locally, instead of requesting it from the server every time. This has a similar effect to a CDN and goes a long way to improving the overall user experience.

Our Work Isn’t Done Yet

Despite drastically improving our site speed, there is still room for improvement. The nature of a living, breathing website is that it will probably slide again before we take the next big steps to improve. Stay tuned for more improvements, or get in touch with our web design team if you’re worried about your own site speed.




Rob Newhouse

Digital Marketing Consultant

Rob is a member of Receptional’s SEO and Web Development teams; specialising in technical SEO and digital analytics. He has been involved in content marketing and link building, as well as leading web design and conversion rate optimisation projects. Away from his desk, Rob is a musician and writer.

You need a practical, profitable plan.

Get in touch to find out more