No render-blocking resources

render_blocking

Checks for render-blocking resources in the page head.

What does this rule check?

Render-blocking resources (synchronous scripts and stylesheets in <head>) prevent the browser from rendering any content until they are downloaded and processed. This directly delays First Contentful Paint.

Why is this important?

Render-blocking resources are one of the biggest causes of slow page rendering. They delay the time until users see any content, increasing perceived load time and bounce rate.

How to fix

Add async or defer attributes to scripts. Inline critical CSS and lazy-load the rest. Move non-essential scripts to the end of the body.

Examples

<head>
  <script src="analytics.js"></script>
  <script src="chat-widget.js"></script>
  <link rel="stylesheet" href="all-styles.css" />
  <!-- All blocking rendering! -->
</head>

<head>
  <style>/* Critical CSS inlined */</style>
  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'" />
  <script src="analytics.js" defer></script>
  <script src="chat-widget.js" async></script>
</head>

Agent fix snippet

Copy this snippet and paste it into your AI coding agent to fix this issue automatically.

Fix render-blocking resources:
1. Add defer to non-critical scripts: <script src="app.js" defer></script>
2. Add async for independent scripts: <script src="analytics.js" async></script>
3. Inline critical CSS in a <style> tag
4. Lazy-load non-critical CSS