Skip to content
Branch: master
Go to file


Failed to load latest commit information.
Latest commit message
Commit time


Grunt wrapper for criticalcss

Getting Started

This plugin requires Grunt ~0.4.2

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-criticalcss --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


The "criticalcss" task


In your project's Gruntfile, add a section named criticalcss to the data object passed into grunt.initConfig().

  criticalcss: {
    custom: {
      options: {
        // Task-specific options go here.



Type: String Default value: ''

REQUIRED: A string for the URL of the site you'd like to run this script against


Type: String Default value: all.css

A string value for the entire path of a css file that you have hosted locally.


Type: Integer Default value: 1200

An integer value of the width of the screen in pixels


Type: Integer Default value: 900

An integer value of the height of the screen in pixels


Type: String Default value: dist/dist.css

A string value that is the file path for wherever you would like the css to be output to


Type: Array Default value: []

An array of selectors that you want to guarantee will make it from the CSS file into your CriticalCSS output.


Type: Integer Default value: 800*1024

Sets the maxBuffer for child_process.execFile in Node. Necessary for potential memory issues.


Type: Boolean Default value: false

If set to true, will silence any outputs to console in the page's JavaScript


Type: Boolean Default value: false

If you include @font-face declarations in your all.css file and set this flag to true in your options, criticalcss will include all the @font-face declarations that are required to satisfy font-family declarations in the criticalcss output.

Usage Examples

Custom Options

	criticalcss: {
		custom: {
			options: {
				url: "http://localhost:4000",
				width: 1200,
				height: 900,
				outputfile: "dist/critical.css",
				filename: "/path/to/local/all.css", // Using path.resolve( path.join( ... ) ) is a good idea here
				buffer: 800*1024,
				ignoreConsole: false


In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

  • v0.5.0 - Add support for ignoreConsole
  • v0.4.0 - Add support for buffer size, so you don't exceed the buffer
  • v0.3.0 - Moved to using a local filename instead of a pattern-match
  • v0.2.0 - Added forceInclude functionality.
  • v0.1.0 - Original release
You can’t perform that action at this time.