Production bundle under 250KB gzipped for initial route
Why it matters
A JavaScript bundle over 250KB gzipped on the initial route directly punishes mobile users and anyone on a slower connection. ISO 25010:2011 time-behaviour is the formal hook, but the real-world impact is measured in seconds: Google's research shows that each additional second of load time increases bounce rate by up to 20%. An oversized initial bundle means users see a blank or non-interactive page while megabytes of JavaScript parse and execute — before a single product, article, or dashboard widget appears.
Severity rationale
Critical because an oversized initial bundle directly delays Time to Interactive, blocking all user activity until the browser finishes parsing and executing JavaScript — a failure visible to every first-time visitor.
Remediation
Run npx @next/bundle-analyzer or npx webpack-bundle-analyzer on your production build to identify the largest contributors. Replace heavy utility libraries (e.g., replace moment with date-fns, full lodash with lodash-es named imports). Move any route-specific code behind dynamic imports so it only loads when needed.
# Analyze your production build
NEXT_PUBLIC_BUNDLE_ANALYZE=true npm run build
# Or: npx source-map-explorer .next/static/chunks/*.js
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Performance Deep Dive Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
External references
- iso-25010:2011 · time-behaviour — Time Behaviour (performance efficiency)
- iso-25010:2011 · performance-efficiency.resource-utilization — Resource Utilisation (performance efficiency)
Taxons
History
- 2026-04-18·v1.0.0·Initial import from performance-deep-dive·automated