Render-Blocking Resources

Why CSS and JavaScript in <head> delay page rendering and how to eliminate render‑blocking resources to improve Core Web Vitals.

In brief

Render-blocking resources are stylesheets and scripts that the browser must load and process before it can start painting the page. They directly increase First Paint and Largest Contentful Paint.

What blocks rendering

The main culprits are synchronous resources in <head>:

External stylesheets (<link rel="stylesheet">).
Synchronous scripts (<script src="…"> without defer or async).
Nested @import statements in CSS.

The browser pauses page construction until these files are loaded and processed, making users see a white screen longer.

How to fix CSS

The best approach is to inline critical CSS (styles for the visible area) inside a <style> tag and load the main file asynchronously:

HTML

<style>/* critical CSS */</style>
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Media queries also help: files intended only for print or large screens are not considered render‑blocking for the initial view.

How to fix JavaScript

Add the defer attribute for scripts that must execute after HTML parsing, or async for independent ones (analytics, counters). Example:

HTML

<!-- defer – recommended for most cases -->
<script src="app.js" defer></script>
<!-- async – for scripts that don't affect the DOM -->
<script src="analytics.js" async></script>

How to detect render‑blocking resources

Run PageSpeed Insights or Lighthouse and look for the “Eliminate render‑blocking resources” audit. In Chrome DevTools, the Network panel shows red bars in the waterfall for requests that block the initial render.

FAQ

Common questions

Open Chrome DevTools → Network. Resources loaded before the start render time appear red or pink in the Waterfall column.

defer preserves execution order and waits for HTML parsing; async executes immediately after load, regardless of order. Use defer for your main app.

It's the most effective technique, but you can use preload with a deferred stylesheet. The goal is to style the visible area instantly.

Yes, through Core Web Vitals, which are ranking signals. Eliminating them improves LCP and the overall Page Experience score.