Eliminate Render-Blocking Resources: Critical CSS, Defer and Async Explained

When a browser loads your page, CSS and some JavaScript in the <head> must be downloaded and processed before anything appears on screen. These are render-blocking resources. Learning to eliminate render-blocking resources (or minimise them) speeds up First Contentful Paint and LCP.

Render-blocking JavaScript

Scripts in the head without defer or async stop HTML parsing.

<!-- Blocking -->
<script src="/js/app.js"></script>

<!-- Better -->
<script src="/js/app.js" defer></script>
<script src="https://example-analytics.com/tag.js" async></script>

• defer: downloads in parallel, runs after HTML is parsed, in order. Best for most site scripts
• async: downloads in parallel, runs as soon as ready, in any order. Good for independent scripts like analytics
• Move non-critical scripts to load after interaction. See reduce unused JavaScript

Render-blocking CSS

CSS is render-blocking by design (to avoid unstyled content). Reduce its impact:

1. Inline critical CSS

Put the small amount of CSS needed for the first screen (header, hero) directly in a <style> tag in the head. Load the rest without blocking:

<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>

2. Remove unused CSS

Large frameworks and page builders load lots of unused CSS. Purge it where possible. See Tailwind vs Bootstrap.

3. Media attributes

Stylesheets for print or specific screen sizes:

<link rel="stylesheet" href="/css/print.css" media="print">

4. Fewer, smaller files

Combine tiny CSS files carefully; minify.

Fonts

Web fonts can delay text rendering. Self-host, preload the main font and use font-display: swap. See web fonts and speed.

WordPress

Caching/optimisation plugins offer "defer JavaScript", "delay JavaScript", "generate critical CSS" and "remove unused CSS". Enable one at a time and test pages (menus, forms, sliders, checkout) after each change.

Be careful

• Deferring jQuery while inline scripts depend on it causes errors
• Delaying scripts can break above-the-fold features like mobile menus
• Always test on a staging site

FAQs

Can I remove all render-blocking resources?

Some CSS will always be needed before first paint. The goal is to make it small and fast.

Does this affect SEO?

Faster rendering improves user experience and Core Web Vitals, which support SEO.

Joboo Web fine-tunes CSS and JavaScript loading on every site we optimise. Get a speed audit.