3 Tools for Optimizing Page Speed [Best of SEW 2010 #9]
For the past couple of months, Google has been telling the world that page speed is an increasingly important aspect of Web sites. The Google Speed site – which has the laudable goal of making Web browsing as fast as turning the pages of a magazine – has been featured in several posts on their Webmaster blog, and features links to various free tools that they, and others, have made available for the masses.
So, as someone responsible for a site, if you suspect that you may have page load issues, what's your first stop? Where should you go to get an overall idea of your site performance, short of opening every page of your site while holding a stopwatch?
The first place that many of us will start is in our Google Webmaster Tools account. Log in, click on Labs, then Site Performance. There, you'll see site performance data based on feedback from their crawlers.
On the page you'll also see a sample of 10 pages with the load times for each. Unfortunately, it doesn't go any deeper than that. But at least you'll be able to see at least a couple of bad performing pages to further investigate using other tools.
YSlow and Google's Page Speed tool (which both require the Firebug add-on for Firefox to be installed prior to their installation) both appear to show the same information when compared, so my reason for picking YSlow over Page Speed is simply aesthetic. YSlow provides a grade for each page you review and provides grades for each element examined, whereas Page Speed returns a green check, yellow triangle, or red warning symbol along with a score out of 100. You may prefer Page Speed, but because there isn't much difference, we'll walk through YSlow.
When using YSlow, simply click on the text next to the grade for each element, which details the issues detected for that particular topic on that page, whether it's the placement of JavaScript, the zipping of content, or the number of HTTP requests on a page.
But that's not all. You can check out statistics on the page components (e.g., .js files, .css files, Flash files, etc.) to see which files directly impact load times.
The AOL Page Test tool is a more visual representation of the page load, as it provides a waterfall graphic showing the load times for every element on the page. For each element you can see the DNS lookup time, connection time, time to first byte, and the actual content download time, which can alert you to issues with individual elements (i.e., a JavaScript file on another domain that takes a long while to load should most likely be placed directly on your domain). The green vertical line represents when the page rendering began, while the blue vertical line represents the completion of the page rendering process (although some elements on the page may not fully render for a few seconds beyond that, as you'll see on the chart when you check it out for your site).
In the configuration settings for this tool, you can set it to run each page twice, so it can show you the effect that caching content on your site from a prior visit has on your load times.
With page load optimization tools, it's ideal to have multiple options available (and even better, to have multiple free options available). But you can generate an actionable list of performance enhancements for your site by using these tools. If you have some favorites that I haven't mentioned, feel free to let us know in the comments.
So, as someone responsible for a site, if you suspect that you may have page load issues, what's your first stop? Where should you go to get an overall idea of your site performance, short of opening every page of your site while holding a stopwatch?
The first place that many of us will start is in our Google Webmaster Tools account. Log in, click on Labs, then Site Performance. There, you'll see site performance data based on feedback from their crawlers.
On the page you'll also see a sample of 10 pages with the load times for each. Unfortunately, it doesn't go any deeper than that. But at least you'll be able to see at least a couple of bad performing pages to further investigate using other tools.
YSlow and Google's Page Speed tool (which both require the Firebug add-on for Firefox to be installed prior to their installation) both appear to show the same information when compared, so my reason for picking YSlow over Page Speed is simply aesthetic. YSlow provides a grade for each page you review and provides grades for each element examined, whereas Page Speed returns a green check, yellow triangle, or red warning symbol along with a score out of 100. You may prefer Page Speed, but because there isn't much difference, we'll walk through YSlow.
When using YSlow, simply click on the text next to the grade for each element, which details the issues detected for that particular topic on that page, whether it's the placement of JavaScript, the zipping of content, or the number of HTTP requests on a page.
But that's not all. You can check out statistics on the page components (e.g., .js files, .css files, Flash files, etc.) to see which files directly impact load times.
The AOL Page Test tool is a more visual representation of the page load, as it provides a waterfall graphic showing the load times for every element on the page. For each element you can see the DNS lookup time, connection time, time to first byte, and the actual content download time, which can alert you to issues with individual elements (i.e., a JavaScript file on another domain that takes a long while to load should most likely be placed directly on your domain). The green vertical line represents when the page rendering began, while the blue vertical line represents the completion of the page rendering process (although some elements on the page may not fully render for a few seconds beyond that, as you'll see on the chart when you check it out for your site).
In the configuration settings for this tool, you can set it to run each page twice, so it can show you the effect that caching content on your site from a prior visit has on your load times.
With page load optimization tools, it's ideal to have multiple options available (and even better, to have multiple free options available). But you can generate an actionable list of performance enhancements for your site by using these tools. If you have some favorites that I haven't mentioned, feel free to let us know in the comments.
Comments
Post a Comment