Ship the hero in server HTMLShip the hero in server HTML

Three ways to ship it

Press Reload, then drag the hydration delay.

export default function Page() {
  return (
    <section className="hero">
      <h1>Close the month in two days</h1>
      <p>Reconciled books, every month.</p>
      <SignupButton />
    </section>
  );
}

Keep motion, drop the delay

Press Replay. Only the left one starts invisible.

@keyframes hero-rise {
  from { transform: translateY(8px); }
}
.hero h1 { animation: hero-rise 300ms cubic-bezier(0.23, 1, 0.32, 1); }

@media (prefers-reduced-motion: reduce) {
  .hero h1 { animation: none; }
}

Is it in the response?

Type a headline and compare what View Source shows.

new PerformanceObserver((list) => {
  const last = list.getEntries().at(-1);
  console.log(last.element, Math.round(last.startTime), "ms");
}).observe({ type: "largest-contentful-paint", buffered: true });

Why it matters, pros and cons