Speed up the largest product image
Product pages load faster, so more visitors stay and buy.
The number it moves
Main image load time · Typical: 2.5 seconds or less is good, at the 75th percentile of visits
Seconds until the biggest thing on a product page (usually the hero image) appears, measured as Largest Contentful Paint.
What your AI does
Find the product and collection page templates and the hero image tags. Check for missing width/height, no lazy loading below the fold, an eager first image without fetchpriority, and oversized uncompressed files. Propose responsive srcset, modern formats, fetchpriority=high on the first image, and lazy loading everywhere else.
Done when
- The first product image loads with high priority
- Images below the fold load lazily
- Images have a set size and come in modern, right-sized files
The prompt
Paste this into any AI coding tool, or run it in MightyMouse and your AI works on your own project.
Speed up the largest product image (Online store) Find the product and collection page templates and the hero image tags. Check for missing width/height, no lazy loading below the fold, an eager first image without fetchpriority, and oversized uncompressed files. Propose responsive srcset, modern formats, fetchpriority=high on the first image, and lazy loading everywhere else. Done when: - The first product image loads with high priority - Images below the fold load lazily - Images have a set size and come in modern, right-sized files Read the code first. If it already does this well, change nothing and say so. Otherwise make the smallest change that makes every line above true. Work with what this project already uses. Do not add a paid tool or service unless I ask for one. Playbook: https://getmightymouse.com/playbooks/store-speed-up-the-largest-product-image/ - published by MightyMouse. Source: web.dev (Google), https://web.dev/articles/vitals
The skill file
Save this as SKILL.md and Claude Code or Cursor can run the playbook any time you ask.
--- name: store-speed-up-the-largest-product-image description: Product pages load faster, so more visitors stay and buy. Use on a online store project to improve "Main image load time". --- # Speed up the largest product image Find the product and collection page templates and the hero image tags. Check for missing width/height, no lazy loading below the fold, an eager first image without fetchpriority, and oversized uncompressed files. Propose responsive srcset, modern formats, fetchpriority=high on the first image, and lazy loading everywhere else. ## Done when - [ ] The first product image loads with high priority - [ ] Images below the fold load lazily - [ ] Images have a set size and come in modern, right-sized files ## How to run it Read the code first and tick every line that is already true. If all are true, change nothing and say so. Otherwise make the smallest change that makes the rest true, then report each line as done or not done. Work with what this project already uses. Do not add a paid tool or service unless I ask for one. Playbook: https://getmightymouse.com/playbooks/store-speed-up-the-largest-product-image/ - published by MightyMouse. Source: web.dev (Google), https://web.dev/articles/vitals