Learn the Good Patterns
Real-world engineering guide on how top e-commerce websites achieve sub-1.0s LCP, zero layout shifts, impenetrable checkout security, and effortless scale.
Edge Caching, Brotli & Fast Server Response (TTFB)
Slashing Time to First Byte (TTFB < 100ms) with Cloudflare edge caching, Brotli compression, HTTP/2 & HTTP/3 multiplexing, and Cache-Control headers.
Global Edge CDN, Brotli Compression & Micro-Caching
Instead of routing every customer hit to a single origin server, a production e-commerce store puts a global Content Delivery Network (Cloudflare, Fastly, or AWS CloudFront) in front of the domain. Static product assets receive immutable 1-year cache headers, and catalog endpoints utilize stale-while-revalidate micro-caching to deliver sub-100ms TTFB worldwide.
// 1. Edge CDN + Stale-While-Revalidate + Single-Flight Stampede Guard
const inflightRebuild = new Map();
export async function GET(request) {
const cacheKey = 'catalog:v2:featured';
const cached = await redis.get(cacheKey);
if (cached) {
return new Response(cached, {
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=3600',
'X-Cache': 'HIT',
},
});
}
// Coalesce concurrent cold-cache misses so DB runs only ONCE (Single-Flight)
if (!inflightRebuild.has(cacheKey)) {
inflightRebuild.set(
cacheKey,
fetchCatalogWithSingleJoin()
.then(async (rows) => {
const json = JSON.stringify(rows);
await redis.set(cacheKey, json, { EX: 60 });
return json;
})
.finally(() => inflightRebuild.delete(cacheKey))
);
}
const freshJson = await inflightRebuild.get(cacheKey);
return new Response(freshJson, {
headers: {
'Content-Type': 'application/json',
'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=3600',
},
});
}Key Engineering & Business Benefits:
- Delivers sub-100ms Time to First Byte (TTFB) globally from nearby edge PoPs.
- Brotli compression trims HTML, CSS, and JSON payloads by 20–30% over legacy gzip.
- Single-flight coalescing + stale-while-revalidate prevents thundering-herd DB collapses when popular cache keys expire.
The Horror Site: Un-Cached Origin, N+1 SQL & Cache Stampede Crash
The bad site bypassed CDN caching completely (Cache-Control: no-store on static product listings) and executed 38 un-indexed sequential SQL queries per hit. When flash-sale traffic spiked, expired cache keys allowed 4,000 requests to hammer Postgres simultaneously—driving TTFB to 2,800ms before OOM crash.
// The Bad Site hit the database sequentially 38 times on every single visitor request:
app.get('/product', async (req, res) => {
res.setHeader('Cache-Control', 'no-store'); // Prevents CDN from helping!
const p = await db.query("SELECT * FROM products");
const r = await db.query("SELECT * FROM reviews");
// ... 36 more queries per request -> TTFB: 2800ms -> Pool exhaustion!
});How to Implement / Fix in 3 Practical Steps
Front your origin with Cloudflare or CloudFront and serve static assets with immutable 1-year hashes.
Configure public, s-maxage=60, stale-while-revalidate=3600 on read-heavy catalog APIs while keeping personalized checkout responses strictly private, no-store.
Add Redis single-flight mutexes and randomized TTL jitter (+/- 15%) to eliminate synchronized cache stampedes.
Audit Vary headers carefully so unnecessary cookies or User-Agent headers do not fragment edge cache hit ratios.
DevTools -> Network -> Select first document request -> Timing tab -> Check "Waiting for server response (TTFB)". Verify it is under 150ms.
Finished reading this lesson?
Mark it as mastered below, or click Next Lesson to auto-complete.