Chapter 4. Understanding critical CSS
This chapter covers
- Understanding critical CSS and the problem that it solves
- Understanding how critical CSS works
- Using critical CSS in your projects
- Knowing the benefits of critical CSS before and after implementation
With some CSS optimization techniques under your belt, it’s a good time to learn an advanced CSS optimization task that speeds up the rendering of a page by prioritizing rendering of above-the-fold content. This technique is called critical CSS.
Critical CSS is an optimization task that enables you to rethink how CSS is loaded by the browser by prioritizing the CSS for above-the-fold content ahead of below-the-fold content. When done properly, the user senses a perceived decrease in page-load time owing to faster page rendering. But understanding critical CSS requires an understanding of what the fold is.
When we talk about the fold, we think of print media. It makes sense to think of the fold this way, because that’s where the concept originates. When newspapers are printed, the most important story is printed at the top of the front page. This content strategy ensures that when the papers are folded, bundled, and distributed, the lead story is seen on top.