HTML5, CSS3, jQuery, JSON, Responsive Design...

Give yourself a reality check! (The Chrome Audit tab.)

Michael Brown   May 25 2012 01:01:09 AM
Think you're a shit-hot web developer who knows what (s)he's doing, right?  Well, Google's Chrome browser as a built-in tool that might just puncture your confidence a little; it sure did for me.

With your web page loaded in Chrome, call up its web developer tools by hitting Ctrl->Shift->i (Command->Alt->i on Macintosh).  Switch to the Audits tab, hit the run button then stand well back!

Here's the home page for the Sydney Morning Herald (which I picked entirely at random):

SMH home page gets a Chrome audit

I mean, you knew that you should load your CSS files before the JavaScript so that former can load in parallel, right?  And how much unused CSS is on your pages?  I know I have some, but the SMH is loading a staggering 1.77 Meg of CSS that isn't even being used!!

There's a lady called Nicole Sullivan who made a living simply by going through companies' sites and cutting all the duplicated and other unneeded crap from their CSS.  She's done it for Facebook amongst others.  She did a great talk on the Big Web Show - search for it in podcasts on the iTunes store - where she explained how every developer seems to distrust every other developer's CSS.  So, they end up adding CSS on top of CSS rather than checking and reusing what's already there.  Well worth a listen.

No Comments Found