Render-blocking resources medium
Eliminate render-blocking resources
CSS and synchronous scripts in the head stall first paint, holding the page blank until they finish downloading.
What you see
Eliminate render-blocking resources Potential savings of 1,150 ms /css/style.css … /js/vendor.js
What’s actually happening
Lighthouse and PageSpeed list specific CSS files and synchronous <script> tags in your <head> with an estimated time they're costing you. While those files download and parse, the browser paints nothing — the page sits blank. A single bloated stylesheet or a third-party script loaded synchronously in the head can push first paint (and LCP with it) back by a second or more. The render only starts once that blocking chain clears.
Common causes
- A large CSS file (or several) loaded with a plain <link rel="stylesheet"> in the head — CSS is render-blocking by default
- Synchronous <script> tags in the head with no defer or async, so HTML parsing pauses for each one
- Render-blocking fonts loaded via @import or a stylesheet that itself blocks
- Plugin/theme CSS and JS enqueued in the head that the above-the-fold view never uses
- Third-party libraries (jQuery, sliders) loaded synchronously before content
How to fix it
- See what's actually used for first paintOpen DevTools → Coverage tab, reload, and check how much of each CSS/JS file is unused on the initial view. That tells you what to inline, defer, or drop.
- Inline critical CSS, defer the restExtract the CSS needed for above-the-fold and inline it in a <style> block in the head. Load the full stylesheet non-blocking with rel="preload" as="style" onload="this.rel='stylesheet'" so the page paints from the inlined rules immediately.
- Add defer or async to scriptsUse defer on scripts that need the DOM (they run in order after parsing) and async on independent ones (analytics). Anything not required for first paint should not block the parser — move it out of the critical path.
- Split CSS by mediaStylesheets that only apply in certain conditions shouldn't block. Add a media attribute (e.g. media="print" for print styles) so the browser downloads them without blocking the initial render.
- Drop or load fonts non-blockingPreload the one or two fonts you need and add font-display: swap; remove @import font loading, which chains an extra blocking request.
Stop it recurring
Bake a critical-CSS step into the build and lint for synchronous head scripts so a new plugin can't silently re-introduce a blocking resource.
Related errors