Automatic critical css with Twig and PHP.

Small php library in combination with a twig extension that allows you to annotate above-the-fold-html in your twig files which will then extract all the necessary CSS.

In combination with loadCSS you can setup a critical CSS solution quite easy.

Key features

Documentation & Installation

Demo

/withbenchmark *critical CSS enabled
/withoutbenchmark *critical CSS not enabled

Take a look at these page sources to see the critical CSS in action.

* These benchmarks are run on a slow 3G connection. This is where critical CSS is the most important.

Usage

{% fold %}
    <button class=”your-css-class”>Button</button>
{% endfold %}
<!-- output -->
<head>
    <style>.your-css-class{color: pink}</style>
</head>