Performance3 min read
Reducing JavaScript bundle size: find it, split it, delete it
Bundle size is the cost you pay on every visit, on every device. It is also the one performance metric that only ever grows unless someone owns it.
A performance budget is a set of enforced limits — bundle size, LCP, total page weight — that fail a build when exceeded. Choose two or three metrics that map to user experience, set thresholds slightly better than your current state, enforce them in CI on your key routes, and review them quarterly.
| Metric | Example budget | Enforced where |
|---|---|---|
| First-load JavaScript | ≤ 170 KB compressed | CI, per route |
| LCP (lab, throttled) | ≤ 2.5s | Lighthouse CI |
| Total page weight | ≤ 1 MB | CI |
| Third-party requests | ≤ 8 | CI or manual review |
| CLS | ≤ 0.05 | Lighthouse CI |
| TTFB (field) | ≤ 800ms at p75 | Monitoring alert |
Pick two or three to start. A budget that fails for six different reasons on the first pull request gets disabled by the end of the week.
- name: Lighthouse CI
run: lhci autorun
env:
LHCI_BUILD_CONTEXT__CURRENT_BRANCH: ${{ github.head_ref }}
# lighthouserc.json
# "assertions": {
# "categories:performance": ["error", { "minScore": 0.9 }],
# "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
# "cumulative-layout-shift": ["error", { "maxNumericValue": 0.05 }],
# "total-byte-weight": ["error", { "maxNumericValue": 1000000 }]
# }The point of a budget is not the number. It is that performance becomes a thing considered at design and review time, rather than a project someone runs after a bad quarter.
Set the budget at the current value first so nothing gets worse, then ratchet down on a schedule. A budget you fail immediately teaches the team to ignore it.
Yes. A marketing landing page and an interactive dashboard have legitimately different profiles. Same framework, different numbers.
Run multiple times and use the median, run on consistent runner hardware, and set thresholds with a small tolerance. Flaky performance checks get disabled quickly.
It is a rough proxy. Budget the underlying metrics — LCP, CLS, bytes — because they are actionable and stable, whereas the composite score shifts when the scoring formula changes.
ROVQIX Growth
SEO & growth team, ROVQIX
The ROVQIX growth team handles technical SEO, Core Web Vitals and AI-search visibility for the sites we build. Recommendations here are the ones we apply to client projects and to rovqix.in itself.
ROVQIXdesigns and builds production web platforms — Next.js front ends, Node.js APIs and the infrastructure behind them. Tell us what you're building and we'll scope it with you.
Bundle size is the cost you pay on every visit, on every device. It is also the one performance metric that only ever grows unless someone owns it.
A perfect Lighthouse score and failing Core Web Vitals is not a contradiction. They measure different things, and only one of them is your users.
A pipeline that takes 25 minutes and fails randomly does not improve quality. It teaches the team to merge on red.
No spam. Just the occasional case study and craft breakdown.