Shopify Theme Speed Checks

main.js

Shopify Theme Speed Checks

A practical pass for Online Store 2.0 themes that feel heavy on collection, product, and cart. Measure first, change one thing, then measure again.

1. Baseline
- Note LCP, CLS, and INP on home, one collection, one product, and the cart.
- Test on a mid-tier mobile profile with a catalog that looks like production (images, metafields, a few apps).
- Compare the same URLs before and after each change.

2. Theme architecture
- Prefer a single Online Store 2.0 theme with sections and blocks over stacked page builders.
- Remove unused sections from the JSON templates rather than hiding them with CSS.
- Keep critical CSS lean; avoid shipping an entire icon set for a handful of glyphs.

3. Liquid and rendering
- Avoid N+1 loops over large collections in the header or footer.
- Paginate or limit product grids; do not render hundreds of cards on first paint.
- Prefer Shopify's image_url / image_tag helpers so width, height, and srcset stay correct.

4. Images and media
- Set explicit dimensions on the hero and first product media; do not lazy-load the LCP image.
- Use modern formats via Shopify CDN transforms when the theme already supports them.
- Compress product video posters; defer non-critical video until interaction.

5. Apps and scripts
- Audit every app that injects scripts sitewide (reviews, chat, upsell, currency).
- Load checkout-only SDKs on checkout; keep product scripts scoped to product templates.
- Prefer native Shopify features before adding another third-party widget for the same job.

6. Cart and checkout
- Minimize cart drawer scripts that poll on every page.
- Keep gift notes, shipping estimators, and upsell drawers from blocking first paint.
- Verify Shop Pay / accelerated checkout still works after script cleanup.

7. Caching and CDN
- Rely on Shopify's edge cache for anonymous storefront HTML; avoid query-string cache busters on static assets.
- Do not put personalized prices or cart state into publicly cached fragments.

After each change, recheck the same four URLs. Keep the change only if add-to-cart, variant selection, and checkout still work.

More Shopify theme and storefront notes: https://devdiy.com

Run this JavaScript snippet

Open this snippet on SnIPPETsX to run the JavaScript code in your browser, edit it together with others in real time, or fork it into your own copy. No install or account is needed.

• Online JavaScript Compiler
• Share your own code snippets