Advertisement

Open a slow website and there is often a moment of blank white before anything appears. That gap is rarely the server being slow; more often it is the browser being told to wait. Certain resources — some scripts and stylesheets — block the browser from painting the page until they are downloaded and processed. They are called render-blocking resources, and taming them is one of the highest-impact performance wins available.

The browser is not being lazy. It is following the rules of how HTML, CSS and JavaScript interact, and those rules force it to pause.

Why the browser waits

When the browser parses your HTML and hits a stylesheet, it generally waits for that CSS before rendering, because painting content and then restyling it would cause an ugly flash of unstyled and then re-styled content. When it hits a plain script tag, it stops parsing entirely to download and run the script, because that script might rewrite the very HTML being parsed.

So a few large stylesheets in the head, or a pile of ordinary scripts before your content, can hold the whole page hostage. The user stares at white while the browser dutifully waits for resources that often have nothing to do with the first thing they need to see.

Advertisement

The fixes for scripts

Scripts have two magic attributes. Marking a script "defer" lets the browser keep parsing the page and run the script after the HTML is ready, in order — ideal for most application scripts. Marking it "async" lets it download in parallel and run whenever it arrives, good for independent third-party scripts like analytics. Either one stops the script from blocking the initial render.

The broader move is to ship less script up front and load non-critical code later, only when needed. Every kilobyte of JavaScript in the critical path is time the user spends looking at nothing.

The fixes for CSS

CSS is trickier because you genuinely need styles before painting, or the page flashes unstyled. The professional approach is to inline the small amount of "critical CSS" needed to render what is first visible, and load the rest of the stylesheet in a non-blocking way. Splitting giant global stylesheets and removing unused rules shrinks the blocking payload directly.

Measure before and after with your browser's performance tools, which flag render-blocking resources explicitly. Deferring scripts, trimming and inlining critical CSS, and shipping less up front routinely turn that second of blank white into an instant paint — and first impressions of speed drive whether people stay.