From the course: Developing for Web Performance

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Critical CSS

Critical CSS

- [Instructor] Perceived performance plays a major role in improving the user experience and for websites and apps, the number one measure of perceived performance is how fast something loads in the view port of the browser. That means the goal is to load the content above the fold, meaning in the user's view port as quickly as possible and then load the rest afterwards, so the user has the experience of the site loading faster than it's actually loading. One major blocker to this is CSS itself. For a page to render, all the CSS has to be fully loaded because CSS is a cascade and the rule sets at the bottom of a style sheet may well impact the rules that's higher up. If we serve the browser with a huge style sheet with all the styles for the page, it takes a long time to load that style sheet on this content and the performance suffers. To get around this problem, developers have come up with a clever hack called critical CSS.…

Contents