In our last post we used some case studies to introduce you to the W3C html validation tools, what they do and how to interpret the results. In that article we made the point that validation is not the only test that you should perform on your website, site speed is an important factor too. In this post we provide a high level introduction to several speed testing websites and give you an overview of what they tell you and what each analyses to help you work out which will be the best one to use.
Why Speed Matters
A fast website loads quickly and you are less likely to loose impatient website viewers. The relationship between a high bounce rate and a slow website has been tested and proved so you can’t afford to ignore your page speed. In addition Google has said they want to see websites that perform the best at the top of their results so they can deliver the highest quality results to their users. It is indeed a fact that Google are now using page speed in their algorithm. So we should all want our webpages to be fast – but how fast is fast and how would we improve the design of a slow loading page?
Testing Your Website Speed
The good news is that there are lots of high quality free tools out there that comprehensively test webpage performance in several different ways. Results are delivered in easy to interpret charts with explanations of the performance issues, suggestions for improvements and further reading. Most also provide some high level bench marking metrics so you can quickly understand if your site has a speed issue that you need to do something about. This client who offer live tv streaming came to us for help in reducing their site load time and we were able to achieve significantly faster load times by using a WordPress caching and minifying plugin called W3 Total cache.
Some good tools to try are; tools.pingdom.com, GTmetrix.com, webpagetest.org and of course developers.google.com/speed/pagespeed/insights/.
Do I have A Problem?
We are going to use two real life businesses to compare these tools and see what they tell us. Large and numerous images along with scripts written to handle them in an attractive way are often the culprits to slow loading websites so we will choose two image heavy businesses for our demonstration.
Viva Folio are a UK based bespoke sliding and aluminium bifold door company. Their website is the primary shop front for them so it is essential that it is attractive and easy to use. Viva doors need lots of strong images and graphics to create an appealing website and showcase their doors. Secondary products are skylights and orangeries which also need strong visual representation on the website. In addition, there is a a lot of technical information about their products security and thermal features that need to be presented in a simple and visually attractive way. We will use GTmetrix and pingdom to analyse this website.
For Webpagetest and Google developer tools we will use Cubewing Systems Ltd. They have a simple website design with a clever menu structure designed to help people navigate around their complicated product range. There are lots of different types of office furniture and also different ranges for different room types (like boardroom and receptions) and different budgets (Senior Managers vs hot desking for example). There are also a couple of image carousel’s utilised on the home page to demonstrate what they sell and these carousel’s draw large numbers of images.
This tool provides your websites Google page speed and the Yahoo! Yslow grade. Both these measures are doing the same thing but as Google and Yahoo each have different criterion for assessing page speed the grades differ. There is a tab for each grade which lists the assesses criterion and gives a grade for your website from A down to F. For our case study both Yahoo and Google are highlighting the same areas for improvement – use browser caching, combine lots of individual images and icons into a single sprite and use gzip compression of files.
This tool presents the results in a different and useful way – it uses a waterfall diagram which shows you the order everything loads in and how long each stage of the process takes. This makes it very easy to identify a slow server, huge images/files/scripts that are slowing things down. The second tab (performance) summarises this to help you get a handle on the combines effect and grades each area so you can tell if your site performers well or badly compared to other websites. However it is not as useful as GTmetix in helping you isolate specific things to fix.
Web Page Test
This tool provides a more segmented grading system which is helpful in identifying areas to improve however it does not help novices understand the relative important of these things compared to one another. In our case study how do we know which of the four F’s we should spend our time improving? However if you click on their performance tab there is an ordered list which highlights compression, compressing images and reducing the total number of images loaded as being important for making fast gains in speed. The next level of information is very comprehensive; not only providing great detail about the order and speed of each element as it loads but comparing a first page load over a refreshed page or reload, This is by far the most comprehensive tool but it can be a bit overwhelming for a novice.
Google Developer Tools
The first thing to note here is that this is the only tool which compares mobile performance to PC performance. In Cubewing’s case the mobile score is 52 compared to a score of 63 for a PC. Google presents the information very simply and in order of importance. The first items are in red and you are told to sort them out, the next group is amber and they recommend you fix them. Under each identified issue you can click a link which generates instructions on how to fix the errors and itemises the occurrences on your webpage. Due to the simple layout and clear prioritisation of issues this is definitely the best tool for a novice to use.
Each tool measures page load speed in different ways. In this example Pingdom gives it as 1.36s and GTMetrix says its 4.45s. That’s quite a big difference – surely these figures should match or at least be close. The speed depends on where you measure from – for example a site that is hosted in the UK will load faster is loaded from a server in the UK than one in the USA. The speed test tools use a large range if server locations to test from and most allow you to select which one you want to use. So if you are testing a UK website that will be viewed by people in the UK choose a UK server location for your test.
These tools compare your website to all other websites in the world- they do not benchmark your site against others in your industry. This is important to bear in mind because certain industries will naturally have slower sites than others. A consultancy for example will have a very simple site with text and few images so it will nearly always load faster than an image heavy sector like clothing or office furniture. Don’t waste time trying to get your website ratings in the A-B grading range if all your competitors are in the D-E range. Your aim is to make your site one of the better ones in your competitive landscape as this is what Google and your users will be comparing you to. So although the ratings for Cubewing initially looked quite poor – compare them to a competitor; like Viking Direct and they look good. The Google developer tools rating for the PC was 63 for Cubewing but only 55 for Viking Direct.