import { IconApi, IconApps, IconBuildingStore, IconCode, IconCreditCard, IconGauge, IconPhotoEdit, IconScript, } from "@tabler/icons-react"; import { FadeIn } from "@/components/ui/fade-in"; interface MethodologyArea { body: string; icon: React.ComponentType<{ className?: string; strokeWidth?: number }>; title: string; } const areas: MethodologyArea[] = [ { icon: IconGauge, title: "Core Web Vitals on Shopify", body: "We measure Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS) against Google's 2024 thresholds — LCP under 2.5s, INP under 200ms, CLS under 0.1 — on the templates that drive your revenue: home, collection, product, cart, and checkout. Field data is pulled from the Chrome User Experience Report when available, and lab data is collected with Lighthouse and WebPageTest under throttled 4G conditions to mirror the median Shopify shopper. Each metric is broken down by device class and by template so you know where the regression actually lives.", }, { icon: IconCode, title: "Liquid templates and theme code", body: "Most Shopify themes accumulate technical debt: render-blocking CSS, oversized JavaScript bundles, hidden Liquid loops with N+1 metafield lookups, and unused sections shipped from the theme editor. We profile your theme.liquid, layout/theme.liquid, the Section Rendering API surface, and the templates assigned to your top revenue pages. We flag inline scripts that block parsing, unused {{ content_for_header }} dependencies, snippet duplication across sections, and Liquid logic that fans out into one Storefront API call per item. The output is a file-by-file diff you can apply in a theme branch.", }, { icon: IconApps, title: "App impact and waterfall analysis", body: "The single biggest source of slowdown on Shopify is third-party apps that inject scripts on every page. We capture a full network waterfall, attribute every request to a specific app or pixel, and rank apps by total transfer size, main-thread blocking time, and impact on LCP. Reviews widgets, upsell apps, popups, currency converters, and analytics pixels are scored individually so you can decide which ones earn their performance cost. For each offender we recommend a path: defer, lazy-load, replace with a lighter alternative, or remove and rebuild server-side.", }, { icon: IconApi, title: "Storefront API and GraphQL queries", body: "On Hydrogen, Oxygen, or any custom headless front-end, the Storefront API is the new bottleneck. We benchmark your most expensive queries against Shopify's documented cost limits, look for over-fetching (asking for variants you never render, full collections instead of cursors), missing fragments and aliases, and uncached server actions. Subrequests, edge caching with stale-while-revalidate, and ISR patterns are reviewed against Shopify's published Hydrogen guidance. The deliverable includes a query-by-query refactor list with measured ms savings.", }, { icon: IconPhotoEdit, title: "Image and asset pipeline", body: "Product imagery is usually the heaviest asset on a Shopify storefront. We audit every image for format (WebP/AVIF served via Shopify's CDN with the right transformation parameters), responsive srcset coverage, intrinsic dimensions to prevent layout shift, lazy-loading boundaries, and the use of fetchpriority on the LCP image. Hero videos, fonts loaded via @import, icon sprites, and unused webfont weights are flagged. We also check that the Shopify CDN is being used end-to-end rather than third-party image services that bypass cache.", }, { icon: IconCreditCard, title: "Checkout and conversion flow", body: "Since the migration to Checkout Extensibility, every theme is on the new responsive checkout — but the path from product to cart to checkout still leaks revenue. We measure time-to-interactive on the cart drawer, transition latency between the cart and the hosted checkout, and the impact of Shop Pay, Apple Pay, and Google Pay buttons on first paint. Pixel and Web Pixel performance, post-purchase upsell apps, and Functions/UI extensions are reviewed for blocking behaviour. For Plus merchants we also look at the impact of B2B and multi-market routing on first navigation.", }, { icon: IconScript, title: "Third-party scripts and tracking", body: "GTM, Meta Pixel, TikTok Pixel, Klaviyo, Google Tag, Microsoft Clarity, Hotjar — each one has a measurable cost on INP and main-thread time. We instrument your storefront and produce a per-script ledger: bytes transferred, parse time, long tasks attributed, and the conversion-tracking value each script actually delivers. Scripts that double-fire (page-view tracked by both GTM and a hard-coded snippet, for example) are flagged. The recommendation is rarely 'remove tracking' — it is usually 'load via Shopify Web Pixels or server-side, defer until interaction, or consolidate to a single tag manager'.", }, { icon: IconBuildingStore, title: "Headless and Hydrogen readiness", body: "If you are evaluating a move to Shopify Hydrogen on Oxygen — or to a custom Next.js / Remix front-end — the audit produces a feasibility view rather than a prescription. We benchmark your current Liquid storefront against the realistic ceiling of a server-rendered headless build: Time to First Byte at the edge, hydration cost on the product page, the cost of preserving your current app stack on the new architecture, and SEO continuity (URL parity, sitemaps, structured data, hreflang). You leave with a clear go / no-go and an order-of-magnitude budget if the answer is go.", }, ]; export function ShopifySpeedAuditMethodology() { return (

What we actually audit on{" "} your Shopify store

The audit covers eight areas where Shopify storefronts consistently lose speed and revenue. Each area is measured against documented Google and Shopify thresholds, not opinion. You receive a written finding, a measured impact, and a fix path for every issue raised.

{areas.map((area, index) => (

{area.title}

{area.body}

))}
); }