If you read the last post about tools for testing site performance then you’ll now be sitting with piles of data about your site. So what can you do with that performance data? Well lots of things actually but I have a few suggestions to get you started.
Analyzing web performance data is much like analyzing any other kind of data set – you need to see correlations between segments so you can make the best educated guess moving forward.
The first thing to do is look through all the data you have – the more you look at it, and at different segments of it, the easier it will be to start to see trends in what’s happening and the easier some of the more complex decisions become.
Pageload Waterfall
Looking at a waterfall chart of your page loading is a great way to get an overview of what problem areas you might be able to solve on a page. It’ll give you an ordered list of requests needed to create your page along with how long each took to download – some tests will even provide metrics for each request.
The full page test from Pingdom gives a good waterfall chart of what’s going on with your page. Just looking up and down it you should be able to identify any items that take longer than others and any that are render blocking.
Almost all of the items should be loading at the same time as another item – if you see any items loading on their own then that means it’s render blocking.
Optimizing What You See In The Waterfall Chart
There’s potentially a couple of easy wins you can find from simply looking at the waterfall chart but you need to confirm your suspicions somehow. To do that you need to supplement the waterfall chart with some more data. One way to get the data you need is by using the PageSpeed Insights tool.
Images
Images are something you should be paying particular attention to. They often make up a large chunk of the download size and time of a page so you need to make sure they are all compressed and optimized.
If you see any images in the waterfall that take a long time to load check with the Insights tool to see if they’re optimized.
Expected Results: much reduced data transfer.
Scripts
All of the scripts on your page should be loaded asynchronously – if any are blocking the download of other items then you should first fix that. You can either deffer it to the end of the document or make sure it’s being loaded with async. After that you should be looking at combining and minifying them.
There’s a few rules to follow so you can work out what scripts to combine together and where to load them (it’s often not the best solution to put them all together into a single file).
Then check how many of the scripts are being loading from an external source (IE from a different domain) – if they aren’t being served from a fast CDN then you can probably serve up local copies of some of them optimized and combined with the rest of your scripts and get a little bit of a boost. Again you can use the PageSpeed Insights tool do find out what scripts are external and how much data you could save by combining and minifying them.
Expected Results: a lot fewer requests, reduced data transfer.
It’s enough to simply combine, minify and defer you scripts – you’ll still get a benefit from doing that – but properly optimizing your scripts is a big challenge if you want to tweak it to perfection It’s one that’s well worth the time and effort because the benefits of doing it can be huge. Some of the optimization you do will benefit just a single page but optimizing your scripts will provide a site-wide benefit.
What’s Next?
So far we’ve only made use of the surface level data and gone for a few of the easier to identify wins. This is literally just the tip of the iceberg and there’s much more to come so stay tuned and if you want to get all of this information in a course form then subscribe to the NinjaWebz Performance Course using the form below.