Render-Blocking Resources | Blue Frog Docs

Render-Blocking Resources

Optimize JavaScript and CSS to eliminate render-blocking resources and improve page load performance

Render-Blocking Resources

What This Means

Render-blocking resources are JavaScript and CSS files that prevent the browser from displaying content to users until they are fully downloaded and processed. When a browser encounters these resources in the <head> of your HTML, it pauses rendering the page, creating a delay before users see anything on screen.

How Render-Blocking Works

The Browser Rendering Process:

  1. Browser downloads HTML
  2. Starts parsing HTML top to bottom
  3. Encounters <link> or <script> in <head>
  4. STOPS rendering to download and process resource
  5. User sees blank white screen
  6. After resource loads, rendering continues

Example Blocking Resources:

<!DOCTYPE html>
<html>
<head>
    <!-- BLOCKING: Browser stops to download these -->
    <link rel="stylesheet" href="styles.css">
    <script src="analytics.js"></script>
    <script src="jquery.min.js"></script>
    <link rel="stylesheet" href="fonts.css">
</head>
<body>
    <!-- User sees nothing until all above resources load -->
    <h1>Welcome!</h1>
</body>
</html>

Impact on Your Business

Performance Impact:

  • Slower First Contentful Paint (FCP) - Users wait longer to see content
  • Poor Largest Contentful Paint (LCP) - Main content delayed
  • Higher bounce rates - Users leave before page loads
  • Reduced conversions - Slow pages lose customers
  • Mobile users suffer most - Slower networks amplify the problem

SEO Consequences:

Business Metrics:

  • Amazon found 100ms delay = 1% revenue loss
  • Google found 500ms delay = 20% traffic drop
  • Walmart saw 1% revenue increase per 100ms improvement

How to Diagnose

Method 1: Google PageSpeed Insights

  1. Visit PageSpeed Insights
  2. Enter your URL
  3. Click Analyze
  4. Look for "Eliminate render-blocking resources" warning

What to Look For:

❌ Problem:

Opportunities
⚠ Eliminate render-blocking resources - Potential savings: 0.87s
   /css/style.css (150ms)
   /js/script.js (220ms)
   https://fonts.googleapis.com/css2... (180ms)

Method 2: Chrome DevTools Performance Tab

  1. Open DevTools (F12)
  2. Go to Performance tab
  3. Click Record (circle icon)
  4. Reload page
  5. Stop recording
  6. Look for long yellow "Parse Stylesheet" or "Evaluate Script" bars

What to Look For:

  • Long yellow bars blocking rendering
  • Network requests marked "High Priority" in head
  • FCP delayed by stylesheet/script parsing

Method 3: Lighthouse

  1. Open DevTools (F12)
  2. Go to Lighthouse tab
  3. Select Performance
  4. Click Analyze page load
  5. Review "Opportunities" section

Check for:

  • "Eliminate render-blocking resources"
  • Number of blocking resources
  • Potential time savings

Method 4: WebPageTest

  1. Visit WebPageTest.org
  2. Enter your URL
  3. Run test
  4. Review Waterfall Chart

What to Look For:

  • CSS/JS files loaded before first paint
  • Resources blocking the start render line
  • High priority resources in <head>

Method 5: Browser DevTools Network Tab

  1. Open DevTools (F12)
  2. Go to Network tab
  3. Check Disable cache
  4. Reload page
  5. Look at timeline view

Identify Blocking Resources:

  • Resources loaded before DOM content
  • Files marked with high priority
  • CSS/JS in critical rendering path

General Fixes

Fix 1: Defer Non-Critical JavaScript

Add defer attribute to scripts:

<!-- BEFORE (blocking): -->
<script src="/js/analytics.js"></script>
<script src="/js/widgets.js"></script>

<!-- AFTER (non-blocking): -->
<script src="/js/analytics.js" defer></script>
<script src="/js/widgets.js" defer></script>

Use async for independent scripts:

<!-- Scripts that don't depend on each other -->
<script src="/js/analytics.js" async></script>
<script src="/js/chat-widget.js" async></script>

Difference between defer and async:

<!-- defer: Downloads in parallel, executes in order after HTML parsing -->
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>

<!-- async: Downloads in parallel, executes immediately when ready -->
<script src="analytics.js" async></script>
<script src="tracking.js" async></script>

Fix 2: Inline Critical CSS

Extract above-the-fold CSS and inline it:

<head>
    <!-- Inline critical CSS for above-fold content -->
    <style>
        /* Critical CSS for header, hero, navigation */
        body { margin: 0; font-family: Arial, sans-serif; }
        .header { background: #000; color: #fff; padding: 20px; }
        .hero { min-height: 400px; background: #f0f0f0; }
    </style>

    <!-- Load full stylesheet asynchronously -->
    <link rel="preload" href="/css/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="/css/styles.css"></noscript>
</head>

Tools to extract critical CSS:

Fix 3: Load CSS Asynchronously

Technique 1: Preload + JavaScript:

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

Technique 2: Media Query Hack:

<!-- Load immediately on print, then apply to all -->
<link rel="stylesheet" href="/css/styles.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="/css/styles.css"></noscript>

Technique 3: LoadCSS Library:

<script>
/*! loadCSS rel=preload polyfill */
!function(e){"use strict";var t=function(t,n,r){function o(e){return a.body?e():void setTimeout(function(){o(e)})}var i,a=e.document,l=a.createElement("link");if(n)i=n;else{var d=(a.body||a.getElementsByTagName("head")[0]).childNodes;i=d[d.length-1]}var f=a.styleSheets;l.rel="stylesheet",l.href=t,l.media="only x",o(function(){i.parentNode.insertBefore(l,n?i:i.nextSibling)});var s=function(e){for(var t=l.href,n=f.length;n--;)if(f[n].href===t)return e();setTimeout(function(){s(e)})};return l.addEventListener&&l.addEventListener("load",r),l.onloadcssdefined=s,s(r),l};"undefined"!=typeof exports?exports.loadCSS=t:e.loadCSS=t}("undefined"!=typeof global?global:this);
</script>
<script>loadCSS("/css/styles.css");</script>

Fix 4: Move Scripts to Bottom

Move non-critical scripts before </body>:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <!-- Only critical resources here -->
    <style>/* Critical CSS */</style>
</head>
<body>
    <!-- All your content -->
    <h1>Welcome!</h1>

    <!-- Scripts at the bottom -->
    <script src="/js/app.js"></script>
    <script src="/js/analytics.js"></script>
</body>
</html>

Fix 5: Use Resource Hints

Preconnect to third-party domains:

<head>
    <!-- Establish early connections -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://cdn.example.com">
    <link rel="dns-prefetch" href="https://analytics.google.com">
</head>

Preload critical resources:

<head>
    <!-- Preload critical resources -->
    <link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/css/critical.css" as="style">
    <link rel="preload" href="/js/main.js" as="script">
</head>

Fix 6: Minify and Combine Files

Minify CSS and JavaScript:

# Using npm packages
npm install -g clean-css-cli uglify-js

# Minify CSS
cleancss -o styles.min.css styles.css

# Minify JavaScript
uglifyjs script.js -o script.min.js

Combine multiple files:

<!-- BEFORE: Multiple requests -->
<link rel="stylesheet" href="/css/header.css">
<link rel="stylesheet" href="/css/navigation.css">
<link rel="stylesheet" href="/css/footer.css">

<!-- AFTER: Single combined file -->
<link rel="stylesheet" href="/css/combined.min.css">

Fix 7: Use HTTP/2 Server Push

Nginx configuration:

server {
    listen 443 ssl http2;
    server_name example.com;

    location / {
        # Push critical resources
        http2_push /css/critical.css;
        http2_push /js/main.js;
        http2_push /fonts/main-font.woff2;
    }
}

Apache configuration:

<IfModule mod_http2.c>
    H2Push on
    H2PushResource add /css/critical.css
    H2PushResource add /js/main.js
    H2PushResource add /fonts/main-font.woff2
</IfModule>

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform Troubleshooting Guide
Shopify Shopify Render-Blocking Resources Guide
WordPress WordPress Render-Blocking Resources Guide
Wix Wix Render-Blocking Resources Guide
Squarespace Squarespace Render-Blocking Resources Guide
Webflow Webflow Render-Blocking Resources Guide

Verification

After optimizing render-blocking resources:

Test 1: PageSpeed Insights

  1. Run PageSpeed Insights
  2. Check "Eliminate render-blocking resources" is no longer flagged
  3. Verify FCP and LCP improvements
  4. Mobile and Desktop scores should improve

Test 2: Chrome DevTools

  1. Open DevTools Performance tab
  2. Record page load
  3. Verify FCP occurs earlier
  4. Check that stylesheets/scripts don't block painting

Test 3: Lighthouse

  1. Run Lighthouse audit
  2. Performance score should improve
  3. "Opportunities" section should show fewer blocking resources
  4. Time savings should be minimal or zero

Test 4: WebPageTest

  1. Run WebPageTest
  2. Check Start Render time improved
  3. Waterfall should show resources loading after first paint
  4. Film strip should show content earlier

Common Mistakes

  1. Using async on dependent scripts - Scripts that depend on each other need defer
  2. Forgetting <noscript> fallback - CSS won't load if JavaScript disabled
  3. Inlining too much CSS - Keep inline CSS under 14KB
  4. Not testing on real devices - Simulator doesn't show real performance
  5. Blocking fonts - Use font-display: swap for web fonts
  6. Over-optimizing - Don't break functionality for marginal gains
  7. Ignoring caching - Set proper cache headers for resources
  8. Not monitoring after deploy - Performance can regress

Further Reading

↑ Back to top
// SYS.FOOTER