image-blades_510pxThere’s loads of tools online that can help you test your sites performance on multiple levels, some of them are free and some of them are paid. There’s a few different kinds of tests that you can do that are useful for performance optimization testing.

Tools that give you total load time and time of each script/image your loading are great for this and if you pair that with tools that analyze each of those items for compression level, minification and one that will tell you any other other negative performance problems then you’ve got a decent way of testing things on a page-by-page basis.

Paid or Free Tools?

I normally go for free tools when I’m testing the performance of pages but for long-term monitoring of your site performance the paid tools are usually better for the job.

The free performance testing tools tend to be one-off tests that you can initiate and then receive a grade based on the results. Some of these tools offer you details of the test but others don’t. Bear that in mind when you pick which tools to use and pick tools that give you lots of detail to make your job easier.

Paid tools are usually subscription services that track various metrics over a long period of time. The long-term tracking gives you the ability to see aggregate and comparison data – so you can see the affects of your changes. Paid systems give you as much data as they can about their tests so that you can determine which changes affect what.

Checking The Load Time Of Your Page

The primary goal here is always to get your page loading quicker than it was before so you obviously want a way of testing the loading time – preferably one that stores historical data so you can look back on your work and see the effects over time.

Pingdom "P" logoMy go-to tool for checking the loading time of a website is the Full-Page Test from Pingdom. You can specify the geo-location for the test so you can check from different places in the world, you might be surprised how location can affect loading time.

After you run the test it will give you an easy to understand table of results that contains a performance grade marked out of out of 100, the total number of requests it takes to load the page, the time it took to load and the total transfer size required to load the page.

You’ll also get a waterfall showing what order requests were made and how long they took to arrive and the ‘Page Analysis’ tab has some great details in it so you can break down what aspects of your page account for the total size the most.

To show you how geo-location can make a difference the results I got when testing from Dallas, Texas are in the image below. Load time in 0.65 seconds. That’s phenomenally better than I expected – considering what is required to load the above the fold content. Faster than 95% of sites tested (and I know Pingdom test a lot of sites).

I tested multiple times and consistently scored times of under a second but, in comparison, tests from New York gave results between 0.9 and 1.2 seconds and results from Amsterdam were closer to 2 seconds than 1.

NinjaWebz home page loading speed test results - 93of100 in 649ms

The results when testing from Amsterdam aren’t as good as this but the US times are great.

Users expect pages to load fast, Google tested it and says that they loose 20% of their traffic for every additional 100ms their page takes to load. When I last looked the average loading time of a page was somewhere around the 3-4 second mark but studies reveal that users now expect pages to render and be intractable within 2 seconds. It’s good to know that this site is loading faster than users expect but there’s still more work to be done because performance optimization is an ongoing effort.

The result set from the page performance test done at Pingdom gives you the some information from the PageSpeed Insights tool too – but I prefer to look at those results separately using the tool below tool directly.

What is Your PageSpeed Score?

Google have created a tool called the PageSpeed Insights testing tool, it’s based on the PageSpeed Optimization Libraries – Google’s open-source performance optimization codebase – and can be found on the Google Developers site.

They give you a ‘Pagespeed Score‘ which they work out from bench-marking the URL you provide against some of the online performance best practice rules.

PageSpeed Insights testing tool submission box

Enter a URL, click Analyze.

Just enter your page address into the box and click analyze, it will then show your site scores and give you advice to help improve it.

In my experience pages almost always score worse for mobile than they do desktop – this is because of some Responsive Web Design best practices that actually do violate the rules.

In most situations the better trade-off is to go for the RWD best practice because it prevents the user experience being degraded for a larger subsection of users but the way we deal with these issues might be about to change again due to Google’s statement informing site owners that they will soon be using mobile page performance as a ranking factor.

The Pagespeed rule set is quite expansive but that doesn’t mean that it always make sense to implement everything it says on your site. It’s all great advice but, particularly when considering responsive design, some of it takes a lower priority.

For example: an image that is used on desktop and mobile isn’t going to be exactly sized on small screens (it’s going to be squashed from a larger resolution suitable for larger screens). But the alternative is not having the image at all – or re-sizing it so that it matches the smallest possible dimensions (reducing the UX at tablet and desktop sizes). So in this instance it’s best not to follow the advice.

There’s already some HTML tags proposed (like the <picture> tag) that help to serve the right image at the right size, and also some great JavaScript solutions, but until there becomes an accepted standard to do it that is more universally supported they are not completely viable solutions to use.

The results you get from the PageSpeed Insights tool shows you the exact offending item as well as how much data you could save by optimizing it – and tells you if there would be a better way to serve it up, like concatenated with other files or loading it asynchronously.

Check Your Response Time

It’s all well and good to optimize the content of your website so that it gets sent in the right order, in minimal requests and doesn’t use any unneeded bandwidth – but the server has to respond fast so that your optimized content arrives fast.

There’s an unbelievable amount of factors at play when trying to measure your server response time from the perspective of a user – that’s where real user monitoring (RUM) can help. On our own we’re not able to test the whole picture but we can monitor our hosting server’s response time by directly requesting from the IP address and measuring how long a response takes.

The first thing that needs to be done when requesting a site is that the domain needs to be converted to an IP address. It’s called domain name resolution and it gets handled by DNS servers. Those servers usually belong to the users’ ISP and you have no way of controlling how well they perform.

The tool I use to do that is 200please. It’s a tool created specifically to test the response time of your server from multiple locations around the globe while not bothering about the rest of the factors that can affect the response time the end user gets. You can also set-up monitoring for your domain.

Historical response time of

The test in the picture is of my main site – PattonWebz – because the NinjaWebz site hasn’t existed long enough to have any historical data attached. Notice that huge drop in the middle of the graph? That’s what happens when you get yourself some much improved hosting servers.

NinjaWebz is hosted on the same system as PattonWebz so those results are exactly the same as this site gets.

I Have My Performance Results, What’s Next?

Once you have a set of performance metrics the next thing to do is put them to good use and start optimizing your site. First I suggest you go for the quick and easy wins that will benefit you site-wide.

Things like combining scripts and minifying them can benefit your entire site – this will reduce the total data transfer of your pages and lower the amount of requests needed to get it all. Next things to look at would be any images you use in your layout – make sure they are the correct resolutions, that they’re saved using web optimized compression.

There’s even some things that you can do that makes your page appear to load faster than it actually does. The best way to do that is to render your page as soon as you can, way before all the content even finishes downloading. The sooner you can render your page and let users interact with it the better

Optimizing the order at which you load your resources into the page, making sure that you don’t include anything you don’t need and compressing and minifying the resources you do need are all good ways to speed up your page render time. In the next post I’ll be going into more detail about these techniques and how you can apply them to your site but for now start gathering and looking over the data. In the next few posts we’ll be using the data you have to decide what to tackle in what order and so we can measure the improvements over time.

Bonus: A FREE T-Shirt + Server and Code Level Monitoring – From New Relic

If you want to dig deeper into the performance impact that the hardware your site is running on has or if you wanted to see code level performance metrics then you could get a free account from New Relic and do that. They’ll even give you an awesome free t-shit too!

It doesn’t store the data for a very long time – because that’s one of the features of the paid accounts – but it will allow you to see the kind of impact that the server has on things.

New Relic needs to be installed on your server – so that means that most free and shared hosting accounts won’t be able to benefit from it – but if you have SSH access to your server you can install it and start tracking in under 10 minutes.

Tools Used For Testing

You can use the buttons below to get to the tools I mentioned in this post.

Full-Page Test PageSpeed Insights Response Time Checker Server & App Monitor