How to Fix Render Blocking Resources in Shopify

What Are Render Blocking Resources?

Render blocking resources are CSS and JavaScript files that prevent the browser from displaying page content until they're fully downloaded and processed. In Shopify stores, these typically include:

• Theme CSS files
• App CSS and JavaScript
• Third-party tracking scripts
• Font files loaded via CSS

How to Identify Render Blocking Resources

Use Google PageSpeed Insights or Lighthouse to identify which resources are blocking your page render:

1. Go to PageSpeed Insights
2. Enter your Shopify store URL
3. Look for "Eliminate render-blocking resources" in the Opportunities section
4. Note which CSS and JS files are listed

Fix #1: Inline Critical CSS

Critical CSS is the minimum CSS needed to render above-the-fold content. By inlining this CSS in the HTML head, you eliminate the render-blocking CSS request:

<!-- In theme.liquid, add critical CSS inline -->
<style>
  /* Critical CSS for above-fold content */
  body { margin: 0; font-family: sans-serif; }
  .header { background: #000; padding: 1rem; }
  /* ... more critical styles */
</style>

Fix #2: Defer Non-Critical CSS

Load non-critical CSS asynchronously using the preload technique:

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

Fix #3: Defer JavaScript

Add the defer or async attribute to JavaScript files that don't need to run immediately:

<!-- Defer JavaScript execution -->
<script src="app.js" defer></script>

<!-- Or load asynchronously -->
<script src="analytics.js" async></script>

Fix #4: Remove Unused Apps

Many Shopify apps add CSS and JavaScript to every page, even if they're only used on specific pages. Audit your installed apps and remove any that aren't essential.

Expected Results