The same collection page, built two ways
We took Sweetwater's production Dealzone collection page — React and Next.js on the same Algolia index — and rebuilt a separate What's New page with native Web Components. Same filters, same index, same customer job. Then we measured both on live production URLs.
- 8.3x
- Lighter feature JavaScript
- 74 KB vs 615 KB
- 1.8x
- Faster Largest Contentful Paint
- 0.75 s vs 1.36 s
- 47x
- Faster Algolia search
- 46 ms vs 2,163 ms
- +12
- Lighthouse Performance
- 88 vs 76
Two pages, one job to do
Both pages do the same work for a customer browsing gear — filters, search, sort, product cards. They just arrive at that job with different architectures.
Web Components
A collection page built from native custom elements and a small central state manager — no framework runtime shipped to the browser.
React / Next
The existing production page on React and Next.js — same Algolia index, same feature set, plus a framework runtime in the bundle.
Feature for feature
1 query for 24 items (13.1 KB) vs 4 queries for 42 items (12.7 KB)
Where the kilobytes go
The React page ships a framework runtime on top of its own feature code. The Web Components page ships only what's needed to render the collection — no Next, no React, no hydration step.
- _next/static · 9 files
- 603.6 KB
- app.js
- 11.8 KB
- Total feature JS
- 615.4 KB
- whats-new/index.js
- 74.3 KB
- Next / React runtime
- — none
- Total feature JS
- 74.3 KB
The full scorecard
| Category | What's New | Dealzone |
|---|---|---|
| Performance | 88 | 76 |
| Accessibility | 97 | 92 |
| Best Practices | 96 | 92 |
| SEO | 100 | 100 |
What made the difference
One query, not four
A single central state manager asks Algolia for exactly what the page needs — one request for 24 items in 46 ms, instead of four overlapping queries taking over two seconds.
No framework runtime
There is no React or Next to download, parse, and hydrate before the page is interactive. The browser runs the code that does the work and nothing else.
Native view transitions
Filtering, searching, and sorting animate through the browser's native View Transitions API — smooth state changes with no animation library on board.
Want this kind of result on your collection page?
We rebuild heavy front ends on web standards — and measure the difference.