What is Preload & Prefetch?
Resource hints that load critical files early or fetch likely-next files during idle time. Preload prioritizes fonts and hero assets for the current page, while prefetch warms the cache for routes the visitor may open next.
Related terms
Lazy Loading
Deferring below-the-fold images, video, and iframes until near the viewport. It trims initial page weight, the strongest lever on Core Web Vitals pass rates after server response.
font-display: swap
A font rendering rule that shows fallback text immediately and swaps in the webfont when ready. Swap avoids invisible text during font loads, trading a brief style shift for readable content from the first paint.
Largest Contentful Paint (LCP)
The Core Web Vital measuring when the main content element finishes rendering, ideally under 2.5 seconds. Hero images, web fonts, and slow server responses are the usual culprits.
SSR Per Request
Fresh HTML rendered on the server for every request, used for personalized or frequently changing pages. Server rendering guarantees complete markup on first paint but costs compute per visit, so reserve it for dynamic routes.
CSR Shell
A minimal HTML shell that renders content in the browser after JavaScript loads. Client rendering suits authenticated dashboards behind login, where SEO matters less and interactivity starts only after scripts execute.
Hydration Cost
The JavaScript work that turns server-rendered HTML into an interactive app. Hydration replays component logic in the browser, so oversized bundles delay input readiness even when paint looks instant.