Skip to content
Eliminate Render-Blocking Resources in Shopify
Bhavesha | December 22, 2021 | 5 min read
The opportunities section of the GSI tools report lists all URLs blocking the rendering of your site and impacting the first contentful paint and largest contentful paint of your page. The goal is to reduce the impact of these render-blocking URLs.
The following actions are taken to achieve this goal:
- By inlining critical resources
- Deferring non-critical resources
- Removing anything unused.
In particular, we will check the above-the-fold and below-the-fold JS and CSS.
Site Speed Performance Analysis Tools
- Google Pagespeed insights (Recommended)
- GTMetrix
- Google Lighthouse
- ChromeDevTools
What is a Render-Blocking Resource?
Render-blocking resources block the loading of web pages, usually CSS and Javascript. The browser needs a lot of time(specially mobile browsers ) to process these resources, but they may not be necessary for the user experience right away as they are not used in the above fold page display.
Eliminating Render-Blocking CSS
- Removing any unused CSS
- The CSS needed to render the above-the-fold sections of the page should be delivered inline in the HTML(Critical CSS).
- The browser only pulls in the stylesheets for the device type when you add media attributes to CSS links.
The Preload Attribute for Critical Resources
<link rel=”stylesheet”href="/css/style.css">After Apply Preload
<link rel =”preload” href=”/css/style.css”as=”style”onload=”this.rel=’stylesheet’”>Eliminating Render-Blocking JavaScript
The Rendering-block script can be handled in two ways:
Defer –The defer attribute instructs the browser to download the script in the background so it won’t block the rendering of the page.
Example
<script src="{{ 'theme.min.v1.js' | asset_url }}"></script>After Apply “Defer”
<script src="{{ 'theme.min.v1.js' | asset_url }} defer"></script>Async-The async attribute informs the browser that a script is completely independent of the page.
Example
<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 Applied “Asnyc”
<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>
