Definition
Render-blocking resources are CSS and JavaScript files the browser must download and process before it can show anything on the page.
Render-blocking resources explained
When a browser loads a page, it reads the HTML from the top. Stylesheets in the head, and scripts without the async or defer attributes, pause rendering until they have downloaded and run. On a slow connection, several large files can leave visitors looking at a blank screen.
Common fixes include:
- Adding defer or async to scripts that aren't needed for the first view.
- Inlining the small amount of critical CSS needed for above-the-fold content and loading the rest later.
- Removing unused CSS and JavaScript, often left behind by themes and plugins.
- Self-hosting fonts and loading them with a sensible font-display setting.
- Loading third-party tags through a tag manager after the page is interactive.
PageSpeed Insights and Lighthouse list render-blocking resources, with the estimated time each costs, which makes them a practical place to start.
Example
Your theme loads a large icon library stylesheet and a slider script in the page head on every page, even where neither is used. Loading them only on pages that need them, and deferring the script, lets the page render much sooner.
Why it matters
Removing render-blocking files is often one of the biggest single improvements to how quickly a page first appears and to LCP.
Related service
Page Speed Optimization
We fix LCP, INP and CLS issues so pages load fast and respond quickly for real users.
Page speed and Core Web Vitals optimizationPublished by Vidern, founded and led by Malhar Shah. Updated .
Find out what's holding your site back
Get a free SEO audit with prioritized fixes, delivered within 48 hours.
Related terms
- LCP (Largest Contentful Paint)LCP (Largest Contentful Paint) measures how long the largest image, video or text block in view takes to render; 2.5 seconds or less is good.
- INP (Interaction to Next Paint)INP (Interaction to Next Paint) measures how quickly a page visibly responds to clicks, taps and key presses; 200 milliseconds or less is good.
- PageSpeed InsightsPageSpeed Insights is Google's free tool that reports a page's real-user Core Web Vitals and runs a Lighthouse lab test with suggestions for improvement.
- Core Web VitalsCore Web Vitals are three Google metrics for real-user experience: loading (LCP), responsiveness (INP) and visual stability (CLS).