A Shopify Performance Checklist Built Around Real User Experience

A useful performance review connects three layers: what real customers experience, which page or interaction is affected, and which theme, app, asset, or third-party feature caused the cost. Use lab tools to diagnose—not to replace field evidence.

1. Establish the baseline

• Review Shopify’s Web Performance reports for LCP, INP, and CLS by device, time, page type, and URL.
• Record the 75th-percentile results and note the reporting period.
• Run PageSpeed Insights on representative home, collection, product, content, and cart URLs.
• Capture recent theme releases, app installs, marketing tags, and merchandising changes.
• Choose a repeatable test device, connection profile, location, and signed-out state.

Google’s current “good” thresholds are LCP at or below 2.5 seconds, INP at or below 200 milliseconds, and CLS at or below 0.1, evaluated at the 75th percentile. Treat those as experience guardrails, not a promise of ranking or conversion gains.

2. Audit theme architecture

• Remove obsolete snippets, duplicate libraries, and global assets used by only one template.
• Keep critical rendering work small and defer noncritical functionality.
• Break reusable behavior into focused sections and load code only where the section exists.
• Avoid repeated DOM scans and broad mutation observers.
• Test both the published theme and a clean reference theme to distinguish content/app costs from theme costs.

3. Reduce JavaScript contention

For INP, inspect what runs after a tap, click, or keypress. Break long tasks, avoid rebuilding large portions of the page, and initialize components when they become relevant. A small download can still be expensive if it performs too much work on the main thread.

• Prefer browser capabilities and small modules over large general-purpose libraries.
• Use passive listeners for appropriate touch and scroll behavior.
• Do not initialize every carousel, modal, and product widget at page start.
• Check cart drawers, predictive search, variant selection, filters, and consent controls on lower-powered mobile devices.

4. Make media intentional

• Serve responsive image widths through Shopify’s image tools.
• Provide intrinsic width and height to reserve layout space.
• Prioritize the likely LCP image; lazy-load below-the-fold images.
• Avoid loading desktop and mobile hero assets at the same time.
• Use video and 3D media behind a preview or explicit interaction where appropriate.
• Keep product photography quality high while matching the rendered dimensions.

5. Protect the first viewport

Identify what the customer needs first: brand context, product value, price, primary imagery, product options, and a clear action. Delay reviews, recommendations, social feeds, and rich media that appear below that decision point.

A large hero is not automatically wrong. It becomes a problem when the asset is larger than necessary, discovered late, or competing with scripts and fonts before it can render.

6. Review apps and third parties by value

• Map every external request to an owner and business purpose.
• Remove remnants from uninstalled apps and finished experiments.
• Limit scripts to the templates, consent states, and interactions that need them.
• Check whether app embeds can be disabled or deferred without losing necessary functionality.
• Audit tag-manager containers for duplicate and low-value tags.

7. Prevent layout shifts

Reserve space for images, announcement bars, reviews, recommendations, app blocks, and consent interfaces. Avoid inserting content above an element a customer may already be reading or tapping. When fonts swap, keep fallback metrics close enough to prevent large reflow.

8. Simplify fonts and visual effects

Use only the families, weights, and styles the theme renders. Preload only a genuinely critical font file, use an appropriate font-display strategy, and prefer CSS effects over large decorative images when the visual result is equivalent.

9. Validate mobile commerce interactions

Test real tasks: open navigation, search, apply a collection filter, select variants, open size guidance, add to cart, edit quantity, apply a code, and begin checkout. Performance is not complete if a lab score improves while a customer interaction becomes unreliable.

10. Keep page structure proportionate

Long landing pages, repeated hidden variants, mega menus, and duplicated mobile/desktop markup can create a large DOM. Render the structure customers need and progressively reveal the rest. Pagination can be more appropriate than loading very large collections at once.

11. Validate before and after release

1. Test in a duplicate theme with representative content and apps enabled.
2. Run functional, accessibility, analytics, consent, and visual-regression checks.
3. Compare the same lab scenarios before and after the change.
4. Release one coherent group of changes with a rollback path.
5. Monitor errors, business behavior, and Shopify’s later field data.