Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
views
Gruntfile.js
README.md
package.json
page.css

README.md

Inlining Critical CSS

This sample demonstrates how to use grunt-critical to inline critical CSS in your pages, as explained in Chapter 4 in the book.

critical.png

Note that grunt-critical uses critical internally to infer the critical CSS styles for your page.

To run the example, make sure you have all dependencies installed and then run the following command.

grunt build:release

If you run the command below, the resulting page should open up in your favorite browser. Note how the h1 styles were inlined because they're visible on first load, while the others weren't inlined. These will be loaded a bit later, but by the time the human scrolls down they should have already loaded! As a result, the experience becomes faster.

open build/page.html

The configuration we used is outlined below. Go through the documentation for comprehensive details about each option.

critical: {
  example: {
    options: {
      base: './',
      css: ['page.css']
    },
    src: 'views/page.html',
    dest: 'build/page.html'
  }
}

Note that if the dest file is a stylesheet, the resulting critical-path css is saved to this file for later use. If dest points to an HTML file the resulting CSS gets inlined and the exiting stylesheets are wrapped in a javascript function to load them asynchronously as well as a <noscript> block for users with javascript disabled.

You can’t perform that action at this time.