Key takeaways
- Render-blocking scripts delay the browser from displaying your page — every millisecond costs conversions.
- Fix: add
deferorasyncto non-critical<script>tags in theme.liquid.- Shopify’s
{% javascript %}tag in sections bundles and defers scripts automatically.- PageSpeed Insights and Shopify Theme Inspector both identify render-blocking resources.
When a browser encounters a <script> tag in your HTML, it stops, downloads the script, executes it, then continues building the page. If that script is in your <head>, your entire page is frozen while the script downloads. On a slow mobile connection, this pause is visible — a white screen where your store should be.
This is called “parser blocking” or “render blocking,” and it’s one of the most impactful performance problems to fix in Shopify.
What causes render-blocking scripts in Shopify
Script tags in <head> without async or defer. The most common cause. Scripts added by apps or customizations often include a plain <script src="..."> without either attribute.
Large theme JavaScript files loaded synchronously. Some older themes load all their JavaScript in <head> blocking paint.
Third-party analytics and marketing scripts. Google Tag Manager, Facebook Pixel, and similar scripts are frequently placed in <head> because their documentation says to — but they should still use async.
The difference between async and defer
Both prevent render blocking, but they behave differently:
async: The script downloads in parallel while the HTML parses. It executes as soon as it finishes downloading — potentially interrupting HTML parsing. Use for independent scripts that don’t depend on the DOM being ready (analytics, pixels).
defer: The script downloads in parallel while the HTML parses. It executes after the HTML is fully parsed, in document order. Use for scripts that interact with the DOM (theme features, product functionality).
No attribute (default): The script blocks HTML parsing entirely while it downloads and executes. Avoid this for any non-critical script in <head>.
How to add defer or async to scripts in Shopify
Step 1 - Duplicate your theme.
Step 2 - Open theme.liquid in the code editor.
Step 3 - Find <script> tags in the <head> section. They look like:
<script src="https://example.com/script.js"></script>Step 4 - Add the appropriate attribute:
<!-- For analytics/pixel scripts: -->
<script src="https://analytics.example.com/script.js" async></script>
<!-- For theme functionality scripts: -->
<script src="{{ 'theme.js' | asset_url }}" defer></script>Important: Don’t blindly add async to all scripts. If Script B depends on Script A, making Script A async can cause Script B to fail if Script B loads first.
Using Shopify’s {% javascript %} blocks in sections
The cleanest solution for theme functionality: put JavaScript inside section files using {% javascript %} tags rather than in global theme.liquid scripts.
{% javascript %}
// This JavaScript is:
// 1. Automatically bundled with other section JS
// 2. Deferred automatically by Shopify
// 3. Only loaded when the section is used
document.querySelector('.my-section').addEventListener('click', function() {
// section-specific behavior
});
{% endjavascript %}Shopify compiles all section {% javascript %} blocks into a single optimized bundle (shopify-section-*.js) that loads deferred. This is the architecture Shopify recommends for theme development.
Fixing GTM render-blocking
Google Tag Manager’s install snippet places a <script> tag in <head>. The standard install looks like:
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXX');</script>This is already an inline script (no src) so async/defer don’t apply in the same way. The GTM snippet is designed to be small and fast — the real performance issue is the tags inside your GTM container.
In GTM, set all tags to fire on “Window Loaded” or “DOM Ready” rather than “Page View” unless they genuinely need to fire before the page renders. This moves tag execution to after the page is visible.
Identifying render-blocking scripts
PageSpeed Insights: Run your store URL at pagespeed.web.dev. Under “Opportunities,” look for “Eliminate render-blocking resources.” It lists the specific scripts and stylesheets causing the issue.
Chrome DevTools — Performance tab: Record a page load. In the flame chart, look for Parse HTML events being interrupted by Evaluate Script events at the start of the timeline.
Shopify Theme Inspector: Shows which Liquid templates are slowest to render. For script-related blocking, use PageSpeed Insights instead.
What about render-blocking CSS?
CSS is inherently render-blocking — the browser needs CSS before it can paint anything. But you can minimize the impact:
Critical CSS inline: Move the CSS needed to render above-the-fold content inline into <head>. Load the rest of your CSS asynchronously using <link rel="preload"> with onload.
Remove unused CSS: Fewer CSS rules = faster parse time.
Avoid CSS @import in stylesheets: These create cascading blocking requests.
For most Shopify stores, the gains from CSS optimization are smaller than fixing JavaScript blocking. Focus on JavaScript first.
