How to Speed Up a Shopify Liquid Theme: Core Web Vitals Playbook

Speed work in Shopify is often framed as “run Lighthouse and fix what’s red.” That helps, but it misses the point.

The right approach is a repeatable playbook that improves real customer experience and protects revenue over time.

Start with the metrics that matter

Focus on Core Web Vitals first:

1. LCP: how fast primary content appears.
2. INP: how responsive interactions feel.
3. CLS: how stable layout remains while loading.

These map directly to product-page UX and checkout intent.

Step 1: Baseline before touching code

Capture a baseline for:

1. Homepage.
2. Top collection page.
3. Top product page.
4. Cart page.

Record current LCP, INP, CLS and total JS payload. Save this snapshot so you can prove improvement.

Step 2: Fix image delivery in Liquid

Large unoptimized images are usually the first bottleneck.

Use Shopify image helpers with responsive widths and explicit loading strategy:

{{
  section.settings.hero_image
  | image_url: width: 1920
  | image_tag:
    widths: '640, 960, 1280, 1600, 1920',
    sizes: '100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.hero_alt
}}Code language: Django (django)

For below-the-fold media, switch to loading: 'lazy'.

Step 3: Split scripts by template

Do not load every script everywhere.

<script src="{{ 'theme.js' | asset_url }}" defer></script>

{% if request.page_type == 'product' %}
  <script src="{{ 'product-page.js' | asset_url }}" defer></script>
{% endif %}

{% if request.page_type == 'collection' %}
  <script src="{{ 'collection-filters.js' | asset_url }}" defer></script>
{% endif %}Code language: Django (django)

Template-based loading reduces JS parse/execute cost and improves responsiveness.

Step 4: Audit third-party apps and trackers

Many Shopify speed problems come from third-party injections, not core theme code.

For each external script, ask:

1. Does it still serve a business goal?
2. Can it be delayed until interaction?
3. Can it load only on specific templates?
4. Is there overlap with another tool?

Removing one unnecessary app script can outperform a week of micro-optimizations.

Step 5: Stabilize layout to reduce CLS

CLS often comes from missing dimensions and dynamic UI shifts.

Fixes include:

1. Set explicit width/height for images/media.
2. Reserve space for announcement bars and async widgets.
3. Avoid injecting banners above existing content after paint.

Step 6: Optimize font loading

Fonts can delay text rendering and inflate LCP.

Use:

1. Fewer font families/weights.
2. font-display: swap.
3. Preload only critical font files used above the fold.

Step 7: Build a post-launch monitoring rhythm

Performance is not a one-time sprint. It regresses quietly as apps and campaigns change.

Create a monthly check that tracks:

1. Vitals trend by page type.
2. JS size trend.
3. New third-party scripts.
4. Largest content element changes.

Quick wins checklist

1. Convert oversized PNG/JPEG assets where possible.
2. Defer non-critical scripts.
3. Load page-specific JS only where needed.
4. Remove dead apps and duplicate trackers.
5. Add dimensions to all key images and embeds.

Conclusion

A fast Shopify theme is not about hacks. It is about disciplined defaults in Liquid, intentional script loading, and controlling third-party code.

Stores that do this consistently get faster pages, cleaner UX, and better conversion resilience as they scale.