December 22, 2021 | 5 min read

Eliminate render-blocking resources in Shopify

The Opportunities section of tools report lists all URLs blocking the first paint of your page. The goal is to reduce the impact of these render-blocking URLs by inlining critical resources, deferring non-critical resources, and removing anything unused.
  • Defer non-critical CSS / JS to load below the fold.
  • This can make the top of your page load faster, giving a faster perceived load time.

1. Identification Eliminate render-blocking resources

Tools like GT metrix,lighthouse,Page speed insights.
Eliminate-render-blocking-resources-mobile

2. There are Ways to Remove Render-Blocking JavaScript

2.1 The Preload Attribute for Critical Resources
Example
Before
< link rel=”stylesheet” href=”/css/style.css” >
After
< link rel =”preload” href=”/css/style.css” as=”style” onload=”this.rel=’stylesheet’” >
< noscript >< link rel=”stylesheet” href=”/css/style.css” >< /noscript >

2.2 Using Async and Defer Attributes to Load Script

Defer –The defer attribute instructs the browser to download the script in the background so it won’t block the rendering of the page.
Async –The async attribute informs the browser that a script is completely independent of the page.
Example
(a)
Before
< script src=”{{ ‘theme.min.v1.js’ | asset_url }}” >< /script >
After
< script src=”{{ ‘theme.min.v1.js’ | asset_url }} defer” >< /script >
( b )
Before
(c)
Before
< script type="text/javascript” >
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "5z8t9acktg");
< /script >
After
< script type="text/javascript” >
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "5z8t9acktg");
< /script >