Home

Awesome

CODE MOVED

The code for this has moved to here: https://github.com/ibrennan/automation/tree/master/content/critical-css

I wanted to centralize all of my automation scripts.

The old CasperJS script will remain here for the time being.

Critical CSS - CasperJS

Author: @nannerB / http://ibrennan.co.uk

Inspired by this post from Paul Kinlan: http://paul.kinlan.me/detecting-critical-above-the-fold-css/

JS functionality based on this snippet: https://gist.github.com/PaulKinlan/6284142

Instructions for use:

  1. Ensure you have CasperJS installed on your machine: http://casperjs.org
  2. Copy critical-css.js to you project root directory.
  3. Open Terminal, and CD to your site directory "CD ~/path/to/site/root"
  4. Then run "casperjs critical-css.js"
  5. Follow the prompts on screen
  6. It will ask you for the URL you'd like to parse
  7. Then the output file, you can leave this blank and it will default to "critical-css.txt"
  8. Then it will finally ask for the browser dimensions you'd like to use, this is useful for doing responsive sites. If left blank will default to 1024x768.
  9. Open your output file, and copy it's contents
  10. Paste the contents into your sites <head> section (before your .css link href's)
  11. Enjoy your freshly optimised site.

You can see the improvements by doing a before an after analysis with this tool: https://developers.google.com/speed/pagespeed/insights/

There is an opportunity to use this script as part of your build processes, one day I may look at writing a Grunt package to do this.