Annotating Your (Critical) CSS

I’ve looked a different ways that you can achieve Critical CSS, whether it be programatically, manually, done with an existing code base or a new one. This tutorial explains how it can be done using PostCSS and PostCSS-Split.

The “normal” approach to CSS is to include your main stylesheet as a


in the


. The downloading and parsing of that blocks rendering. Critical CSS makes your page render faster bybypassing that blocking.

The first step is to “inline” (a streamlined


tag in the


) the essential CSS required to render the page’s above-the-fold content. That enables the second step: non-critical CSS can be loaded asynchronously (non-blocking), while the web page is rendering. Once the big CSS file arrives, it’s appended to the page by JavaScript.

An excerpt from Annotating Your (Critical) CSS

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.