Shopify Essentials: Shopify Theme Performance Optimisation

10 minute read Shopify Essentials · Part 4

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.

Performance Is a Conversion Lever

Theme performance affects:

  • SEO crawl efficiency
  • Mobile bounce rates
  • Perceived brand quality

Shopify removes infrastructure concerns, but theme performance is entirely your responsibility.

Design Rationale and Trade-offs

Critical CSS helps, but increases complexity

Inlining CSS improves first paint but complicates builds. Automate it where possible.

JavaScript should earn its place

Every script must justify its existence, especially on product pages.

Vite improves developer speed, not just site speed

Faster local iteration usually results in cleaner output.

Fact Checks and Clarifications

  • Shopify already handles Brotli and Gzip.
  • Excess DOM nodes affect mobile CPUs more than desktop.
  • App embeds often outweigh theme code in performance cost.

Key Takeaways

  • Optimise the critical path first.
  • Measure before and after every change.
  • Performance debt compounds quietly.

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)

Need Shopify help? I work with retailers and agencies across Liverpool and Merseyside. Learn more about my Shopify services or get in touch.