Render-Blocking Scripts on Shopify: Detection and Fixes
Search intent: fix · Updated February 2026
Render-blocking scripts are external JavaScript files loaded in the <head> without async or defer attributes, which force the browser to pause HTML parsing until the script downloads and executes. On Shopify, this most commonly occurs when third-party apps inject scripts via the ScriptTag API or theme.liquid edits without async/defer. The fix is to add defer to DOM-dependent scripts and async to independent ones (analytics, A/B testing) - either through the app's settings or by editing theme.liquid directly.
Not sure if your store has this issue?
Run a free scan to detect performance problems instantly.
What This Issue Means
Every time someone visits your Shopify store, the browser reads the page's HTML top-to-bottom. When it encounters a <script src="..."> tag without async or defer, it completely stops rendering your page until that script downloads from a third-party server and finishes executing. If a customer on a mobile connection is waiting for 5 app scripts to download sequentially, your page appears blank for those extra seconds - directly costing you sales and harming your Google ranking.
What Causes It (Shopify-Specific)
Shopify apps injecting scripts via ScriptTag API without async/defer
The ScriptTag API injects script tags into your storefront. Many apps use this without async/defer attributes, causing render-blocking. You cannot directly control ScriptTag-injected scripts without requesting the app developer change their implementation.
Third-party scripts added directly to theme.liquid
Chat widgets (Gorgias, Tidio, Intercom), heat mapping tools (Hotjar, Lucky Orange), and loyalty scripts added directly to theme.liquid or the <head> section are often added without async or defer, causing sequential blocking.
Customer-added tracking pixels
Facebook Pixel, TikTok Pixel, Pinterest Tag, and Snapchat Pixel added outside of Google Tag Manager and without async attributes are common render-blockers in Shopify themes.
Legacy app code using document.write()
Older app integrations that use document.write() cannot be safely deferred - deferring them breaks their functionality. These require a different fix: replacing the integration with a modern async alternative or removing the app.
Review widget scripts loaded synchronously
Review apps like Yotpo and some Trustpilot integrations load their widget scripts synchronously in the <head>, causing a blocking load before any product content is painted.
How to Detect It Manually
- 1Run Google PageSpeed Insights on your homepage - look for "Eliminate render-blocking resources" in the Opportunities section
- 2In Chrome DevTools (F12) → Performance tab → record a page load → look for "Parse HTML" pauses caused by script evaluation
- 3View Source (Ctrl+U) → search for <script src= in the <head> section - any result without async or defer is render-blocking
- 4In Chrome DevTools → Network tab → filter by JS → sort by "Initiator" - scripts initiated from the document in the head section are candidates
- 5Google Lighthouse → Performance audit → "Render-blocking resources" lists every offending script URL
How to Fix It (Step-by-Step)
Check each app's settings first
Before editing code, check if the app has a "Load asynchronously" or "Defer script loading" option in its Shopify admin settings. Enable it. Some apps (Gorgias, Tidio) have added this option in recent updates.
Add defer to DOM-dependent scripts in theme.liquid
Use defer for scripts that interact with the page DOM or depend on other scripts. defer scripts execute after the HTML is fully parsed but before DOMContentLoaded.
<!-- Before: render-blocking -->
<script src="https://widget.example.com/chat.js"></script>
<!-- After: deferred (preserves execution order, runs after DOM parse) -->
<script defer src="https://widget.example.com/chat.js"></script>Add async to independent analytics/tracking scripts
Use async for scripts that don't depend on DOM or other scripts (analytics, A/B testing tools). async scripts download in parallel and execute as soon as they're ready.
<!-- Google Tag Manager / Analytics: use async -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>
<!-- Hotjar: use async -->
<script async src="https://static.hotjar.com/c/hotjar-XXXXX.js"></script>Move non-critical scripts to before </body>
If adding async/defer breaks script functionality, moving the script tag to just before </body> achieves a similar effect - the browser renders visible content before loading the script.
<!-- Move chat widgets to just before </body> in theme.liquid -->
<script src="https://widget.example.com/chat.js"></script>
</body>Use Shopify's native script loading for app scripts
For OS 2.0 themes, prefer App Blocks over ScriptTag injections. App Blocks load scripts only on pages where the block is placed and support async loading natively.
Consolidate tracking via Google Tag Manager
Load a single async GTM script and manage all other tracking scripts (Facebook Pixel, TikTok, Pinterest, etc.) through GTM. This replaces multiple synchronous script tags with a single async one.
<!-- Single async GTM script replaces multiple tracking pixels -->
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX"></script>Test each change individually
After adding defer or async to a script, test the functionality it provides (chat widget loads, tracking fires, app features work). Not all scripts are safe to defer - test in a development theme first.
How SEOScan Detects This Issue
SEOScan identifies all <script src="..."> tags in the page's <head> section (before </head>), then checks each for the async or defer attribute. Scripts without either attribute that load from third-party domains (not cdn.shopify.com or shopifycdn.com) are classified as render-blocking. The tool also cross-references these URLs against its database of 50+ Shopify app fingerprints to identify which app is causing each block, providing a prioritised list of offending scripts with remediation advice specific to each app.
Example Scan Result
Description
Scripts from Yotpo (staticw2.yotpo.com), Gorgias (config.gorgias.chat), Hotjar (static.hotjar.com), and an unidentified widget loaded synchronously in <head> without async or defer. Each script blocks HTML rendering until downloaded and executed.
Impact
Each render-blocking script adds 200–800ms to First Contentful Paint (FCP) on mobile connections, directly increasing LCP and reducing Google's Core Web Vitals scores.
Recommended Fix
Add defer attribute to Gorgias and Yotpo scripts. Add async to Hotjar. Check each app's settings for built-in async loading options first before modifying theme.liquid.
Code
<!-- Change these: -->
<script src="https://staticw2.yotpo.com/XXXXX/widget.js"></script>
<script src="https://config.gorgias.chat/XXXXX.js"></script>
<!-- To: -->
<script defer src="https://staticw2.yotpo.com/XXXXX/widget.js"></script>
<script defer src="https://config.gorgias.chat/XXXXX.js"></script>Why It Matters for SEO
Largest Contentful Paint (LCP)
Google uses LCP as a Core Web Vitals ranking signal. Render-blocking scripts directly delay LCP by preventing the browser from painting content. A LCP above 4 seconds is classified as "Poor" and is a confirmed negative ranking factor.
Interaction to Next Paint (INP)
Heavy JavaScript execution from synchronously loaded scripts creates long tasks on the main thread, degrading INP - the Core Web Vital that replaced FID in March 2024. INP above 500ms is "Poor".
Mobile Performance
Mobile users on 3G/4G connections experience render-blocking scripts most severely. 53% of mobile sessions are abandoned if a page takes over 3 seconds to load. Each render-blocking script increases this risk.
Conversion Rate
A 1-second delay in page load time has been consistently measured at approximately 7% conversion rate reduction in e-commerce contexts. Fixing render-blocking scripts is one of the highest-ROI performance improvements available.
Real-World Validation Signals
- The average Shopify store with 5+ apps installed has 3–7 render-blocking scripts in its <head>.
- Fixing render-blocking scripts typically reduces LCP by 200–800ms on mobile, depending on the number and size of offending scripts.
- Stores that move from "Poor" to "Good" LCP see an average 5–12% improvement in bounce rate according to industry case studies.
- Gorgias, Yotpo (standard widget), Lucky Orange, Hotjar, and non-GTM Facebook Pixel are the most frequently detected render-blocking apps across Shopify stores.
- After moving tracking scripts to GTM with async loading, common to reduce render-blocking from 6+ scripts to a single async GTM script.
Frequently Asked Questions
Q: Should I use async or defer - what's the difference?
Use defer for scripts that interact with the page DOM (chat widgets, review widgets, app functionality) - they execute after the HTML is fully parsed, in order. Use async for fully independent scripts (analytics, tracking) - they download in parallel and execute as soon as ready, in no guaranteed order.
Q: Will adding defer break my Shopify apps?
Some apps rely on being initialized during page parsing. Test each change individually in a duplicate theme. Chat widgets and analytics scripts are generally safe to defer. Apps using document.write() cannot be safely deferred - contact the developer for a modern async alternative.
Q: I can't edit the script - it's injected by the app via ScriptTag API. What do I do?
You cannot control ScriptTag-injected scripts directly. Your options are: (1) contact the app developer and request async/defer in their ScriptTag implementation, (2) switch to an alternative app that uses App Blocks instead, or (3) uninstall the app if the performance cost outweighs the benefit.
Q: Which Shopify apps are the biggest render-blocking offenders?
Commonly identified render-blocking apps include: Yotpo reviews widget (standard install), Gorgias chat (pre-2023 installs), Lucky Orange session recording, Hotjar (without GTM), and non-GTM Facebook/TikTok Pixel implementations. Check each app's recent documentation - many have added async support.
Q: My PageSpeed score went up but my actual page still feels slow - why?
PageSpeed measures lab conditions. Real-user performance (measured by Chrome User Experience Report / CrUX) reflects actual visitor conditions including their devices, connections, and geographic location. Both matter - fix render-blocking for lab scores, but also look at CLS, INP, and real-user LCP data in Google Search Console.
Check Your Store for This Issue
SEOScan automatically detects render-blocking scripts on shopify: detection and fixes and 5 related issues - with specific fixes for your store.
Run Free Scan