Critical CSS

Embeds a critical CSS file into a page's HTML head, and loads the rest of non-critical CSS asynchronously.

INTRODUCTION

1. This module looks for a CSS file inside your active 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 none of the previous filenames can be found, this module will search for a file named "default-critical.css".
3. A hook is provided ("critical_css_file_paths_suggestion") in case another filename is needed.
4. If any of the above paths is found, this module loads the CSS file contents inside a <style> tag placed in the HTML head.
5. Any other CSS file used in the HTML head is loaded asynchronously using this
   strategy. No need for polyfills.

REQUIREMENTS

Before this module can do anything, you should generate the critical CSS of the page.

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.

There are also some critical CSS online generators to get that CSS without effort.

The extracted critical CSS must be saved in a directory inside the current theme, at the location specified on Critical CSS's config page.

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.

If you see ‘NONE MATCHED’, check to see if you are logged in and make sure Critical CSS is enabled for logged-in users. Since the contents of the critical CSS files are generated emulating an anonymous visit, I recommend disabling this feature once you’ve finished testing.