← All guides

Performance

Shopify theme speed optimization: what to fix first

A practical workflow for auditing images, app scripts, layout shifts, and mobile performance before changing your Shopify theme.

By Ybav · Published

Measure before editing

Start with the pages customers actually use: your homepage, a popular collection, and a product page with variants. Test on a mobile viewport and a realistic connection. Record the date, template, device, and installed apps so later comparisons mean something. A single Lighthouse score is a diagnostic snapshot, not a guarantee of a fast experience for every visitor.

Use Shopify’s web performance reporting alongside browser diagnostics. Look for slow loading of the main content, delayed interaction, and elements that move while the page loads. Keep a duplicate theme for changes and write down your baseline.

Prioritize the first visible image

A large hero or product image can delay the main content. Serve an appropriately sized responsive image rather than sending the largest original to every phone. Provide image dimensions so the browser reserves space before the file arrives.

Keep the main visible image discoverable early. Lazy-load images further down the page, not the image a shopper needs immediately. Avoid adding several competing preload hints without checking whether they improve the measured result.

Audit apps and JavaScript

List each app, the pages where it runs, and the business task it performs. Two review widgets or multiple popup tools can add overlapping work. Ask whether an app can be limited to relevant templates before removing functionality customers need.

Inspect unused code and long tasks with browser developer tools. Defer nonessential theme scripts where appropriate, and test navigation, variant selection, cart drawers, and analytics after every change. Never remove platform-required output just to improve a score.

Protect the result

Recheck the same templates after a change and test a real shopping journey. Faster rendering is useful only if product selection and checkout still work. Track changes over time rather than chasing a perfect score in one run.

For a developer handover, keep a short log of the problem, change, measured result, and rollback method. This makes future app installations and merchandising changes easier to assess.

Further reading

Related guides