Google provides some very useful tools and services that can be leveraged to audit web page performance and thus assist in optimizing HTML pages. However these do have their warts.
Page Speed for example provides a free online audit check, as well as Firefox and Chrome browser plugins that can be leveraged to analyse a web page’s performance and assist with optimization. There are two drawbacks with these tools/service
- The HTML file must be hosted on a HTTP server and a local file cannot be utilized. Otherwise a message such as the following will occur “Unable to run PageSpeed Insights on file:///C:/Users/mshannon/Desktop/test2.html. Please navigate to a HTTP(s) web page.”
- The browser extensions can be used to “minify” both the HTML and CSS (by removing whitespace / formatting etc), but do not seem to accurately be able to detect unreferenced CSS
My solution to the hosted HTML files was to piggyback on dropbox. I created myself a public folder in my dropbox account and uploaded the html and css files. I then right-clicked on the uploaded files and obtained a public link (for example .. https://dl.dropboxusercontent.com/u/12345/test2.html)
Once I had the hosted HTML files, I could leverage the Page Speed service and utilize the browser developer tools. The firefox Page Speed extension provides an addon to Firebug. You can see in the image below it has an option to save optimized files to a local location.
I leveraged the Firefox Page Speed extension purely to get the cleaned/formatted html and css files.
What was left now to perform was to remove the unreferenced CSS rules.
Google chrome bundles a useful (crippled) developer tool that can be leveraged to audit web page performance and identify unused CSS rules. Unlike Page Speed, this particular tool does a great job of identifying unreferenced rules. It is accessed from Chrome through the following menu/popup combination: Tools > Developer Tools > Audits > Web Page Performance > Run
You can see by running the tool below, it found a huge number of unreferenced rules:
The problem with this tool however, is that it does not provide a mechanism to write out the good (referenced/used) CSS rules.
A bit of searching around, and I found this excellent post:
http://dev.bootstraponline.com/2011/11/automatically-remove-unused-css-rules.html
Essentially, the dude had patched the chrome developer tools to write out the good css rules when running the audit. The problem for me though, was this was done using Linux builds, and also I wasn’t sure whether newer builds of chrome would offer better detection capabilities.
So I set about getting the latest windows chrome builds from http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html
What I found however, is that they stopped shipping devtools_frontend.zip at build 158804. At the time of writing this, they were now up to build 200347. Additionally, the contents of devtools_frontend.zip with build 158804 did not seem to match the files that boostraponline referenced in his/her patch. So I went trawling backwards in builds until I found the very last version to ship with AuditRules.js inside devtools_frontend.zip. This was build 152197 which is circa August 2012.
You need the following two files:
http://commondatastorage.googleapis.com/chromium-browser-continuous/Win/152197/chrome-win32.zip
http://commondatastorage.googleapis.com/chromium-browser-continuous/Win/152197/devtools_frontend.zip
Next …
- extract build 152197 of chrome-win32.zip (e.g. to desktop) ; this automatically creates a folder named "chrome-win32"
- extract build 152197 of devtools_frontend.zip to a *new* folder named "devtools_frontend" under "chrome-win32"; the "devtools_frontend" folder needs to be created
- create a new folder named "user-data" under "chrome-win32"
- create a run.bat file to trigger execution of chrome similar to the following:
@echo off
set CHROMEDIR=C:\Users\mshannon\Desktop\chrome-win32
%CHROMEDIR%\chrome.exe --user-data-dir=%CHROMEDIR%\user-data --debug-devtools-frontend=%CHROMEDIR%\devtools_frontend
Execute the bat file and see if chrome successfully loads. Once confirmed, close down chrome.
The patch diff that bootstraponline provides is mostly accurate. The one change though is you must now utilize “InspectorFrontendHost.save("used.css", usedCss, true);”
You can download the patched AuditRules.js file for the above build 152197 from my dropbox: http://db.tt/5ZUFkIqX
Simple replace devtools_frontend\AuditRules.js with the file above.
Having performed the patch, fire up chrome from the bat file. Invoke the audit tool against the web page (or local file) and you will be presented with a save-as box should it detect unreferenced CSS rules. The file to be saved (used.css) contains the rules that were referenced.
Thanks bootstraponline and Google!
