Theme Performance

Core Web Vitals for Shopify Themes

Theme performance directly affects conversion rate and SEO. Google measures LCP (largest contentful paint), INP (interaction to next paint), and CLS (cumulative layout shift). Liquid choices impact all three.

Image Optimization

{%- liquid
  assign card_width = 400
  assign image_height = card_width | divided_by: product.featured_image.aspect_ratio | round
-%}

{{ product.featured_image
  | image_url: width: card_width
  | image_tag:
    loading: 'lazy',
    width: card_width,
    height: image_height,
    alt: product.title,
    sizes: '(max-width: 749px) 50vw, 25vw',
    widths: '200, 400, 600, 800'
}}

Liquid Performance Rules

• Never loop collection.products without limit or paginate on homepage sections
• Avoid nested loops: products × variants × images — O(n³) render cost
• Use {%- liquid -%} blocks to reduce whitespace bytes in HTML output
• Defer all non-critical JS: script_tag: defer or type="module"
• Preload only the LCP hero image — lazy-load everything else
• Minimize | json payload size — pass variants array, not full product graph

{%- liquid
  assign featured = section.settings.collection.products | first
  if featured
    echo featured.featured_image | image_url: width: 1200 | image_tag: preload: true, loading: 'eager'
  endif
-%}