Shopify Theme Performance Checklist We Run Before Every Launch

Core Web Vitals became a ranking signal the same quarter a beauty brand's hero video tanked mobile LCP on launch night. The checklist here is what K2 Devworks runs on duplicate themes before any go-live — not Lighthouse vanity scores, but the section-level decisions that actually move LCP, CLS, and INP on merchant stores.

Performance is not a post-launch optimization ticket for us — it is a launch gate. We have delayed go-live twice in the last year when mobile LCP stayed above three seconds on the homepage hero, and both clients thanked us later when their ad landing pages did not bounce at 70%. Shopify themes are Liquid plus images plus JavaScript plus whatever apps the marketing team installed without telling dev. This checklist is what Dhruv runs on staging the week before switch, and what Nishad turns into a one-page PDF for the client so they understand why we said no to autoplay video on cellular. Every item maps to a real failure we have seen on a live store.

1. Baseline measurement — no guessing

Before changing code, capture Lighthouse mobile on homepage, collection, product, and cart templates on staging with password protection bypass. Save WebPageTest filmstrip links to the project Notion. Record TTFB, LCP element, total JavaScript bytes, and request count. You need a before snapshot or stakeholders will argue your optimizations did nothing. We test on throttled 4G because merchants care about Instagram traffic on phones, not your office Wi-Fi. Compare against Theme Performance Tips targets we published for our own properties.

2. LCP hero audit

Identify the LCP element per template. Homepage is usually the first hero image or heading block. Product template is often product media. Ensure LCP image uses image_url with appropriate width — not master — and avoid loading=lazy on that image. Add fetchpriority="high" only on true LCP candidates, one per page. Video heroes need poster images; autoplay video on mobile is a launch blocker unless the client signs a performance waiver. We replace background-image CSS heroes with img tags whenever possible because Lighthouse measures img LCP more predictably than CSS backgrounds.

{%- assign lcp_width = 1200 -%}

3. Image discipline across sections

Grep the theme for img_url, master, and missing width attributes. Migrate to image_url. Product cards should use consistent widths — 400w and 800w in srcset for two-column mobile grids. Logo strips often ship 4000px PNGs from Figma; re-export as SVG or compressed WebP in assets/. Image Optimization Guide is the deep dive; this checklist item is pass/fail. Fail if any below-fold section omits lazy loading except the first row of a collection grid.

4. Liquid loop and render limits

Search for {% for product in collection.products %} without limit. Cap homepage sections. Search for nested loops in snippets — related products, megamenu category trees. Each unnecessary iteration adds server render time. We also audit {% render %} chains deeper than three levels; flatten or cache where Shopify allows. Liquid for Beginners explains loop syntax; performance review explains when loops are too expensive for the job.

5. JavaScript weight and INP

List every script in layout/theme.liquid and content_for_header output on staging. Defer non-critical theme JS. Move carousel initialization below fold sections to Intersection Observer so sliders not in viewport do not init on load. Remove jQuery if the theme added it for one plugin. INP suffers when click handlers block main thread — variant pickers and cart drawers are usual suspects. Profile with Chrome performance tab on add-to-cart flow.

Third-party script inventory

Apps inject scripts without asking. Export a HAR file on homepage and tag each external domain: analytics, heatmaps, chat, reviews, personalization. Question every script with no owner. Chat widgets are the worst INP offenders — load after scroll or first interaction when marketing agrees. Document retained scripts in handoff so the client knows uninstalling an app may break tracking.

6. CLS — fonts, images, and dynamic injection

Set width and height on images where aspect ratio is known. Use font-display: swap in @font-face and reserve space for icon fonts. Announcement bars that inject above the header without reserved height cause CLS — fix with CSS min-height on the header group or load bar inside theme section with stable layout. App review widgets that resize after load are common; defer their container min-height or load below fold.

7. CSS delivery and unused rules

Custom sections should not import 800 lines of CSS for a single accordion. Split {% stylesheet %} per section where Dawn patterns allow. Remove dead rules from Figma exports. Avoid @import chains in section CSS. Critical above-fold CSS belongs inline or in theme critical bundle — not scattered across twelve section files loading duplicate grid definitions.

8. App blocks and section bloat

Count sections on homepage JSON — more than fifteen sections often means marketing added duplicates. Each app embed may add HTTP requests. Replace redundant app sections with native theme features when possible. Before launch we compare staging theme JSON to approved wireframe section list. Orphan sections in templates/ that are not in JSON are fine; orphan apps injecting global scripts are not.

9. Cart and checkout adjacent templates

Cart drawer performance affects conversion. Test add-to-cart on slow 3G with full cart. Mini-cart should not re-fetch entire product catalog. Upsell sections in cart drawer use limit: 4. Checkout extensibility and thank-you page scripts follow the same third-party audit as homepage. Cheat Sheet helps juniors fix Liquid in cart snippets without introducing new render loops.

10. Pre-launch sign-off template

1. Lighthouse mobile ≥ 70 performance on homepage staging URL saved
2. LCP element documented per core template
3. No img_url or master URLs in sections/ and snippets/
4. All collection loops have explicit limit or pagination
5. Third-party script table approved by client marketing lead
6. CLS spot-check on product template with slow 4G filmstrip
7. Theme Check CI green on release branch
8. Rollback theme duplicate still published and named

What we do when the checklist fails

We do not hide bad scores. We send the client a short video showing throttled load, propose ranked fixes with hours estimate, and negotiate scope. Often the fix is swap hero video for image, compress three PNGs, and remove a duplicate reviews app — four hours, not a rewrite. Dawn Section Tutorial helps when the base theme is sound but custom sections regressed metrics. Performance is cumulative; fixing LCP without touching 400KB of apps leaves you with a false sense of done.

11. Font loading and FOIT

Custom fonts from Figma exports often add @font-face in every section file. Consolidate to theme assets and load once in theme.liquid or base CSS. Use font-display: swap. Preload only the primary weight used in LCP text if it is a webfont heading — not every weight from the design system. Merchants notice flash of invisible text less than they notice five-second LCP. Performance Tips covers font subsetting for Latin-only stores.

12. Product media and variant switchers

Product template LCP is often the first gallery image. Ensure variant media swap does not load full master size on every change. Use image_url widths matching display size. Debounce variant change handlers. Test product with twelve color variants on Android mid-tier device — INP spikes here on poorly written themes. Liquid for Beginners object reference helps juniors avoid re-querying all_products inside variant change callbacks.

13. Staging vs production parity

Staging themes with no apps installed score artificially well. Before sign-off, enable the same apps on staging or measure production duplicate with apps active. Marketing must know launch score may drop when GTM and reviews go live — set expectations in writing. We screenshot Shopify admin speed report and Lighthouse side by side in the handoff PDF.

Post-launch: first 72 hours

Monitor Real User Metrics in Search Console after switch. Watch for CLS spikes when announcement bars schedule. Keep rollback theme published for 72 hours. If LCP regresses, check whether merchant uploaded uncompressed PNG heroes via theme editor — common and fixable without code deploy. Performance checklist does not end at launch; it loops when content changes.

14. Predictive prefetch and link hover traps

Some themes prefetch every link on hover — kills mobile data and INP. Audit theme.js for mouseenter prefetch on collection cards. Keep prefetch for likely next navigation only if product analytics justify it. Dawn defaults are conservative; custom themes from agencies often are not.

15. Section rendering on cold vs warm cache

First byte on Shopify includes Liquid server render. Heavy nested render chains hurt cold requests more than cached CDN assets. Test performance logged out with cache disabled in DevTools. Warm repeat views flatter scores — Lighthouse uses cold load; merchants on slow networks match cold more often than you think.

Performance budget spreadsheet we share with clients

We send a one-page budget: max 2.5s LCP mobile, max 500KB critical path JS, max 15 homepage sections, max 8 third-party domains, hero image max 200KB after compression. Marketing signs before adding apps. When someone installs a popup app post-launch and LCP regresses, the budget doc assigns ownership. Image guide supports the image row in that spreadsheet with compression workflow.

Dawn-specific performance wins on client forks

On Dawn forks we defer non-critical sections below fold using Shopify section lazy load patterns where appropriate, reuse Dawn card-product snippet instead of custom card markup, and avoid duplicating Dawn's cart-drawer JS. Dawn tutorial shows file layout; performance pass verifies we did not fork card-product unnecessarily. Custom card markup is the top Dawn fork regression we measure in kilobytes.

Checklist printable summary

We print this for launch week and tape it near the deploy calendar: measure baseline Lighthouse mobile on homepage, product, collection, cart; fix LCP candidate image sizing; grep img_url and master; cap Liquid loops; inventory third-party scripts with marketing sign-off; verify CLS on announcement bar and product gallery; Theme Check green; rollback theme named and published; post-launch RUM check at 72 hours. Cheat Sheet for Liquid fixes, performance tips for deeper tuning after launch gate passes.

16. Speculative loading and theme editor preview

Theme editor preview loads additional Shopify scripts — do not profile performance only inside customizer. Open storefront preview URL without editor chrome for accurate Lighthouse. Merchants often report slow site when they mean slow editor; teach them the difference in handoff.

17. Wholesale and B2B catalog scale

B2B clients with 10k SKUs need collection pagination and search-first UX — never homepage loops over collections.all.products. Liquid limits bite harder on wholesale themes. Performance checklist extends to quick-order forms and volume pricing snippets that some apps inject. Test logged-in B2B customer path separately from retail guest.

When checklist fails on B2B, fixes are often catalog structure not just images — still measure the same metrics. Liquid basics help juniors avoid unbounded loops on quick-order pages copied from marketing landing HTML.

18. Edge cases: markets, currency, and geolocation apps

Shopify Markets changes money formatting and sometimes template content. Test performance with Markets enabled if client sells internationally. Geolocation popups that block render until country is detected hurt LCP — defer or use server-side country hint. Script inventory must list markets apps separately from analytics.

Checklist item: run Lighthouse on secondary market preview URL if client uses Markets. Currency switcher JS often duplicates price formatting already in Liquid — remove duplicate. Image optimization applies per market when different hero images are used regionally.

19. Accessibility and performance overlap

Focus traps in modals and cart drawers hurt INP and fail WCAG. Test keyboard checkout path during performance sprint — fixing focus management often reduces script thrash. Reduced motion preferences should disable autoplay heroes; respect prefers-reduced-motion in section CSS.

Share the performance budget spreadsheet in the kickoff deck, not the week before launch. Clients who co-sign metrics early accept tradeoffs when marketing wants another popup. Developers who measure after deploy fight alone. Re-run the checklist after every major app install or homepage redesign — performance is a recurring gate, not a one-time PDF. Converter output still needs image width review before launch — automation does not replace LCP discipline.