AfterOptimized — next/image, next/font, Server Components.
← HeroCompare /before →

Page 02 — Optimized

The fast
version.

next/image with explicit dimensions eliminates CLS. priority on the LCP image gets us to first paint instantly. The whole layout is a Server Component — zero client JS shipped for static UI.

Hero
Card 1

Card 1

lazy + sized

Card 2

Card 2

lazy + sized

Card 3

Card 3

lazy + sized

Card 4

Card 4

lazy + sized

Card 5

Card 5

lazy + sized

Card 6

Card 6

lazy + sized

Card 7

Card 7

lazy + sized

Card 8

Card 8

lazy + sized

Card 9

Card 9

lazy + sized

◆ Live measurement

Web Vitals — this page

0 / 5 metrics captured

Collecting metrics… interact with the page to trigger INP.

Compare with the unoptimized version →