HuntExams Academy
HTML/CSSAdvanced#css#performance

What is critical CSS and how does it improve page performance?

Critical CSS is the minimal set of styles needed to render above-the-fold content, inlined directly in the <head> so the browser can paint immediately without waiting for the full external stylesheet to download, while the rest loads asynchronously.

Example
<head>
  <style>/* inlined critical styles for header/hero */</style>
  <link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">
</head>

Related Questions

1
HTML/CSSIntermediate#css#performance

What are CSS sprites and why were/are they used?

Open
2
HTML/CSSAdvanced#css#performance

What other CSS performance best practices should you follow?

Open
3
HTML/CSSIntermediate#css#layout-puzzle

How do you implement a full-height sticky sidebar next to scrolling content?

Open