Render Blocking
Render blocking occurs when CSS or JavaScript files prevent a web page from displaying content until they are fully downloaded and processed by the browser.
When a browser loads a web page, it must parse the HTML and build a render tree before displaying anything. Certain resources can block this process. CSS is render-blocking by default because the browser needs to know how to style content before showing it, displaying unstyled content would cause a jarring flash.
Render-blocking resources are the primary cause of slow First Contentful Paint (FCP) and Largest Contentful Paint (LCP). The more render-blocking resources a page has, the longer users stare at a blank or partially loaded screen.
In practice
- A WordPress site had 12 render-blocking stylesheets and 8 blocking scripts, consolidating and deferring them reduced FCP from 4.2 seconds to 1.1 seconds
- An e-commerce site inlined their critical above-the-fold CSS (3KB) and deferred the remaining 200KB, letting the page appear immediately while the rest loaded in the background
- A corporate website moved all analytics and marketing scripts to defer/async and improved their Lighthouse performance score from 42 to 78
- A single-page application added an async attribute to their main bundle script and a loading spinner appeared 2 seconds earlier, dramatically improving perceived speed
Not sure how this applies to you?
A senior engineer walks your site, your search presence and the way enquiries reach you, then writes down the three things worth fixing first. You keep the document either way.