From shopify-commerce
Optimizes Shopify store speed with Liquid rendering tips, CSS/JS deferral, image/CDN optimization, Core Web Vitals, and Hydrogen caching strategies.
How this skill is triggered — by the user, by Claude, or both
Slash command
/shopify-commerce:shopify-performanceThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Fetch live docs**:
Fetch live docs:
site:shopify.dev theme performance for theme optimizationsite:shopify.dev hydrogen caching for Hydrogen caching strategiessite:web.dev core web vitals for current CWV guidelines and thresholdssite:shopify.dev image optimization cdn for image URL transformssite:shopify.dev theme speed report for Shopify's built-in speed metrics{% render %} (not {% include %}) — isolated scope prevents variable conflictsO(n²) in Liquid is expensiveforloop iterations with limit: parameter{% assign %} instead of repeating expressions{{ product.title }} not {{ product | json }}all_products[handle] in loops — each is a separate data lookup{{ content_for_header }} scripts (managed by Shopify — cannot remove, but minimize additional scripts)| 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 |
{{ 'style.css' | asset_url | stylesheet_tag }} for proper caching<head>media="print" onload="this.media='all'"<script defer> or dynamic import()async attribute)<head>Shopify CDN image optimization:
# Responsive images with srcset
{{ image | image_url: width: 800 }}
{{ image | image_url: width: 400 }}
# Srcset pattern
<img
srcset="{{ image | image_url: width: 400 }} 400w,
{{ image | image_url: width: 800 }} 800w,
{{ image | image_url: width: 1200 }} 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
src="{{ image | image_url: width: 800 }}"
alt="{{ image.alt }}"
loading="lazy"
width="{{ image.width }}"
height="{{ image.height }}"
>
Key image practices:
loading="lazy" for below-the-fold imagesfetchpriority="high" for LCP imagewidth and height to prevent layout shift?width=, ?height=, ?crop=, ?format=Fetch live docs: Web-search
site:shopify.dev image_url filter parametersfor current CDN transform options — new parameters are added over time.
Target: < 2.5 seconds
<link rel="preload" as="image" href="{{ image | image_url: width: 1200 }}">fetchpriority="high" on LCP imageTarget: < 0.1
width and height on all images and mediaaspect-ratio CSS property for responsive media containersTarget: < 200ms
requestIdleCallback or setTimeout(fn, 0)Fetch live docs: CWV thresholds and measurement methodology evolve. Web-search
site:web.dev core web vitals thresholdsfor current targets.
// Pattern: apply cache strategy to storefront query
const data = await storefront.query(QUERY, {
cache: CacheLong(), // products, collections
});
const cart = await storefront.query(CART_QUERY, {
cache: CacheShort(), // dynamic data
});
| Strategy | Use For |
|---|---|
CacheLong() | Products, collections, pages |
CacheShort() | Cart, personalized content |
CacheNone() | Customer-specific data |
CacheCustom({...}) | Fine-tuned scenarios |
Fetch live docs for exact TTL values — Hydrogen caching defaults may change across versions.
defer() in loaders for non-critical data<Suspense> + <Await><Link prefetch="intent">Shopify's global CDN:
| Tool | What It Measures |
|---|---|
| Shopify Theme Speed Report | Overall theme score in admin |
| Google Lighthouse | CWV + performance audit |
| WebPageTest | Real-world loading waterfall |
| Chrome DevTools Performance | JS profiling, layout shifts |
| Search Console CWV Report | Field data from real users |
font-display: swap for custom fontsFetch the Shopify performance documentation, Core Web Vitals guides, and Hydrogen caching docs for exact optimization techniques and current best practices before implementing.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin shopify-commerceReferences Shopify development: Liquid templating, OS 2.0 themes/sections/blocks, GraphQL Admin/Storefront APIs, CLI/Polaris apps, Functions, Hydrogen React storefronts, Ajax cart, webhooks, performance, debugging. API v2026-01.
Optimizes BigCommerce storefront performance: CDN, image optimization, lazy loading, Stencil theme tuning, API caching, GraphQL efficiency, Core Web Vitals. For store speed improvements.
Builds and debugs Shopify themes with Liquid, develops custom apps, and implements headless storefronts via Storefront API. Invoke for Shopify theme, app, or checkout customization.