Performance ladder
Northwind Threads performance ladder
Why your store will never score 100 — a live demonstration.
Open the pages in order and watch the score fall as normal commerce features are added to the same underlying store.
Page ladder
The target bands are the mobile PSI ranges this demo is designed to land in. The actual score column is intentionally blank until you run the pages live.
| Page | What changed | Target band (mobile) | Actual PSI score |
|---|---|---|---|
| 00-perfect.html | Nothing. The unrealistic ideal. | 100 | |
| 01-hero.html | One unoptimised full-res hero JPEG. | 75-85 | |
| 02-fonts-css.html | Google Fonts plus a CDN CSS framework. | 65-75 | |
| 03-analytics.html | GTM, GA4, Meta, TikTok, Klaviyo, Pinterest, and Snap tags. | 55-70 | |
| 04-app-pile.html | Chat, reviews, late cookie banner, and upsell popup. | 30-45 | |
| 05-csr-plp.html | Client-side-rendered product grid, Searchspring style. | 5-30 | |
| 06-csr-optimised.html | Every best-practice fix applied, but still CSR. | 50-65 | |
| index.html | Hub page with this table. | — | |
| crux.html | Lab-versus-field explainer. | — |
How to run this demo
- Open each page in PSI in the order shown above.
- Record the mobile score in the table after each run.
- End on crux.html to explain why the lab score is not the business metric.