Deploy to Vercel

Domains, Caching and Performance

30 分

Custom domains

In Project → Settings → Domains, add your domain. Vercel shows the records to create (or you can use Vercel's nameservers). HTTPS certificates are automatic. Choose one canonical host (www or apex) and redirect the other.

How caching works

  • Static assets and pre-rendered pages are cached at the edge worldwide.
  • Pages with time-based revalidation are regenerated in the background after the interval, so users get fast cached pages that stay fresh.
  • On-demand revalidation refreshes specific pages when content changes (for example from a CMS webhook).
  • Personalised responses must not be cached publicly: mark them private, no-store or render them dynamically.

Images and fonts

Use the framework's image component for automatic resizing and modern formats, and self-hosted fonts to avoid layout shift. Image optimisation may count towards plan usage; size images sensibly at the source.

Measuring performance

Vercel's Speed Insights and Lighthouse report Core Web Vitals:

Metric Measures Good
LCP loading of the largest element ≤ 2.5 s
INP responsiveness to interactions ≤ 200 ms
CLS layout stability ≤ 0.1

Common fixes: prioritise the hero image, reserve space for images and embeds, reduce client-side JavaScript, and defer third-party scripts.

Exercise

Connect a domain with a canonical redirect, configure revalidation for a content page, and improve one page's LCP and CLS, recording the before/after Web Vitals.

Check yourself

  • What does time-based revalidation do?
  • Which responses must not be cached publicly?
  • What do LCP, INP and CLS measure?

進捗はこのブラウザーにのみ保存されます。

レビューに提出（10 ポイント）