Where you render matters as much as how you render. Server-side rendering produces meaningful HTML before client-side JavaScript finishes, which improves LCP and SEO at the cost of hydration work on the client. Static-site generation pushes that further by precomputing pages at build time, so the server only needs to serve static HTML at request time. Incremental static regeneration blends the two by re-rendering stale pages on demand after a configurable period. Streaming SSR ships HTML chunks as soon as each is ready, and produces earlier LCP for slow connections. React Server Components run only on the server, ship no JavaScript for their output, and can drastically reduce bundle size when used for non-interactive parts of a page.
Where interactivity is concentrated in small pieces, the islands architecture renders mostly static HTML with independently hydrated interactive widgets. Partial hydration takes this further by only shipping JavaScript for components the user actually interacts with. Qwik extends the idea with resumability, serializing application state into HTML and deferring all JavaScript execution until the user interacts with the page, yielding near-zero upfront JS. The trade-off is complexity: each strategy requires careful thought about data fetching, caching, and hydration boundaries, and the cost of hydration for heavy pages should be measured explicitly before committing to one approach.
Tooling closes the loop between local work and production reality. Lighthouse gives a synthetic lab score across performance, accessibility, best practices, SEO, and PWA, simulating a slow 4G connection and a throttled CPU to approximate a mid-tier mobile. WebPageTest offers a gold-standard waterfall and filmstrip across many locations. CrUX, in contrast, is real-user data drawn from Chrome users in the field. Capturing both lab and field data is essential, because lab tests cannot reproduce device diversity, network variance, and the long tail of page states real users encounter. web-vitals.js is the standard lightweight library for sending Core Web Vitals to analytics, and commercial tools such as SpeedCurve, Calibre, and Treo combine synthetic and RUM with alerting against performance budgets.
Long-term performance is a continuous practice rather than a campaign. Setting a performance budget for bundle size, key metrics, and third-party weight, then failing CI when it is exceeded, catches regressions before they ship. Auditing third-party scripts quarterly is critical because they often dominate page weight and main-thread time outside the team's direct control, and outdated tags from marketing or analytics can linger for years. Self-hosting the most critical small third-party assets mirrors them to the origin for predictable cache behavior and version control. Service Workers and Workbox unlock offline-first behavior through strategies such as cache-first, network-first, and stale-while-revalidate, and the Beacon API lets analytics leave during unload without blocking navigation. The most reliable quick wins remain: compress images to AVIF or WebP, preconnect to critical origins, lazy-load below-the-fold media, code-split per route, defer non-critical JavaScript, inline critical CSS, and set proper long-lived cache headers on hashed assets. Combined with continuous monitoring, these habits make performance durable rather than accidental.