I briefly mentioned Google Page Speed in a recent post, but I’m just now making the time to dig deeper into this Firefox add-on (truthfully, it is a Firebug add-on, so you’ll need that installed first). And, as one might have expected, it’s pretty amazing!
At first glance, this appears to be Google’s version of YSlow (especially since it came out after Steve Souders migrated from Yahoo! to Google, and with the references to Steve’s two performance books at the bottom of the Web Performance Best Practices page, it seems like Steve might have had a good bit to do with Page Speed), but it goes a lot deeper than YSlow ever did!
If you need further enticement to install the extension, I highly recommend watching the videos on the Page Speed home page (the first is not necessary, but is brief; the second is the candy).
To get started, download the Page Speed extension and restart Firefox (why is this still necessary, Mozilla?).
Next, load any page you would like to test; I chose my lab site.
As instructed, I waited until the page was fully loaded, opened Firebug, clicked the Page Speed link, then clicked the Analyze Performance button:
Man, just when you think you’re really on your game, a little button click puts you right in your place… 79 out of 100, that’s, what, a C+?
The icons are self-explanatory, and for now I’ll ignore the “informational” items, so, starting with the cautionary items, I was surprised to see “Remove unused CSS”. This is only a one-page site, and I was sure I was pretty efficient with my CSS. Clicking the expander (+ icon), I see that “48.5% of CSS (estimated 22kB of 45.4kB) is not used by the current page.” Of which only 2.4kB is my CSS (a one-line declaration for smaller screens, so it only seems to not be used by the current page), the rest is from Facebook (FB), just so I can have them insert my current Profile image into the page… Hmm, might have to re-think that…
Next up, “Enable Compression.” Expanded: “Compressing the following resources with gzip could reduce their transfer size by 67.3kb (64% reduction).” Of which 36% is from my friend FB again. Well, my site is hosted by GoDaddy, so I was surprised to see it is not GZipped, but I was downright shocked to see that FB is not GZipping the files it serves via its API. While GoDaddy does offer Gzipping for PHP files, via a one-line script you have to insert at the top of each and every PHP page you want to GZip, apparently you cannot GZip CSS or JS files…
Now to the bad boys.
“Minimize DNS Lookups” was another surprise, again, since this is only one page. The culprits? FB again, and my logo background image, which, because I’m lazy, is being served from this (my blog’s) domain name…
“Leverage browser caching” relates to caching headers (Expire Headers, etc.), which tell the browser how long to use the same version of a file before asking for a new version from the server again. This saves HTTP Requests, which are one of the biggest performance hits a site typically takes. None of the FB items have cache headers, I now know that .ico images are “explicitly non-cacheable”, and that none of my files on GoDaddy have cache headers set. Again, something that I cannot do via GoDaddy…
So, my final analysis and findings:
- I killed the FB image fetch. It was costing me 1 DNS lookup, 9 HTTP Requests, and 9 files weighing 275.9kb! I copied my profile image to my server and serve it, post-load, from the same domain. Thanks, anyway, FB.
- Apparently the only solution I have regarding GZip and Caching is to change my host. However, with my one HTML file weighing only 9.31kb (which includes my 24 lines of CSS because, for so little weight, and since it is only used on a single page, it makes more sense to serve it in-page than to waste the HTTP Request), and my now-only JS file weighing only 70.8kb (see below for a little more on this), I have to consider whether it is truly that big of a deal…
- I also copied my logo image to my lab site’s server, so I lose that DNS Lookup.
And what did all this get me? I now get a 90 out of 100 (um, I do believe that’s a A!), but am still being knocked for the lack of GZip and Caching GoDaddy doesn’t permit me to do. But with a total of four assets to download (1 HTML, 2 images, and 1 JS) and a total weight of 143.9kb and a total download time of 3.42 seconds… I just might let it ride…
All-in-all, a great learning experience, and one worth running at least once in a while to make sure your catching all the holes you can. Of course, there are other performance checkers out there, like YSlow and PageTest, and truthfully, it couldn’t hurt to run your site through each of them!
Uncovered your blog via msn the other day and absolutely adore it. Carry on the excellent work.