When the browser loads your page, it reads the HTML code line by line. When it encounters <script src="big-file.js"> or <link rel="stylesheet">, it stops everything else, downloads that file and executes it.
Only then does it render the rest of the page. This is “Render-Blocking”.
In 2026, when Core Web Vitals matter (especially LCP - Largest Contentful Paint), you need to fix this.
1. Javascript: Async and defer
Old school said: “put scripts in the footer (wp_footer)”.
New school says: “use attributes”.
<script async>: Downloads in the background, executes immediately after download (risky for dependencies, e.g., jQuery).<script defer>: Downloads in the background, executes only after HTML is loaded (safe, preserves order).
How to add defer in WordPress? Caching plugins (WP Rocket, Autoptimize, LiteSpeed Cache) have a “Defer JS” option. Enable it.
This usually solves 90% of JS problems.
2. CSS: Critical CSS
CSS is harder. You can’t “delay” it because the page will look like “raw text” for a moment (unstyled - FOUC effect).
The solution is Critical CSS.
- Take only the CSS needed to display the “above the fold” content (what’s visible without scrolling).
- Paste it inline in
<style>in the header. - Load the rest of the CSS (footer, lower sections) asynchronously in the background.
Most modern optimization plugins generate Critical CSS automatically.
Summary strategy
- JS: Everything with
defer(except absolutely critical analytics/cookie scripts). - CSS: Critical CSS inline + rest asynchronously.
- Fonts: Use
font-display: swap.
This way, the user sees content immediately while heavy gallery or map scripts load in the background.
