Critical CSS Boilerplate

There’s a lot of information about the CriticalCSS technique out there—how it works and why it is so rad—and disparate tools to help with the process.

What we haven’t seen much of are demos of CriticalCSS in action—minimal, functional examples of a seamless CriticalCSS setup, presented in a way that provides a clear path to fully automated CriticalCSS generation and inclusion.

That’s our goal for this repo.

Currently, this project assumes very little about development environment and nothing about deployment strategy—it is using Grunt for the CSS generation and minification, a relatively minimal PHP function for inclusion, and nothing in the way of a path to deployment.

Ultimately, this repository will contain multiple examples of the CriticalCSS approach, with clear documentation and example code for various languages and deployment strategies.

Getting Started

To run this project locally, spin up a development server using the following command:

$ php -S localhost:8080

Generating CriticalCSS

grunt critical will generate CriticalCSS files for each of the pages listed in /tasks/criticalcss.js—currently the “home” and the “category” pages. It will then minify the results in place.

Dissecting `criticalcss.js`

The CriticalCSS Grunt task itself is relatively uncomplicated.

grunt.config( "criticalcss", {
  PAGENAME: {
    options: {
      outputfile: "<%=csspath%>/critical/PAGENAME.css",
      filename: "<%=csspath%>/styles.css",
      url: "<%=baseurl%>/PATH/TO/PAGE?nocritical"
    }
  }
}

Each page is a configurable object, containing the following:

outputfile The desired path for the output; here, in a “critical” subdirectory inside the CSS directory. Like any generated CSS, this should be .gitignore’d.

filename The local path to the full stylesheet.

url The URL for the page. baseurl, seen here, is provided by Gruntfile.js and should be set to either a local development URL or the remote URL, depending on the task’s current context. The ?nocritical query string is required so that the page used to generate the CriticalCSS doesn’t contain CriticalCSS—otherwise the results of the generation would be the same every time the task is run, rather than relying on the full stylesheet for necessary styles.

Additional configuration options are documented at https://www.npmjs.com/package/grunt-criticalcss.

iliutastoica / critical-css-boilerplate Goto Github PK