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