Frontend Performance30-45 min
Preload vs Prefetch vs Preconnect
Choose preload for current-page critical resources, prefetch for likely future resources, and preconnect for high-priority third-party origins.
HTMLBrowser APIsNext.jsCDN
Prerequisites
- A page with fonts, images, API calls, or third-party resources.
- Access to edit document head metadata.
- Network waterfall measurements before changes.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm run preview
# Inspect initial requests in DevTools Network.Checklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- List critical resources required to render the first viewport.
- Add preload only for resources the current page must use immediately.
- Add preconnect for important third-party origins that are contacted early.
- Use prefetch for likely future routes or assets, not current critical render.
- Measure whether the hint improved the waterfall instead of adding noise.
Implementation snippet
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="prefetch" href="/pricing" as="document">4
Handle edge cases
Checklist
- Preload entries are consumed by the current page.
- Preconnect is limited to a small number of important origins.
- Prefetch is not used for large assets on slow user journeys.
- Resource hints do not cause lower-priority assets to outrank the hero experience.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.