Agent skill · design visual · jeremylongshore
shopify-theme-performance
Optimize Shopify theme performance for Core Web Vitals (LCP, CLS, INP).
Why this skill is useful
Provides specific optimization techniques for Shopify themes that enhance Core Web Vitals, which the AI wouldn't reliably generate on its own.
What it needs
Requires bash installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Shopify Theme Performance Overview 59% of Shopify stores lazy-load their LCP image, adding 3-5 seconds to perceived load time. This skill covers the highest-impact theme optimizations: fixing LCP image loading, switching to the modern imageurl filter, profiling Liquid render times, and optimizing font delivery. Prerequisites Access to the Shopify theme editor or theme files via CLI (shopify theme dev) Theme using Online Store 2.0 architecture (sections + JSON templates) Google Chrome DevTools or Lighthouse for measurement Instructions Step 1: Fix LCP Image Loading The LCP element is usually the hero banner image. Find it in your theme's hero section: Add a preload hint in theme.liquid inside <head>: Step 2: Use the imageurl Filter The modern imageurl filter replaces the deprecated imgurl. It supports responsive images via srcset: Always set explicit width and height attributes to prevent CLS (Cumulative Layout Shift). Step 3: Liquid Profiler Append ?profile=true to any storefront URL to activate the Liquid profiler. It renders a table at the bottom of the page showing render times per snippet. See references/liquid-profiling.md for how to read the output and common slow patterns. Step 4: Font Loading Preload critical fonts and use font-display: swap to prevent invisible text: Limit to 2-3 font files maximum. Each additional font file blocks rendering. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/shopify-theme-performance