Start with measurement. Use Lighthouse CI, WebPageTest, and RUM through GA4 or an alternative. Track LCP, INP, CLS, TTFB, and first input delay proxies. Establish a performance budget per page type (e.g., <1800ms LCP on 4G) and fail builds that exceed it.
Ship less JavaScript. Prefer server rendering or static generation for marketing pages, defer non-essential scripts, and audit third-party tags quarterly. Tree-shake dependencies, replace heavy UI kits with smaller component sets, and compress images aggressively (AVIF/WebP, responsive srcsets, lazy-loading outside the viewport).
Optimize the critical path. Preload the hero image, primary font, and key route. Inline only the truly critical CSS; keep the rest cached and split by route. Minify, gzip/brotli everything, and use HTTP/2 or HTTP/3 on a CDN. Collapse layout shifts: set width/height on media, reserve space for embeds, and avoid late-loading banners.
Cache like you mean it. Long-cache static assets with content hashes. Use stale-while-revalidate for HTML when possible. Add edge caching for SSR pages where traffic is global. For APIs, use etags and conditional requests; push heavy computations to background jobs so pages stay lean.
Guard against regressions. Add performance tests to CI with thresholds. Run monthly dependency audits to catch bloat. Monitor INP specifically: reduce event handler work, break up long tasks with requestIdleCallback, and avoid heavy synchronous parsing. Measure real-user performance and prioritize fixes by user impact, not synthetic scores.
Security and reliability matter to speed. Enforce TLS 1.2+, HSTS, CSP, and SRI on third-party scripts. Keep error budgets for uptime; slow, failing origins ruin speed on retries. Finally, keep your design accessible: focus states, reduced motion preferences, and legible type improve perceived performance as much as raw milliseconds.
