From the course: Developing for Web Performance
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Critical CSS
From the course: Developing for Web Performance
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
-
-
-
-
-
-
-
Automated optimization of JavaScript and CSS2m 24s
-
(Locked)
JavaScript bundling vs. modules4m 21s
-
(Locked)
JavaScript loading: Async and defer5m 4s
-
(Locked)
Lazy-loading JavaScript modules with import()6m 29s
-
(Locked)
Minifying and uglifying JavaScript4m 26s
-
(Locked)
Critical CSS7m 53s
-
(Locked)
Deferring noncritical CSS2m 57s
-
(Locked)
Component-based CSS loading1m 25s
-
-
-
-