PageSpeed

PageSpeed: Eliminate Render-Blocking Resources

Last updated: April 2026

Scripts and stylesheets loaded in <head> without defer or async block the browser from rendering the page until they download and execute.

Get your stack-specific fix →

Fix 1 — defer non-critical JavaScript

<!-- Before: blocks rendering -->
<script src="analytics.js"></script>

<!-- After: defer executes after HTML parsed -->
<script src="analytics.js" defer></script>

<!-- async: executes as soon as downloaded (no order guarantee) -->
<script src="non-critical.js" async></script>

Fix 2 — preload critical CSS

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

Fix 3 — inline critical CSS

<style>
  /* Only above-the-fold styles */
  body { margin: 0; font-family: sans-serif; }
  .hero { background: #000; color: #fff; }
</style>
<link rel="stylesheet" href="/full.css" media="print" onload="this.media='all'">

Fix 4 — Nginx HTTP/2 server push (preload link header)

add_header Link "</critical.css>; rel=preload; as=style" always;