Shopify Performance Optimization: The 2024 Field Guide | Made for Shopify | madeforshopify

Shopify Performance Optimization: The 2024 Field Guide

Performance is the silent salesperson on your Shopify Plus store. When pages load in under a second, bounce rates drop, search ranking stabilizes, and conversion rates climb. This guide distills the tactics we use when we take a brand from a Lighthouse sc ore in the 50s to a rock-solid 90+ across key templates.

Performance dashboard showing Core Web Vitals

Step 1 – Baseline and monitoring

Audit Core Web Vitals using PageSpeed Insights, WebPageTest, and SpeedCurve synthetic monitoring. Track mobile first.
Instrument real-user monitoring (RUM) via PostHog or New Relic Browser to capture actual device data.
Configure performance budgets for LCP, FID, CLS, and TTFB. Alert the engineering channel in Slack when thresholds are br eached.

Step 2 – Optimize the storefront codebase

Code split aggressively. Break out rarely used sections, wrap them in dynamic imports, and leverage next/script to defer third-party scripts until interaction.
Purge unused Liquid and CSS. Audit theme sections and CSS frameworks. Tailwind JIT and CSS containment reduce bundle size dramatically.
Ship modern images. Replace PNG hero images with WebP or AVIF, enable srcset, and set a 16:9 aspect ratio to avoid layou t shifts.
Cache GraphQL responses. Use storefront API caching with short TTLs for PDP data and longer TTLs for navigation and footers .

Step 3 – Boost server and edge performance

Adopt Shopify's Oxygen hosting for Hydrogen/Remix builds or deploy to Vercel with edge functions. Keep server response tim e under 200 ms globally.
Leverage CDN caching rules. Cache HTML for logged-out users while bypassing for personalized sessions. Configure stale-whi le-revalidate for resilience.
Optimize Liquid theme settings. Minimize synchronous Liquid loops, use section rendering APIs, and evaluate the impact of Liquid for loops on API calls.

Step 4 – Tame third-party scripts

Create a tag governance policy. Score every script on revenue impact vs. performance cost. Remove or async-load anything w ith a low score.
Use server-side tagging. Move analytics beacons into Google Tag Manager server-side or Shopify Web Pixels to reduce client payload.
Lazy-load widgets. Launch reviews, chatbots, and personalization layers with IntersectionObserver so they appear only when the user scrolls into view.

Step 5 – Conversion-driven testing

Run lighthouse automation in CI and block deployments that fail budgets.
Test performance-led experiments. A/B test removing hero carousels, consolidating images, or prefetching next-step pages. Track conversion rate and average order value.
Measure the bottom line. Tie performance improvements to revenue by blending Shopify analytics with your PostHog funnels.

Lead magnet: Performance benchmarking workbook

We maintain a benchmarking workbook that maps performance fixes to expected lift. It includes hydration strategies, Function op timizations, and scripts for auditing third-party tags.

📗 Download the Performance Benchmarking Workbook – Access it via [go.madeforshopify.com/performance-workbook](https://go. madeforshopify.com/performance-workbook). The HubSpot workflow sends you the workbook, plus a follow-up nurture series with mo bile-first optimization tips.

Every other Wednesday we send "Performance Pulse," a newsletter generated from our automated SpeedCurve exports and GA4 convers ion deltas. It includes before/after flame charts, the exact PRs we merged, and links to the GitHub Actions we rely on.

Subscribe to Performance Pulse.
After subscribing, you'll receive an automation email that invites you to our private Slack channel for performance leaders.

Keep iterating

Performance isn't a one-and-done project. Treat it as an ongoing practice: set quarterly OKRs, inspect your dependencies, and m ake performance a release gate. If you need help building the dashboards or automations described here, book a performance asses sment—we'll share our pnpm dlx scripts, Lighthouse CI config, and PostHog dashboards so you can plug them into your own stack.

Shopify Performance Optimization: The 2024 Field Guide

Share this article

Tags

Stay Updated

Mateo Alvarez

Related Posts

Conversion Rate Optimization for Shopify Stores: A Data-Driven Playbook

Key topics

Need Shopify support?

Shopify Plus Checkout Customization: Best Practices for 2025

Headless Shopify: When and Why to Go Headless

Shopify Performance Optimization: The 2024 Field Guide

Step 1 – Baseline and monitoring

Step 2 – Optimize the storefront codebase

Step 3 – Boost server and edge performance

Step 4 – Tame third-party scripts

Step 5 – Conversion-driven testing

Lead magnet: Performance benchmarking workbook

Keep iterating