New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Shopify Theme Performance

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

Optimize Shopify theme performance for Core Web Vitals (LCP, CLS, INP).

MITAuto-check passedFrontend & Design

Install Shopify Theme Performance

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-theme-performance -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace shopify-theme-performance --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.curated/shopify-theme-performance .claude/skills/shopify-theme-performance && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
shopify-theme-performance
GitHub stars
2.8k
Token cost
~1.4k tokens
SKILL.md length
438 words
Files
4 (incl. references)
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

Optimize Shopify theme performance for Core Web Vitals (LCP, CLS, INP).

  • Works in 4 steps: Fix LCP Image Loading → Use the image_url Filter → Liquid Profiler → …
  • Diagnosing slow page loads
  • SKILL.md covers Overview, Prerequisites, Instructions and Output, plus 3 more sections
  • Calls shopify

What it does

Shopify Theme Performance is an agent skill from jeremylongshore/tons-of-skills-marketplace. Optimize Shopify theme performance for Core Web Vitals (LCP, CLS, INP). Use when diagnosing slow page loads, fixing lazy-loaded hero images, profiling Liquid render times, or optimizing image delivery. Trigger with phrases like "shopify theme performance", "shopify core web vitals", "shopify lcp", "shopify liquid profiler", "shopify image optimization".

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/core-web-vitals.md`, `references/image-optimization.md` and `references/liquid-profiling.md`). Compatibility notes: Designed for Claude Code

It sits in Frontend & Design, covering Web performance and Performance optimization. It works with Shopify. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Diagnosing slow page loads
  • Fixing lazy-loaded hero images
  • Profiling Liquid render times
  • Optimizing image delivery

Example prompts

  • “shopify theme performance”
  • “shopify core web vitals”
  • “shopify lcp”
  • “/shopify-theme-performance”

Requirements

  • Compatibility (from SKILL.md): Designed for Claude Code
  • Pre-approved tools (allowed-tools): Read, Write, Edit, Bash(npm:*), Grep

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Fix LCP Image Loading
  2. Use the image_url Filter
  3. Liquid Profiler
  4. Font Loading

What it can do on your machine

Read from SKILL.md and the folder at commit 80f86df. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Bash(npm:*)
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • shopify

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • shopify.dev
    • developer.mozilla.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code

    From compatibility in the SKILL.md frontmatter.

Context cost

Shopify Theme Performance loads about 1.4k tokens when it runs, and up to ~4.1k if it reads all its reference files. Until then it costs about 95 tokens; SKILL.md has 438 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~95
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~4.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jeremylongshore/tons-of-skills-marketplace at commit 80f86df, republished under its MIT licence (© jeremylongshore). 438 words, ~1,447 tokens.

Download SKILL.mdSave it as .claude/skills/shopify-theme-performance/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
shopify-theme-performance
description
Optimize Shopify theme performance for Core Web Vitals (LCP, CLS, INP). Use when diagnosing slow page loads, fixing lazy-loaded hero images, profiling Liquid render times, or optimizing image delivery. Trigger with phrases like "shopify theme performance", "shopify core web vitals", "shopify lcp", "shopify liquid profiler", "shopify image optimization".
allowed-tools
Read, Write, Edit, Bash(npm:*), Grep
compatibility
Designed for Claude Code
version
2.7.0
license
MIT
author
Jeremy Longshore <jeremy@intentsolutions.io>
tags
saas, ecommerce, shopify

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 image_url 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:

liquid
{% comment %} BAD: lazy-loading the LCP image costs 3-5s {% endcomment %}
{{ section.settings.hero_image | image_url: width: 1200 | image_tag: loading: 'lazy' }}

{% comment %} GOOD: eager load + fetchpriority for LCP {% endcomment %}
{{ section.settings.hero_image | image_url: width: 1200 | image_tag:
    loading: 'eager',
    fetchpriority: 'high',
    sizes: '100vw' }}

Add a preload hint in theme.liquid inside <head>:

liquid
{%- if template.name == 'index' -%}
  <link rel="preload"
        href="{{ section.settings.hero_image | image_url: width: 1200 }}"
        as="image"
        fetchpriority="high">
{%- endif -%}
Step 2: Use the image_url Filter

The modern image_url filter replaces the deprecated img_url. It supports responsive images via srcset:

liquid
{% assign image = product.featured_image %}

<img src="{{ image | image_url: width: 800 }}"
     srcset="{{ image | image_url: width: 400 }} 400w,
             {{ image | image_url: width: 600 }} 600w,
             {{ image | image_url: width: 800 }} 800w,
             {{ image | image_url: width: 1200 }} 1200w"
     sizes="(max-width: 749px) 100vw, 50vw"
     width="{{ image.width }}"
     height="{{ image.height }}"
     loading="lazy"
     alt="{{ image.alt | escape }}">

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:

liquid
{% comment %} In theme.liquid <head> {% endcomment %}
<link rel="preload"
      href="{{ 'your-font.woff2' | asset_url }}"
      as="font"
      type="font/woff2"
      crossorigin>

<style>
  @font-face {
    font-family: 'YourFont';
    src: url('{{ "your-font.woff2" | asset_url }}') format('woff2');
    font-display: swap;
    font-weight: 400;
  }
</style>

Limit to 2-3 font files maximum. Each additional font file blocks rendering.

Output

  • LCP image loading eagerly with fetchpriority="high" and preload hint
  • Responsive images using image_url with proper srcset and sizes
  • Liquid profiler data identifying slow snippets
  • Fonts preloaded with font-display: swap
Show full SKILL.md (200 more words)Show less

Error Handling

MistakeImpactFix
Lazy-loading LCP image+3-5s LCPloading="eager" + fetchpriority="high"
Using img_url filterNo responsive images, larger payloadsSwitch to image_url with width param
Render-blocking CSSDelayed FCPInline critical CSS, defer non-critical
Too many Liquid include tagsSlow server render (variable scope leak)Use render instead of include
Missing width/height on imagesCLS jumps during loadSet explicit dimensions from image.width/image.height
Too many font filesRender blockingLimit to 2-3 woff2 files, preload critical ones

Examples

Fixing a Lazy-Loaded Hero Image

The homepage LCP score is 5+ seconds because the hero banner uses loading="lazy". Switch to eager loading with fetchpriority and add a preload hint.

See Core Web Vitals for targets and measurement techniques.

Migrating from img_url to image_url

Replace deprecated img_url filters with the modern image_url filter to enable responsive srcset images and reduce payload sizes.

See Image Optimization for the complete migration patterns.

Profiling Slow Liquid Renders

A collection page takes 800ms to render server-side. Use the Liquid profiler to identify which snippets are slow and apply fixes.

See Liquid Profiling for profiler usage and common slow patterns.

Resources

© jeremylongshore, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/.curated/shopify-theme-performance of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • references/core-web-vitals.md
  • references/image-optimization.md
  • references/liquid-profiling.md

Open the folder on GitHubat commit 80f86df

Compare with similar skills

Shopify Theme Performance next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Shopify Theme Performance compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Shopify Theme Performance this skilljeremylongshore/tons-of-skills-marketplace2.8k—~1.4kAutomated safety check: PassMIT
Performancemidudev/100cosas.dev1146 repos~2.3kAutomated safety check: PassMIT
Web Performancemozilla/firefox-devtools-mcp474—~1.2kAutomated safety check: PassCustom licence
Performance ProfilingxenitV1/Antigravity-Workflows1308 repos~772Automated safety check: NotesMIT
Optimizing PerformanceCloudAI-X/claude-workflow-v21.4k1 repos~1.5kAutomated safety check: PassMIT
Performance Optimizationsanity-io/sanity6.4k7 repos~3.1kAutomated safety check: PassMIT

Similar skills

  • Performance

    midudev/100cosas.dev

    Optimize web performance for faster loading and better user experience.

    114 GitHub starsUsed in 6 repos~2.3k tokens
    Frontend & DesignAuto-check passed

  • Web Performance

    mozilla/firefox-devtools-mcp

    Find and fix why a website is slow by capturing and analyzing a Firefox performance profile, or by analyzing a profile the user already has (a saved file or a profiler.firefox.com share link).

    474 GitHub stars~1.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Performance Profiling

    xenitV1/Antigravity-Workflows

    Performance profiling principles. An agent skill from xenitV1/Antigravity-Workflows.

    130 GitHub starsUsed in 8 repos~772 tokens
    Frontend & DesignAuto-check: notes

  • Optimizing Performance

    CloudAI-X/claude-workflow-v2

    Analyzes and optimizes application performance across frontend, backend, and database layers.

    1.4k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • Performance Optimization

    sanity-io/sanity

    Official

    Optimizes application performance. An agent skill from sanity-io/sanity.

    6.4k GitHub starsUsed in 7 repos~3.1k tokens
    Frontend & DesignAuto-check passed

  • Optimize Load

    textura-agency/next16-claude-starter

    Get a page into Lighthouse's green zone on desktop and mobile, for people AND for the robot form crawlers get — build it, audit all four categories (Performance, Accessibility, Best Practices, SEO)…

    133 GitHub stars~4.6k tokensUpdated 3 days ago
    Frontend & DesignAuto-check: notes

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo

  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes

  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated yesterday
    Auto-check passed

  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Shopify Theme Performance

What does Shopify Theme Performance do?

Optimize Shopify theme performance for Core Web Vitals (LCP, CLS, INP). Shopify Theme Performance is an agent skill from jeremylongshore/tons-of-skills-marketplace. Optimize Shopify theme performance for Core Web Vitals (LCP, CLS, INP).

When should I use Shopify Theme Performance?

Shopify Theme Performance fits situations like: diagnosing slow page loads; fixing lazy-loaded hero images; profiling Liquid render times; optimizing image delivery.

How do I install Shopify Theme Performance in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-theme-performance -a claude-code`. Or copy the skill folder (skills/.curated/shopify-theme-performance in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/shopify-theme-performance in your project. Claude Code loads it when a task matches its description.

How do I install Shopify Theme Performance in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-theme-performance -a codex`. Or copy the skill folder (skills/.curated/shopify-theme-performance in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/shopify-theme-performance in your project. Codex loads it when a task matches its description.

Can I use Shopify Theme Performance in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill shopify-theme-performance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/shopify-theme-performance, .gemini/skills/shopify-theme-performance, .github/skills/shopify-theme-performance and .opencode/skills/shopify-theme-performance in your project.

What does Shopify Theme Performance need to run?

Going by SKILL.md and its folder, Shopify Theme Performance needs the command-line tools its instructions call (shopify). Its frontmatter pre-approves these tools: Read, Write, Edit, Bash(npm:*), Grep. Compatibility (from SKILL.md): Designed for Claude Code.

Does Shopify Theme Performance access the network?

SKILL.md names 2 domains. As links in the text: shopify.dev and developer.mozilla.org. This is read from the text; nothing was executed.

Is Shopify Theme Performance safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Shopify Theme Performance use?

Shopify Theme Performance is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Shopify Theme Performance use?

About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.7k tokens, read only when the agent opens those files.

What are the alternatives to Shopify Theme Performance?

Skills that share tags, products or a category with Shopify Theme Performance: Performance (midudev/100cosas.dev, 114 stars), Web Performance (mozilla/firefox-devtools-mcp, 474 stars), Performance Profiling (xenitV1/Antigravity-Workflows, 130 stars) and Optimizing Performance (CloudAI-X/claude-workflow-v2, 1.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Shopify Theme Performance?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,825 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 9, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.