Web Performance in Action

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.

4.1. What does critical CSS solve?

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