[{"data":1,"prerenderedAt":136},["ShallowReactive",2],{"work-shopify-perf-audit":3},{"id":4,"title":5,"body":6,"category":96,"challenge":97,"codeSnippet":98,"description":102,"extension":103,"featured":104,"finalScreenshot":105,"gridOrder":106,"isDemo":104,"isDemoURL":89,"liveUrl":107,"meta":108,"mockupImage":109,"navigation":110,"nextProject":111,"order":114,"path":115,"results":116,"schneiderFeatured":104,"schneiderOrder":107,"seo":117,"solution":118,"stem":119,"subtitle":120,"tags":121,"techStack":127,"thumbnail":133,"thumbnailVideo":107,"year":134,"__hash__":135},"works/works/shopify-perf-audit.md","Speed Score",{"type":7,"value":8,"toc":88},"minimark",[9,14,18,21,25,32,38,44,50,54,65,71,81,85],[10,11,13],"h2",{"id":12},"the-problem","The Problem",[15,16,17],"p",{},"Performance is the silent conversion killer in e-commerce. A 1-second increase in page load time can reduce conversions by 7%, yet most Shopify merchants have no automated way to catch performance regressions. Theme updates, new app installations, and content changes all silently degrade Core Web Vitals.",[15,19,20],{},"Standard Lighthouse audits miss Shopify-specific issues: the impact of Shopify's app script injection, CDN caching behaviors, dynamic section rendering overhead, and the interaction between theme JavaScript and Shopify's own scripts.",[10,22,24],{"id":23},"architecture","Architecture",[15,26,27,31],{},[28,29,30],"strong",{},"Audit Runner"," — Playwright launches a real Chromium instance, navigates the store as a customer would, and captures metrics at multiple levels: synthetic (Lighthouse scores), real browser (Web Vitals API), and Shopify-specific (app script inventory, theme asset analysis).",[15,33,34,37],{},[28,35,36],{},"Shopify Analysis Layer"," — Purpose-built analyzers identify Shopify-specific performance issues: which installed apps inject render-blocking scripts, how theme assets compare to Shopify's recommended budgets, whether Liquid rendering is causing server-side bottlenecks.",[15,39,40,43],{},[28,41,42],{},"Budget System"," — A YAML configuration file defines performance budgets per page type (homepage, collection, product, cart). The toolkit compares audit results against budgets and returns pass/fail with specific violations.",[15,45,46,49],{},[28,47,48],{},"CI Integration"," — GitHub Actions workflow runs audits on every theme PR. Results are posted as PR comments with visual trend charts. Failed budgets block merge.",[10,51,53],{"id":52},"key-technical-decisions","Key Technical Decisions",[15,55,56,59,60,64],{},[28,57,58],{},"Why Playwright over Puppeteer?"," Playwright's ",[61,62,63],"code",{},"newCDPSession"," gives direct Chrome DevTools Protocol access needed for Lighthouse, while Playwright's higher-level APIs handle the Web Vitals injection and page interaction more reliably. The same test context captures both synthetic and real metrics.",[15,66,67,70],{},[28,68,69],{},"Why real browser metrics alongside Lighthouse?"," Lighthouse uses simulated throttling that doesn't capture the full picture on Shopify stores. App scripts load asynchronously, CDN edge caching affects TTFB unpredictably, and section rendering varies by content. Real browser metrics complement the synthetic score.",[15,72,73,76,77,80],{},[28,74,75],{},"Why YAML config over code?"," Performance budgets should be accessible to non-developers on the team. A YAML file that says ",[61,78,79],{},"product.lcp: 2500ms"," is understandable by anyone.",[10,82,84],{"id":83},"outcome","Outcome",[15,86,87],{},"Across 15 Shopify stores in the pilot program, the toolkit identified an average of 3 performance issues per store that were previously unknown. The most common finding: third-party app scripts adding 800ms+ to LCP. Several merchants removed or replaced underperforming apps based on the data, resulting in measurable conversion improvements.",{"title":89,"searchDepth":90,"depth":90,"links":91},"",2,[92,93,94,95],{"id":12,"depth":90,"text":13},{"id":23,"depth":90,"text":24},{"id":52,"depth":90,"text":53},{"id":83,"depth":90,"text":84},"Performance Toolkit","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.",{"language":99,"filename":100,"code":101},"typescript","src/auditor/run-audit.ts","export async function runShopifyAudit(\n  config: AuditConfig\n): Promise\u003CAuditReport> {\n  const browser = await playwright.chromium.launch()\n  const context = await browser.newContext({\n    userAgent: config.userAgent ?? MOBILE_CHROME,\n    viewport: { width: 412, height: 915 },\n  })\n\n  const page = await context.newPage()\n\n  // Capture Web Vitals before Lighthouse\n  await injectWebVitalsCollector(page)\n  await page.goto(config.url, { waitUntil: 'networkidle' })\n\n  const realMetrics = await page.evaluate(() =>\n    window.__WEB_VITALS_RESULTS__\n  )\n\n  // Run Lighthouse via CDP\n  const cdp = await context.newCDPSession(page)\n  const lighthouseReport = await runLighthouse(cdp, config.url, {\n    throttling: config.throttling ?? SHOPIFY_3G_PROFILE,\n    categories: ['performance'],\n  })\n\n  // Shopify-specific analysis\n  const appScripts = await detectThirdPartyApps(page)\n  const themeAssets = await analyzeThemeBundle(page)\n\n  await browser.close()\n\n  return {\n    url: config.url,\n    timestamp: new Date().toISOString(),\n    lighthouse: lighthouseReport,\n    webVitals: realMetrics,\n    shopify: { appScripts, themeAssets },\n    budget: evaluateBudget(config.budgets, lighthouseReport),\n  }\n}\n","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.","md",false,"/images/projects/shopify-perf-audit-final.jpg",13,null,{},"/images/projects/shopify-perf-audit-mockup.jpg",true,{"title":112,"slug":113},"Cart Whisperer","shopify-shopping-agent",4,"/works/shopify-perf-audit","Average LCP improvement of 1.8s across audited stores. Detected 23 performance regressions before they reached production in the first month. Reduced theme asset size by 34% on average through identified bottlenecks.",{"title":5,"description":102},"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.","works/shopify-perf-audit","Automated Performance Audits for Shopify",[122,123,124,125,126],"Performance","Lighthouse","Playwright","Web Vitals","CI/CD",[124,123,128,129,130,131,132],"Web Vitals API","Node.js","GitHub Actions","Chart.js","YAML Config","/images/projects/shopify-perf-audit.jpg","2026","QLn4OOeM4yPx9MqTEQJJBdeWXcWGzG_gU1EZskSNDSY",1773700381271]