How critical CSS works
A stylesheet blocks rendering by design. Until the browser has fetched and read it, it will not paint anything, because showing unstyled text and then rearranging it looks worse than a short pause. On a slow connection that one rule turns a single file into a visible wait.
Critical CSS splits the problem in two. You work out which rules are needed to draw only what appears on the first screen — the header, the headline, the hero, the first block of text — and place exactly those rules inside the HTML in a style block. The page can now paint the moment the HTML arrives. The full stylesheet is then loaded in a way that does not block, and quietly takes over once it is ready.
Why critical CSS matters
It removes a round trip from the most sensitive moment of a page load: the gap between the visitor tapping a link and seeing anything at all. Every other file can wait. The styles for what appears above the fold cannot, because nothing is drawn until they arrive.
The gain is largest exactly where it is needed most — a mid-range phone on mobile data, which is how a large share of visitors in Nepal reach a site. On a fast desktop connection the stylesheet arrives quickly enough that the difference is hard to see, which is why this problem is so often missed by the person who built the site.
Common mistakes with critical CSS
Inlining too much is the first. Styles placed in the HTML are downloaded again with every page, because they cannot be cached separately, so an over-generous slice makes every page after the first one heavier. The point is a small set of rules, not a copy of the stylesheet.
Using one set for every template is the second. A home page, a service page and a blog post do not look alike above the fold, so critical styles generated from the home page leave the article briefly unstyled, then jolt into place when the real stylesheet lands. That jolt is a layout shift, and it is measured.
The third is staleness. Critical CSS is generated from the design as it was on the day it was made. Redesign the header, forget to regenerate, and you are inlining rules for a layout that no longer exists.
How to act on it
Automate it. Generate the critical styles as part of your build or through a maintained plugin, per template rather than per site, and regenerate whenever the design changes. Hand-maintained critical CSS goes stale within weeks.
Check the result with your own eyes at phone width, not only in a score: load the page, watch the first paint, and confirm nothing flashes unstyled or jumps as the full stylesheet arrives. And weigh the complexity honestly. On a small site with one lean stylesheet, trimming and compressing that file is simpler and safer than maintaining an inlining step, and a page speed review should say so plainly rather than adding machinery for its own sake.