Photoblog performance tips: Day 2 – What are all these charts? on Phill Price | Photography

Photoblog performance tips: Day 2 – What are all these charts?

Yesterday we found the ingredients needed to make our site quick, but like any meal, the proof is in the recipe. So lets get cooking. Pukka!

Lets start with WebPageTest and what it all means. (If you’ve not got a result yet, or can’t find the link you can get a new result set, or search the previous results).

WebPageTest Graph Result

Have you ever done project management? This closely resembles a GANTT chart, every horizontal row is a ‘resource’ or in English, a file. It shows the full loading time of the page as if the user had never come to the site before, and hasn’t cached any of the items in anyway (we’ll get to that later) so it has to get it from the server. The thinner the chart, the quicker it loads (although the chart does stretch out) and the fewer rows the better. We’ll get on to how to do this in the series (apart from simply removing items from the pages).If you click on it to view it further, if you’ve not already done so, there’s a similar graph underneath. This shows the number of connections between the browser and the server. In this case the more rows the better (within limits, we don’t want to have too many different domain names here as each takes time to find). There are tricks to get different addresses for the same information on the same domain. Again we’ll get to this too.
This chart gives a bit of a sneaky peak at the topics we’ll cover (as does F). In general terms, the more ticks the better, don’t worry if there are lots of Red Crosses at the moment, its perfectly normal.
This gives a screenshot of the end result. If this differs radically from what you think your site looks like then I’d be a bit worried, as it’s a bit of a telltale. Nothing to see here, move along.
This shows what would happen if the visitor returned to the site, or refreshed the page. In general the less rows the better as they should mainly be cached, or at least cacheable. If they are yellow don’t panic, these means the results are cacheable, but the browser hasn’t.
Another checklist here, again don’t panic if there are lots of Red Crosses.
Again this screenshot (as in C) should be a giveaway to check the page has actually loaded and everything is properly present.
This pie chart shows the number of requests by the type of content, whether it’s html, css, javascript files or different types of imagery. It just counts numbers of files and doesn’t take into account the size of the files it’s grabbing. Use it to target what type of files cause most of the damage in number terms.
Like the pie chart to the left, this shows the download size of all of the resources on a page. Normally this is the imagery on a page, and there are tricks to bring this down which we’ll go through.

OK so now we know what this means, lets get to improving the site. I don’t know about you though, but I’m still recovering. Lets save this for tomorrow. We’ll also get into using Page Speed and YSlow to get these results more timely, albeit from our own location rather than a benchmark one.