Critical CSS

Inlines a critical CSS file into a page's HTML head, and loads non-critical CSS asynchronously using W3C Spec's preload.

How it works

1. This module looks for a css file inside your theme directory. This css filename should match any of:
   • bundle type (i.e., "article.css")
   • entity id (i.e., "123.css")
   • url (i.e., "my-article.css")
2. If any of the above paths is found, this module loads the CSS file contents inside a <style> tag placed in the HTML head.
3. Any other CSS file used in HTML head is loaded using preload. For browsers not supporting this preload feature, a polyfill is provided.

Gulp task for generating a critical css file

Before this module can do anything, you should generate a css file containing the critical css for any:

• bundle type
• entity id
• url

This can be achieved by running a Gulp task to automatically extract the critical css of any page.
Using Addy Osmani's critical package is highly recommended.

Another option is Filament Group's criticalCSS.

The extracted critical css must be saved in a directory inside the current theme.

Working gulp example using Addy Osmani's critical

A complete working example for gulp is provided at
https://github.com/asilgag/critical-css-gulp-example

Please refer to that example and tweak it for your needs.

Third-party libraries

Critical CSS uses two files from Filament Group's loadCSS. If your PHP installation has allow_url_fopen() enabled, they will be downloaded during the installation process, and will be placed into public://critical_css directory (typically sites/default/files/critical_css). If allow_url_fopen() is not enabled, you should manually download loadCSS.min.js and cssrelpreload.min.js and place them into that directory.

Module configuration

Module must be enabled in /admin/config/development/performance/critical-css. This allows for easy enabling/disabling without uninstalling it.

Debugging

When twig debug is enabled, Critical CSS will show all the possible file paths that is trying to find inside a css comment.