Critical CSS - A small PHP library

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
Dynamically resolves CSS used on each page

Documentation & Installation

Github or Packagist

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 %}

<!-- output -->
<head>
    <style>.your-css-class{color: pink}</style>
</head>