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…

“Minify JavaScript” tells me that “There is 347.6kB worth of JavaScript. Minifying could save 243kB (69.9% reduction).”  Wow, 347.6kB!?!?  I know I’m using jQuery, but still!!  You guessed it, FB again.  My JavaScript file is 70.8kb (including jQuery), but am told it could be compressed down to 24kb (a 25.3% reduction!), and even asks if I would like to “See minified version.”  Yes, please!

Since my site only uses one JS file, “Combine external JavaScript” is all about the 3 JS files FB adds to my site.  (I always download the minified version of jQuery and and combine any plug-ins I need into a single JS file, which I serve from my site’s host.  This not only saves DNS lookups and HTTP Requests, but reduces my dependency on external servers.  Yes, even Google crashes some times.

“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:

1. 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.
2. 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…
3. I also copied my logo image to my lab site’s server, so I lose that DNS Lookup.
4. I’m now using a minified version of my JS (but am also keeping the unminified version on my server, in case I ever need to access and edit it externally).  After sniffing around for a while, I found the JavaScript CompressorRater, which allowed me to run a comparison of JSMin, Dojo ShrinkSafe, YUI Compressor, and Packer (even letting me download the resulting files)!  In my case, Packer 3.1 won by quite a bit, taking my JS file from 70.8kb down to 50.2kb.   Some of the others actually increased my file size, not sure what was happening there…

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!

The only issue I encountered with Page Speed was that, at least with my browser, it regularly hangs after I click Analyze Performance during the “Running Minify JavaScript” phase…  You might want to check out Google Code’s Using Page Speed for extra bits.

Happy performance-checking,
Atg

Top⇪