From shopify-commerce
Optimizes Shopify store speed with Liquid rendering tips, CSS/JS deferral, image/CDN optimization, Core Web Vitals, and Hydrogen caching strategies.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin shopify-commerceThis skill is limited to using the following tools:
**Fetch live docs**:
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
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.