Shopify Essentials: Shopify Theme Performance Optimisation

A developer's guide to boosting Shopify theme speed through smart asset loading, async techniques, lazy rendering, and custom build workflows.

If you’re building or maintaining custom Shopify themes, performance should be baked in from the start. Speed affects conversion, SEO, and perceived quality.

This post focuses on frontend-first theme speed optimisation for developers.

1. Audit the Baseline

Start with:

Shopify’s Theme Inspector for Chrome
PageSpeed Insights (mobile & desktop)
WebPageTest.org for TTFB and waterfall breakdowns

2. Inline Critical CSS

Extract above-the-fold styles and inline them into theme.liquid. Tools like PurgeCSS or Vite + Tailwind JIT can help automate.

{%- comment -%} Inline critical CSS directly {%- endcomment -%}
<style>
  {% render 'critical-styles' %}
</style>

{%- comment -%} Load main stylesheet normally {%- endcomment -%}
{{ 'theme.css' | asset_url | stylesheet_tag }}

Use async loading for non-critical CSS:

<link rel="stylesheet" href="{{ 'deferred.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="{{ 'deferred.css' | asset_url }}"></noscript>

3. Lazy Load Everything Visual

Use loading="lazy" on all img, iframe, and embedded media:

<img src="{{ image | image_url }}" loading="lazy">

For JS components, defer render until visible or interacted with using IntersectionObserver.

4. Minify and Compress

Use Shopify’s built-in minifier plus:

Compress images with Shopify admin or automation (TinyPNG, Avada, etc)
Minify custom scripts manually or via CI/CD
Gzip and Brotli at server/CDN level (Shopify does this automatically)

5. Avoid Theme.js Bloat

Don’t stuff everything into theme.js.

Break into modules

Only import what's needed

Use defer or type="module"

<script type="module" src="/assets/product-gallery.js" defer></script>

6. Use Vite for Local Dev

Move away from traditional Webpack setups.

Instant HMR
ES module native output
Better Tree Shaking
Simpler configuration

Use vite-plugin-liquid to tie it into your dev workflow.

7. Optimise for App Embeds

Shopify app blocks and embeds can slow your theme.

Load only on relevant pages

Defer or conditionally render

Replace with native logic if performance critical

Real-World Results

In a recent performance-focused Shopify theme build:

CLS improved 89%
TTFB reduced by 300ms
Google Lighthouse scores consistently 95+

Final Tips

Clean up old snippets and unused assets
Minimise DOM nodes, especially within for loops
Use schema settings to control render logic
Monitor TTFB on key templates (collection, product, cart)