December 22, 2021 | 5 min read
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.
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 >
