--- name: shopify-performance description: Optimize Shopify performance — Liquid rendering, asset optimization, CDN strategies, Core Web Vitals, Hydrogen caching, image optimization, preloading, and lazy loading. Use when improving Shopify store speed. allowed-tools: Read, Write, Edit, Bash, Grep, Glob, WebSearch, WebFetch --- # Shopify Performance Optimization ## Before writing code **Fetch live docs**: 1. Web-search `site:shopify.dev theme performance` for theme optimization 2. Web-search `site:shopify.dev hydrogen caching` for Hydrogen caching strategies 3. Web-search `site:web.dev core web vitals` for current CWV guidelines and thresholds 4. Web-search `site:shopify.dev image optimization cdn` for image URL transforms 5. Web-search `site:shopify.dev theme speed report` for Shopify's built-in speed metrics ## Liquid Rendering Performance ### Template Optimization - Minimize Liquid logic — complex loops and conditionals slow server-side rendering - Use `{% render %}` (not `{% include %}`) — isolated scope prevents variable conflicts - Avoid nested loops — `O(n²)` in Liquid is expensive - Limit `forloop` iterations with `limit:` parameter - Pre-compute values with `{% assign %}` instead of repeating expressions ### Object Access - Access specific properties: `{{ product.title }}` not `{{ product | json }}` - Avoid `all_products[handle]` in loops — each is a separate data lookup - Use section settings to pass data instead of global lookups - Minimize use of `{{ content_for_header }}` scripts (managed by Shopify — cannot remove, but minimize additional scripts) ### Liquid Anti-Patterns | Anti-Pattern | Why It's Slow | Better Approach | |-------------|--------------|-----------------| | Nested `for` loops | O(n²) rendering | Flatten data, use single loop | | `all_products[handle]` in loop | Data fetch per iteration | Pass products via section settings | | `{% include %}` with variables | Shared scope causes conflicts | Use `{% render %}` (isolated) | | Complex `{% if %}` chains | Evaluated every render | Simplify conditions, use `{% case %}` | | Unused sections in templates | Rendered even if hidden | Remove from JSON template | ## Asset Optimization ### CSS - Minimize CSS — remove unused styles - Use `{{ 'style.css' | asset_url | stylesheet_tag }}` for proper caching - Critical CSS: inline above-the-fold styles in `` - Defer non-critical CSS: `media="print" onload="this.media='all'"` ### JavaScript - Defer non-critical JS: `