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
<link>
in the
<head>
. 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
An excerpt from Annotating Your (Critical) CSS
<style>
tag in the
<head>
) 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.
