Performance Toolkit2026

Speed Score

PerformanceLighthousePlaywrightWeb VitalsCI/CD

An automated performance auditing toolkit for Shopify stores that runs Lighthouse, captures Core Web Vitals, and tracks performance regressions in CI — purpose-built for the Shopify platform.

The Challenge

Shopify theme updates frequently introduce performance regressions that go unnoticed until they impact conversion rates. Standard Lighthouse runs don't account for Shopify-specific factors: app script bloat, theme asset loading, Shopify CDN caching behavior, and dynamic section rendering.

The Solution

Built a Playwright-based testing framework that runs Lighthouse audits against real Shopify storefronts, captures Real User Metrics via the Web Vitals API, generates trend reports, and blocks deployments that exceed performance budgets — all configured via a single YAML file.

Design

Code

Result

src/auditor/run-audit.tstypescript
  1export async function runShopifyAudit(  2  config: AuditConfig  3): Promise<AuditReport> {  4  const browser = await playwright.chromium.launch()  5  const context = await browser.newContext({  6    userAgent: config.userAgent ?? MOBILE_CHROME,  7    viewport: { width: 412, height: 915 },  8  })  9 10  const page = await context.newPage() 11 12  // Capture Web Vitals before Lighthouse 13  await injectWebVitalsCollector(page) 14  await page.goto(config.url, { waitUntil: 'networkidle' }) 15 16  const realMetrics = await page.evaluate(() => 17    window.__WEB_VITALS_RESULTS__ 18  ) 19 20  // Run Lighthouse via CDP 21  const cdp = await context.newCDPSession(page) 22  const lighthouseReport = await runLighthouse(cdp, config.url, { 23    throttling: config.throttling ?? SHOPIFY_3G_PROFILE, 24    categories: ['performance'], 25  }) 26 27  // Shopify-specific analysis 28  const appScripts = await detectThirdPartyApps(page) 29  const themeAssets = await analyzeThemeBundle(page) 30 31  await browser.close() 32 33  return { 34    url: config.url, 35    timestamp: new Date().toISOString(), 36    lighthouse: lighthouseReport, 37    webVitals: realMetrics, 38    shopify: { appScripts, themeAssets }, 39    budget: evaluateBudget(config.budgets, lighthouseReport), 40  } 41} 42

Scroll to explore

Tech Stack

PlaywrightLighthouseWeb Vitals APINode.jsGitHub ActionsChart.jsYAML Config

Next Project

Cart Whisperer

Interested in similar work?

Let's discuss how I can help bring your Shopify project to life.