How to Fix Render-Blocking JavaScript
To fix render-blocking JavaScript, stop scripts from loading before the page can display: add the defer or async attribute to non-critical <script> tags, inline only the CSS needed for the first screen, and split large bundles so the browser can paint content first. This directly improves your Largest Contentful Paint and Core Web Vitals.
What 'render-blocking' means
When the browser hits a plain <script> tag in the <head>, it stops building the page, downloads and runs that script, and only then continues. Several of these in a row delay the moment the user sees anything — hurting Largest Contentful Paint (LCP), a Core Web Vitals metric Google uses. It also hurts AI visibility: many AI crawlers don't execute JavaScript at all, so content that only appears after scripts run may be invisible to them.
The fixes, in order of impact
- Add
defer: for most scripts — they download in parallel and run after the HTML is parsed, in order. The safe default. - Add
async: for independent third-party scripts (analytics) that don't depend on others. - Inline critical CSS for the first screen and load the rest asynchronously.
- Code-split and lazy-load: ship only the JavaScript a page needs; defer the rest until it's used.
- Remove unused scripts — old tags and abandoned widgets are pure cost.
How to confirm the fix worked
- Lighthouse / PageSpeed Insights: the 'Eliminate render-blocking resources' audit should shrink or disappear, and LCP should drop.
- Field data (Core Web Vitals): real-user LCP in Search Console's Core Web Vitals report is what Google actually uses — check it a few weeks after shipping.
- The raw-HTML view: fetch the page the way an AI crawler does (no JavaScript) and confirm your main content is present, not an empty shell.
See what crawlers render without JavaScript — scan your site with PatchMySEO to find render-blocking resources and content that's invisible to AI engines.
Frequently asked questions
What does 'eliminate render-blocking resources' mean?
It's a PageSpeed/Lighthouse recommendation to stop CSS and JavaScript from delaying the first paint of the page. You fix it by deferring or async-loading non-critical scripts and inlining only the CSS needed for the top of the page.
Should I use defer or async?
Use defer for most scripts — they run in order after the HTML is parsed. Use async for independent third-party scripts like analytics that don't depend on anything else on the page.
Does render-blocking JavaScript hurt SEO?
Yes, indirectly. It slows Largest Contentful Paint, a Core Web Vitals ranking signal, and — because many AI crawlers don't run JavaScript — it can hide content from the engines that decide whether to cite you.
Will AI engines see content loaded by JavaScript?
Often not. Most AI answer engines read raw HTML and skip JavaScript, so content injected client-side can be invisible to them. Server-render or statically include important content.