24 October 2017

Automatic critical CSS with only Twig and PHP

Critical CSS can mean the difference between seeing a page within 2 seconds or having to stare at a blank page for 10 seconds or more.

Gijs Rogé
Gijs Rogé

Why is critical CSS important?

A website will only be rendered once all the HTML & CSS has been downloaded and parsed. To make sure the user sees content as fast as possible, we only send a small amount of CSS at first, for the visible part of the page. 

We push the remaining CSS asynchronously in the background. For users with bad connections this could mean a huge difference in loading times.

Currently critical CSS is hard to maintain

Setting up a local/production/staging nodeJS, Gulp tasks, integrate in build process, generate for multiple pages, slow builds ... These are some of the hassles you have to deal with when trying to implement critical CSS. If you are a PHP-only team or developer, it's much easier to implement a PHP-only solution.


An easy solution

That's why my colleague Jan Decavele and I created the Critical CSS library that allows you to annotate above-the-fold-html in your Twig files, which will then extract all the necessary critical CSS for each page.

Critical CSS allows you to annotate your html in your Twig files, e.g.:


It will automatically find the necessary CSS for this element and inline it in the <head> of the page.

In combination with loadCSS you have an easy, robust and future-proof critical CSS workflow without the overhead of setting up phantomJS or any other nodeJS module.




Technology used for Critical CSS

Critical CSS focuses on sites that use Twig. Currently we have a Silex Provider ready and a Symfony bundle in the works. If you are as excited as we are and want to write a wrapper for your favorite framework, you can send a pull request for our readme referencing your repo.