neuro-shopify-speed

Optimizes Shopify theme performance through Core Web Vitals, image, JavaScript, CSS, and Liquid tuning.

Updated Apr 18, 2026
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill neuro-shopify-speed-webdevarif
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: neuro-shopify-speed
Source: https://github.com/webdevarif/claude-skills/tree/main/neuro-shopify-speed
Command: npx skills add https://github.com/webdevarif/claude-skills --skill neuro-shopify-speed-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow Shopify stores lose conversions — every 100ms of delay costs roughly 7% in conversions. This Skill diagnoses and fixes performance bottlenecks in Shopify themes, covering Core Web Vitals (LCP, CLS, INP), Lighthouse scoring, and render-blocking resources. ## Core Features & Use Cases - Speed Auditing: Step-by-step audit process using PageSpeed Insights, Chrome DevTools, WebPageTest, and Shopify Theme Inspector with a priority matrix for fixes. - Image Optimization: Correct usage of image_url and image_tag filters, responsive srcset/sizes patterns, lazy loading, fetchpriority, and LQIP placeholders. - JavaScript & CSS Optimization: Defer/async patterns, jQuery removal, Intersection Observer lazy initialization, critical CSS inlining, and unused CSS removal. - Font & Liquid Performance: font-display swap, font preloading, variable fonts, and Liquid render optimization for faster TTFB. - Use Case: A store owner with a Lighthouse mobile score of 45 uses this Skill to identify an oversized hero image, render-blocking app scripts, and missing image dimensions, then applies the provided Liquid and JavaScript fixes to reach a passing score. ## Quick Start Audit my Shopify theme's homepage and product page for Core Web Vitals issues and fix the biggest performance bottlenecks.

Frequently Asked Questions about neuro-shopify-speed

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve my Shopify store's Lighthouse performance score?

Run PageSpeed Insights on your homepage, top product, and top collection pages on mobile, then fix issues by priority: oversized hero images, render-blocking JavaScript and CSS, and unused app scripts. TBT carries 30% of the Lighthouse score, so JavaScript reduction has the highest impact.

How do I optimize hero images for LCP on Shopify?

Use the image_url and image_tag filters with loading: 'eager', fetchpriority: 'high', responsive widths, and sizes: '100vw'. Preload the hero image in theme.liquid and never use CSS background images for LCP elements, since the browser preload scanner cannot discover them.

What Lighthouse score does the Shopify Theme Store require?

Shopify requires a minimum average mobile Lighthouse performance score of 60, weighted as product page 31, collection page 33, and homepage 13 divided by 77. Collection pages carry the most weight at 42.8%.

Does Shopify automatically convert images to WebP or AVIF?

Yes, Shopify's CDN automatically serves WebP or AVIF to browsers that support them via the Accept header when you use image_url and image_tag filters. Never manually append .webp to image URLs.

Why is my Shopify store failing INP and how do I fix it?

INP failures come from heavy main-thread JavaScript, expensive app event handlers, and synchronous DOM updates. Fix by deferring non-critical work with requestIdleCallback, debouncing filter handlers, and breaking long tasks with yield-to-main patterns.

Can I improve TTFB on Shopify if I cannot change the server?

You cannot change Shopify's infrastructure, but you can reduce Liquid render complexity, limit loops and metafield calls in templates, avoid redirect chains, and add preconnect hints for critical third-party origins like cdn.shopify.com.