LCP Largest Contentful Paint
Core Web VitalWhen the biggest thing on screen (usually the hero or product photo) has painted.
Magento
2.77 s
Headless
2.75 s best
Shopify
3.68 s
A performance trial · measured October 16, 2026
Same store. Three stacks. One stopwatch.
Third Shot Supply Co. is one pickleball shop built three times: as a classic Magento 2 store, as a headless Next.js storefront on that same Magento, and on Shopify. Same products, photos and design. We put all three on the clock: 57 Lighthouse runs, real-browser filmstrips and a scripted shopper.
On a mid-range phone, Headless is fastest, averaging 90 and winning 4 of 6 pages, though Magento 2 paints the main content first (2.91 s on average). Magento 2 follows at 88; Shopify trails at 80.
- Magento 2 2nd
Mage-OS 3.5 · Luma theme · PHP
88 Lighthouse
performance- LCP
- 2.91 s
- Blocking
- 433 ms
- Weight
- 912 KB
- Page wins
- 3 of 6
- Headless Fastest
Next.js 16 · React 19 · Magento GraphQL
90 Lighthouse
performance- LCP
- 3.46 s
- Blocking
- 105 ms
- Weight
- 501 KB
- Page wins
- 4 of 6
- Shopify 3rd
Online Store 2.0 · Liquid · custom theme
80 Lighthouse
performance- LCP
- 3.59 s
- Blocking
- 533 ms
- Weight
- 1.75 MB
- Page wins
- 0 of 6
thirdshot
Averages over six equivalent pages (home, category, product, content, search, cart), median of 5 runs each. Mobile: moto g class phone, 4× slower CPU, throttled 4G. Switch to desktop at the top.
01 The scoreboard
Every page, scored
Google Lighthouse performance score (0–100) for each page type. Each mark is the median of five runs; the faint line behind it spans the slowest to the fastest run, so you can see how steady each stack is.
- HomeLanding page, hero + 9 sections939581
- CategoryPaddles listing with filters969182
- ProductKitchen Line Carbon 16, colour swatches909084
- Content“Our Story” CMS page778979
- SearchResults for “paddle”828584
- CartEmpty bag page949270
- Averageall six pages889080
Show as a table
| Page | Magento 2 | Headless | Shopify |
|---|---|---|---|
| Home | 93 | 95 | 81 |
| Category | 96 | 91 | 82 |
| Product | 90 | 90 | 84 |
| Content | 77 | 89 | 79 |
| Search | 82 | 85 | 84 |
| Cart | 94 | 92 | 70 |
| Average | 88 | 90 | 80 |
02 Core Web Vitals & friends
Where the milliseconds go
The metrics behind the score, page by page. Shaded zones are Google’s thresholds: good, needs work, poor. Ticks on each bar are the five individual runs.
Landing page, hero + 9 sections
FCP First Contentful Paint
The first moment anything (text, logo, image) appears.
Magento
1.50 s
Headless
1.21 s best
Shopify
2.00 s
TBT Total Blocking Time
Core Web VitalHow long JavaScript froze the page while it loaded. The lab stand-in for INP.
Magento
198 ms
Headless
83 ms best
Shopify
321 ms
CLS Cumulative Layout Shift
Core Web VitalHow much the layout jumped around while loading. Lower is steadier.
Magento
0
Headless
0.001
Shopify
0
SI Speed Index
How quickly the visible page fills in, on average.
Magento
2.15 s
Headless
1.42 s best
Shopify
2.00 s
TTFB Server response
Time the server took to send back the first byte of HTML.
Magento
122 ms
Headless
45 ms
Shopify
21 ms best
Lighthouse lab data with simulated throttling (the method PageSpeed Insights uses). A second opinion from a real, throttled browser is in the race below. There is no real-user (CrUX) data: demo stores get too little traffic and are not indexed.
Show as a table
| Metric | Magento 2 | Headless | Shopify |
|---|---|---|---|
| LCP · Largest Contentful Paint | 2.77 s | 2.75 s | 3.68 s |
| FCP · First Contentful Paint | 1.50 s | 1.21 s | 2.00 s |
| TBT · Total Blocking Time | 198 ms | 83 ms | 321 ms |
| CLS · Cumulative Layout Shift | 0 | 0.001 | 0 |
| SI · Speed Index | 2.15 s | 1.42 s | 2.00 s |
| TTFB · Server response | 122 ms | 45 ms | 21 ms |
03 The race
Watch them load
Filmstrips recorded in a real Chrome on a throttled connection (slow 4G, 4× slower CPU, phone screen), every frame time-stamped. Press play to replay all three side by side, or drag the scrubber.
Race data has not been measured yet.
Applied throttling (what DevTools does) rather than Lighthouse’s simulation: 562 ms request latency, 1.47 Mbps down, CPU slowed 4×, 412×823 screen, cache disabled. Three runs per page; the film is the median run by LCP. “Complete” is the moment the screen stops changing visibly.
04 The shopper journey
From landing to bag
Page scores describe single visits. Shoppers click around. A script plays the same five steps on each store, timing each one from the tap until the next screen is usable. This is where a headless storefront’s in-app navigation should shine.
Journey data has not been measured yet.
Mobile profile: 4G (150 ms latency, 9 Mbps), CPU slowed 4×, phone screen. Desktop profile: no throttling, 1440×900. Fresh browser per run (first page cold, the rest warm, like a real visit); median of three runs.
05 Page weight
What each page costs to download
Compressed bytes over the wire, split by type. Heavier pages hurt most on slow or metered phone connections, and every script also has to be parsed and run.
Landing page, hero + 9 sections
Total transfer
everything the browser downloaded
1.12 MB
586 KB
1.66 MB
JavaScript
scripts, compressed
424 KB
157 KB
217 KB
Images
photos, icons
452 KB
241 KB
494 KB
CSS
stylesheets
89 KB
19 KB
22 KB
Fonts
web fonts
118 KB
114 KB
114 KB
HTML
documents
48 KB
17 KB
55 KB
Other
JSON, prefetch, beacons
19 KB
37 KB
793 KB
Requests
number of files
227
50
174
Show as a table
| Type | Magento 2 | Headless | Shopify |
|---|---|---|---|
| Total transfer | 1.12 MB | 586 KB | 1.66 MB |
| JavaScript | 424 KB | 157 KB | 217 KB |
| Images | 452 KB | 241 KB | 494 KB |
| CSS | 89 KB | 19 KB | 22 KB |
| Fonts | 118 KB | 114 KB | 114 KB |
| HTML | 48 KB | 17 KB | 55 KB |
| Other | 19 KB | 37 KB | 793 KB |
| Requests | 227 | 50 | 174 |
06 Beyond speed
The other three Lighthouse scores
Averaged over the six pages. Underneath each score: every check that failed on at least one page.
Accessibility
Can everyone use it: contrast, labels, keyboard, screen readers.
- Magento 98
Touch targets do not have sufficient size or spacing. · Elements with an ARIA `[role]` that require children to contain a specific `[role]` are missing some or all of those required children.
- Headless 100
Links rely on color to be distinguishable.
- Shopify 99
Links rely on color to be distinguishable.
Best practices
Security headers, console errors, third-party cookies, modern APIs.
- Magento 100
No failed checks
- Headless 100
No failed checks
- Shopify 73
Uses third-party cookies · Browser errors were logged to the console · Issues were logged in the `Issues` panel in Chrome Devtools
SEO basics
Crawlable, titled, described. All three demo stores are deliberately set to noindex, which costs each the same points.
- Magento 63
Page is blocked from indexing
- Headless 68
Page is blocked from indexing
- Shopify 68
Page is blocked from indexing · Document does not have a meta description
07 The three stacks
How each one builds a page
Speed is one trade-off among several. Here is what sits behind each storefront, and what it costs to own.
Magento 2
The server builds every page as finished HTML; the browser then loads a large JavaScript toolkit (RequireJS, jQuery, Knockout) that wires up menus, swatches and the mini cart.
- Total control of code, data and hosting
- Huge extension ecosystem, strong for complex catalogues and B2B
- No platform fees
- Heavy default front end; speed needs expert tuning
- You run and patch everything
- Every full click reloads the page
Headless
The same Magento becomes a pure data API. A separate Next.js app renders pages with React Server Components, then the browser takes over and swaps pages in place without reloading.
- Lightest pages and the most control over every byte
- App-like navigation after the first page
- Modern developer tooling
- Two systems to build, host and keep in sync
- Store features must be rebuilt in React
- The most developer effort of the three
Shopify
Shopify hosts everything. Its servers render the Liquid theme on a global edge network; the page also carries Shopify’s own analytics, wallet and checkout-preload scripts.
- Nothing to host, patch or scale
- Fast global infrastructure, excellent checkout
- Quickest to launch and run
- Platform scripts you cannot remove add weight
- Customisation bounded by themes, apps and APIs
- Monthly plan, app and payment fees
| Magento 2 | Headless | Shopify | |
|---|---|---|---|
| Who runs it | You: server, PHP, MySQL, search, updates | You, twice: Magento plus a Node.js app | Shopify |
| Running cost | Hosting (this demo shares a small VPS); upkeep is the real cost | Magento’s costs plus Node hosting and a second codebase | Monthly plan (about $30–40 entry), apps, payment fees |
| Build effort | Medium: themes and extensions | High: storefront built from scratch | Low: theme and apps |
| Flexibility | Anything, it is your code | Anything, front and back | Within platform limits |
| Speed ceiling | Good with tuning | Highest: every byte is yours | Good, minus platform overhead |
| Best for | Complex catalogues, B2B, in-house PHP team | Brands wanting an app-like store, with developers | Most small and mid-size shops |
08 Method & data
How it was measured
Fair means identical treatment: same machine, same browser, same settings, same pages, many runs, medians. Everything is downloadable.
Lighthouse runs
- 57 runs: 6 pages × 3 stacks × 2 device profiles × 5 runs, interleaved (run 1 of everything, then run 2…) so a slow minute hits all stacks alike.
- Lighthouse 13.4.1 CLI, Chrome 148.0.7778.167 headless, default settings. Mobile = moto g power emulation, simulated slow 4G (150 ms RTT, 1.6 Mbps) and 4× CPU slowdown. Desktop = Lighthouse’s desktop preset.
- Reported values are medians per page; averages are the mean of the six page medians.
- Measured Oct 16, 2026, 7:50 PM PDT to Oct 16, 2026, 8:09 PM PDT, from one server (Lighthouse CPU benchmark 2504).
Getting past Shopify’s password
- The Shopify store is a free development store, which Shopify keeps behind a storefront password. Public tools such as PageSpeed Insights only ever see the password page.
- The harness submits the password form like a visitor, then sends the resulting
_shopify_essentialcookie with each Lighthouse request. Every run checks it landed on the real page (final URL, no redirect to/password), otherwise it is retried. - Magento and headless get no special treatment. All three caches were warmed before measuring.
- Shopify sends its stylesheets early with 103 Early Hints, which Lighthouse logs as 0 bytes. Their real compressed size was measured and added back to Shopify’s totals.
Caveats, honestly
- Lab data, not real users. Demo stores are not indexed and get almost no traffic, so Google has no field (CrUX) data for them.
- Magento and headless run on the same small VPS as the measuring browser and reach it through Cloudflare. Shopify is served from its own edge. Throttling evens out most of the network difference.
- Lighthouse in headless Chrome tends to report a later mobile LCP than PageSpeed Insights for all three: compare stacks with each other, not with other sites.
- Scores move a few points between runs; the run ticks in the charts show how much.
Download the data
Every run, every metric. Measured pages listed below.
Measured pages and full Lighthouse reports
Re-run it
The whole trial is one command on the measuring server. It re-measures everything (about 90 minutes, strictly one page load at a time so no store is hammered), regenerates this page and its downloads.
npm run measure # Lighthouse matrix, filmstrips, shopper journey, then rebuild