Render-Blocking Resources: How to Find and Fix Them

Short answer: a render-blocking resource is a CSS or JavaScript file the browser must finish loading before it can paint your page. Fix it by adding defer to scripts that are not needed immediately, and by loading only the CSS the first screen requires.

Visitors feel this as a blank page for a second or two, even on a fast connection. It is a common warning in PageSpeed Insights under "Eliminate render-blocking resources". If your server itself is slow to answer, fix that first, see slow server response time.

Step 1: list the blocking files

Run your page through PageSpeed Insights and open the "Eliminate render-blocking resources" item. It lists each file and the time it could save. You can also use Chrome DevTools: open the Network tab, reload, and look at which CSS and JS files load before the first paint in the waterfall.

Focus on files in the <head> of the page, since those block by default.

Step 2: defer or async the JavaScript

A plain script tag in the head stops the page while it downloads and runs. Two attributes change that:

<script src="/js/app.js" defer></script>
<script src="/js/analytics.js" async></script>

Scripts that depend on each other should both use defer so they keep their order. In WordPress, an optimization plugin can add defer for you, but test the site afterwards.

Step 3: handle the CSS

CSS blocks rendering on purpose, because showing unstyled content looks broken. The goal is to send less of it:

• Remove CSS from plugins and themes you no longer use.
• Split print or large-screen styles with a media attribute so they do not block mobile: <link rel="stylesheet" href="print.css" media="print">.
• Inline a small amount of "critical" CSS for the top of the page, and load the rest after. Tools and some caching plugins can generate this.
• Load fonts with font-display: swap so text appears while the font loads.

Step 4: reduce third-party scripts

Tag managers, chat widgets, ad scripts and social embeds are the biggest blockers on many sites. Load them after the page is ready, or remove ones you do not use. Broken or slow external scripts cause their own problems, covered in third-party script errors.

Step 5: test again

Re-run PageSpeed Insights and compare First Contentful Paint and Largest Contentful Paint. Then click through the site, including menus, forms and checkout, because delayed scripts can break features. Keep a note of each change so you can undo the one that caused a problem.

Common mistakes

• Adding async to scripts that depend on each other, which breaks load order.
• Deferring every script, including ones that build the visible menu or hero area.
• Chasing a perfect score instead of checking what real visitors see.
• Inlining a huge block of CSS, which makes the HTML itself slow.
• Never retesting after enabling an optimization plugin.