The basics of site speed optimisation

Having a fast website is important from both a user’s point of view as well as an SEO point of view. Google announced recently that site speed would have an impact on organic rankings; in particular, a slow mobile site could have more of an impact on your organic search rankings.

Regardless of Google, having a quick website will improve the user experience of your website tenfold – after all, nobody wants to hang around on a slow site waiting for pages to load!

There are numerous things you can do to speed your website up; I have taken our website as an example and implemented some changes to improve the site speed to show you just what a difference a few tweaks can make.

There are a few tools I used throughout this process to test site speed and get pointers towards what I needed to do to speed the site up:

Pingdom

https://tools.pingdom.com/ – A speed checker that breaks down the speed of the chosen page to help you pinpoint issues.

Google Insights

https://developers.google.com/speed/pagespeed/insights/ – A speed checker that gives you pointers on speeding your site up as well as ranking your site against what Google is after in terms of page speed.

Hosting & server response time

First and foremost, you will be fighting a losing battle if your site is struggling in the speed game due to slow hosting. There is only so much you can build on weak foundations; in the long run the core issue will still be present.

You can check the speed of your hosting using the Pingdom speed checker above – simply enter your domain and run the test. Scroll down to the breakdown of all of the site elements. The top element should be your domain.  Anything below 200ms is a good response time (i.e. low enough for Google page speed insights not to flag it up as an issue).

Seeing as we have a pretty good base to start with, I can now start to build on this and implement other techniques to speed up our site.

Reducing requests

Requests are when your page needs to use resources that are not directly included on your page. Most commonly, these requests are things like linking to external CSS and JavaScript files, but also, some requests are for resources that aren’t on your server such as Google Fonts or Font Awesome, for example.

The first thing is to check is that you don’t have any requests to resources that aren’t actually in use on your site. Even if you aren’t using the resource anywhere, having the link in place on your page tells the server to look for this resource. On our site, I managed to find a couple of rogue jQuery plugins that the site wasn’t using, but were still being called in the footer.

Removing these unused files reduced requests by 5 and improved page speed by 10ms.

Combining requests

To reduce the number of requests your site has to make you can combine all of your JavaScript and CSS files into 2 main JavaScript and CSS files. You then just include these 2 files in your site, instead of your main CSS & JS and then endless amounts of jQuery plugin files.

This process on our site reduced requests by 18 and improved site speed by 10ms.

Minifying files

Minifying your main CSS and JS file on to one single line will help site speed. There’s a handy tool online that will minify the file for you so you don’t have to go through removing line breaks and spaces:

https://cssminifier.com/

https://javascript-minifier.com/

Minifying the main CSS and JS file on our site improved site speed by 20ms.

Optimising images

When you are adding images to your website you should always make sure the images are optimised for web. If you are working in Photoshop then there is a “Save for Web” option you should always use when saving images for a website. Within this feature, there are options to further compress the image. You can view the original next to the compressed image to help you get the right balance between image quality and file size.

An example

A 1600 x 720px image (which we use for our case study hero shots) is roughly 1000KB saved as a normal JPG.

When saved for web at “60” quality the file size is reduced to 217kb, without any discernable loss in image quality. This is a huge difference if you have several images on a page, as it doesn’t take long for the image sizes to add up!

If you are not using Photoshop you can use this tool: http://optimizilla.com/

If you are using WordPress it’s a good idea to utilize their custom thumbnail size functionality, this way you can upload one image and pull in a smaller version of the image into your page rather than resizing the larger image on the page using CSS.

Optimising the images on our site improved site speed by roughly 20ms depending on how image heavy the page is.

Google Page Speed Insights

At this point, I had exhausted my knowledge of techniques to use, so I turned to Google Page Speed Insights to get a good idea of how Google currently viewed our site.

Page Speed Insights is great because it gives you a score out of 100 for both mobile and desktop and then gives you information on how you can improve that score. In our case, we had a number of things we could work on which I will go through below.

There are some of the points Page Speed Insights gave that couldn’t be achieved due to various reasons but every site is built differently, so work through the list and try to tick off as many as possible for your site to get your score into the green.

Leverage browser caching

Browser caching means the browser remembers your sites css, js, image files etc once they have been loaded for the first time. This means that your server doesn’t have to load each of these files every time the page is accessed.

To enable browser caching you can add the following code to your .htaccess file.

SHOW ME THE CODE!

You can also modify this code to amend the cache time periods.

Adding Browser caching improved site speed by 10ms.

gZip compression

gZip is a file type and also a form of file compression. gZip allows you to offer up smaller file sizes on your site, thus increasing speed.

There are various ways to enable gZip compression based on your server. We are running an Apache server so I added the following to the .htaccess file:

SHOW ME THE CODE!

Here’s a link to some other methods based on your server: https://varvy.com/pagespeed/enable-compression.html

Enabling gZip compression improved site speed by 10ms.

Overall the speed of our site has been improved by roughly 90ms, 25 requests have been removed and the size of the page has been reduced by 1.4mb.

Google Page Speed Insights now ranks our site at 80/100 which is an acceptable score. There are some more things we could do to improve site speed but certain CMS platforms make it more difficult to implement these techniques.

Want to know more about how we can improve your site speed? Contact us today!