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.
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:
- Ensure you have CasperJS installed on your machine: http://casperjs.org
- Copy critical-css.js to you project root directory.
- Open Terminal, and CD to your site directory "CD ~/path/to/site/root"
- Then run "casperjs critical-css.js"
- Follow the prompts on screen
- It will ask you for the URL you'd like to parse
- Then the output file, you can leave this blank and it will default to "critical-css.txt"
- 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.
- Open your output file, and copy it's contents
- Paste the contents into your sites section (before your .css link href's)
- 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.