Here's the situation
The main landing page measured an LCP of 3.8 seconds. A bit slow, right?
LCP is how long it takes for the largest element on screen to finish rendering. It's roughly the moment a visitor thinks "okay, I can see it now," so it maps closely to perceived speed. I used the largest-contentful-paint metric as the baseline and traced the bottleneck step by step.
How I fixed it
First I added priority to the hero image. That tells the browser "this one needs to arrive early."
Then I cleaned up the font preloads — we were preloading things we didn't need. From a critical-rendering-path point of view, the work was about removing resources that stand in the way of painting.
import Image from "next/image";
export function Hero() {
return <Image src="https://picsum.photos/seed/hero/1200/630" alt="Hero" width={1200} height={630} priority />;
}
The result
LCP came down to 2.1 seconds — 1.7 seconds off the original 3.8.
What I took away
Just prioritizing resources changed perceived speed dramatically. I didn't make any file smaller. I only changed the order things arrive in.
The browser has no idea what you want shown first. Tell it, and it'll do exactly that.