Performance / Intermediate

Preload only the critical asset

Preload the hero image or primary font, but avoid turning preload into another bottleneck.

Why this matters

The production reason.

Preload tells the browser an asset is important before normal discovery would find it.

Use it for one true critical asset, such as a hero image or primary font file. Too many preloads compete with each other.

Wrong preloads can make performance worse by stealing bandwidth from CSS or route JavaScript.

Copy-ready example

<link
  rel="preload"
  as="image"
  href="/images/home-hero.webp"
  imagesrcset="/images/home-hero.webp 1x, /images/home-hero@2x.webp 2x"
  imagesizes="100vw"
/>

Platform notes.

How this applies outside a perfect demo, including frameworks, CMS platforms, stores, and builder workflows.

Next.js: Use priority on the hero Image instead of manual preload in most cases.

Fonts: Preload only the primary above-the-fold font weight.

Performance audits: Remove preloads that are not used immediately.

Explore other stacks

Jump into a different technology.

Move from this Performance note into related HTML, CSS, Next.js, JavaScript, React, WordPress, and performance lessons.

Next.js

Use generateStaticParams for dynamic routes

Pre-render dynamic pages at build time instead of on every request to cut TTFB.

React

Keep state close to the interaction

Local state avoids unnecessary parent renders and keeps component intent obvious.

JavaScript

Abort stale fetch requests

Cancel outdated browser requests so fast UI changes do not render old data.

CSS

Use clamp for fluid spacing

Fluid spacing keeps layouts responsive without a forest of breakpoint overrides.

WordPress

Escape output at the template edge

Sanitize on input, escape on output, and keep theme templates strict about user content.

HTML

Use real buttons for actions

If it changes state, use button. If it navigates, use a link.