Render-Blocking Resources
Resources — typically CSS and synchronous JavaScript — the browser must fetch and parse before it can paint the first frame of a page.
Definition
Render-blocking resources are external files — most commonly stylesheets and synchronous scripts in the document `<head>` — that the browser must download, parse, and execute before it can render the page's initial frame.
Render-blocking content delays metrics such as First Contentful Paint and Largest Contentful Paint because the browser pauses rendering until each blocking resource is processed. Common reductions include inlining critical CSS, deferring non-critical stylesheets with media queries, and adding `defer` or `async` to script tags. Lighthouse and PageSpeed Insights flag specific render-blocking files in the "Eliminate render-blocking resources" audit.
Examples
Plugin stylesheets in the head
A WordPress site loads four full plugin stylesheets in the `<head>`, costing 600ms before render. Inlining critical CSS and switching the rest to `media="print" onload="this.media='all'"` cuts blocking time to 80ms and improves LCP by roughly 500ms.
Sources
Related terms
- Core Web VitalsA set of three Google metrics that measure real-world page experience: loading speed, interactivity and visual stability.
- Largest Contentful PaintA Core Web Vitals metric measuring how long the largest visible content element on a page takes to render after loading begins.
- Lazy LoadingA technique that defers loading of off-screen images, iframes, or other resources until the user is about to scroll them into view.
Where QueryCatch uses this
Last updated: 10/05/2026