Performance
Routing performance budgets through your pipeline
Keep builds fast by enforcing image, script, and CSS budgets in CI for Astro sites.
Modular Shift Team
Engineering
Why budgets matter
Budgets keep regressions out. Set guardrails for JS/CSS weight, image size, and third‑party scripts so performance doesn’t slip.
What to budget
- JavaScript: total JS per template and per island
- CSS: critical vs async; total size caps
- Images: max hero size, max card size, next‑gen formats required
- Third‑party: allowed list with size and load‑timing constraints
Implementation
- Measure in CI using Lighthouse CI (LHR JSON) or custom scripts
- Fail builds on regressions beyond thresholds
- Track trends over time and alert on drifts
Example thresholds
- Total JS < 150KB compressed on marketing templates
- Hero image < 200KB on mobile, AVIF/WebP only
- INP < 200ms on key pages (field data)
Conclusion
Make performance a release criterion, not a later fix. Budgets in CI keep teams honest and sites fast.
Want a starter config and thresholds tuned to your site? We can help.
Related posts
Performance
Core Web Vitals for Astro: practical fixes that stick
Real-world tactics to improve LCP, CLS, and INP on static-first sites without sacrificing UX.
Performance
From SSR to SSG: Why Astro Makes Sites Feel Instant
How static-first builds, islands, and smart hydration improve performance and maintainability for content-heavy sites.
