Performance Optimization and Deployment
Performance first: static by default, minimal JS, on-demand hydration, hashed assets with caching, and deploy on edge networks.
Performance essentials
- Zero-JS first paint: keep non-interactive content pure HTML.
- On-demand hydration: pick
client:*directives (idle/visible/media) wisely to reduce main-thread work. - Split islands: break large components into small islands to cut hydration cost.
- Asset hashing: fingerprint CSS/JS/images for long caching.
- Image optimization:
<Image />/@astrojs/imagefor multi-size WebP + lazy-loading. - Prefetch & chunking: route prefetch and code splitting to avoid big initial bundles.
Build and bundle size
- Inspect
dist/and watch JS size; drop client directives where not needed. - Use tools like
vite-bundle-visualizerto analyze deps.
Deployment strategy
- Static hosting: Cloudflare Pages/Netlify/Vercel with static output.
- Edge network: serve static assets via CDN/edge to cut latency.
- SSR/Functions: enable only for dynamic routes; keep stateless and cache where possible.
Monitoring and regression checks
- Core vitals: LCP, CLS, FID/INP; monitor with Lighthouse/PageSpeed.
- RUM: collect real-user perf and errors.
- Post-build automation: link checks and accessibility scans.***