GlossarySEO
What are render-blocking resources?
Also called: eliminate render-blocking resources, render-blocking CSS, render-blocking JavaScript
Definition
Render-blocking resources are CSS and JavaScript files the browser must download and process before it can show anything on screen. Lighthouse flags them because they delay first paint.
Render-blocking resources, explained
Lighthouse's audit explains which URLs it flags. For scripts: a <script> in the <head> that has no defer attribute and no async attribute. For stylesheets: a <link rel="stylesheet"> that has no disabled attribute and no media attribute that doesn't match the user's device. Anything matching those rules stops the browser from painting until it's fetched and processed.
CSS blocks rendering by design, because the browser doesn't want to show unstyled content. Synchronous scripts block because they might change the page. The cost is small for one tiny file and large for several big ones on a slow mobile connection, which is exactly the scenario field data captures.
Lighthouse's recommended fixes: for scripts, inline the critical code that must run early and mark the rest async or defer, or remove unused code; for styles, inline the critical CSS needed for above-the-fold content in a <style> block and load the rest asynchronously, or split stylesheets by media query so the browser only waits for the ones that apply. Minifying CSS and removing unused rules helps too.
Modern frameworks handle much of this. Next.js, for example, loads its own scripts without blocking and extracts CSS per route. The render-blocking files that remain on startup sites are usually third-party: tag managers, chat widgets, A/B testing snippets and font stylesheets from external hosts added straight into the head.
Why it matters for founders
One synchronous marketing script in the head can add a second of blank screen on mobile. It's usually a one-line fix once you know which file it is.
Example
Lighthouse flags a synchronous A/B testing script and a Google Fonts stylesheet. You load the testing script with async, self-host one font with a preload, and FCP improves.
Common mistakes
- Third-party scripts pasted into the head without
asyncordefer. - One huge CSS file for the whole site.
- Deferring scripts that the first paint actually depends on.
- External font stylesheets on the critical path.
Sources
Checked
Related terms
- First Contentful Paint (FCP)First Contentful Paint (FCP) measures how long it takes for any content, such as text, an image or an SVG, to first appear on screen. Good FCP is 1.8 seconds or less.
- Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) is a Core Web Vital measuring how long it takes for the largest image or text block in the viewport to render. Google's target is 2.5 seconds or less for 75% of page loads.
- LighthouseLighthouse is Google's open-source tool that audits a web page for performance, accessibility, best practices and SEO, and gives each category a 0–100 score with specific fixes.
- Core Web VitalsCore Web Vitals are three Google metrics for real-user page experience: Largest Contentful Paint (loading), Interaction to Next Paint (responsiveness) and Cumulative Layout Shift (visual stability).