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

PHP only, no Node.js required.

Automatically generated for each page

Manual control through {% fold %}{% endfold %} tags

tags Dynamically resolves CSS used on each page

Documentation & Installation

Demo

/with – benchmark * – critical CSS enabled

/without – benchmark * – 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 %}