LCP: the big thing appears
The key art arrives last
Shard Garden's web page opens with big key art: four friends defending a garden on a drifting shard. Priya's field data says phones wait 3.6 seconds for it.
Largest Contentful Paint (LCP) is the time until the biggest image or text block on screen is drawn. Good is 2.5 seconds or less, poor is over 4. To fix 3.6 seconds, we need to know which part of those seconds is slow.
What can be the LCP element
- ImagesAn
<img>, an image inside an SVG, a video, or an element with aurl()background image. - TextA block of text, like a big headline.
- IgnoredInvisible elements (opacity 0), elements covering the whole screen, which count as background, and blurry low-detail placeholders.
- It stops at the first tapOnce the player taps, scrolls or presses a key, the browser stops looking for a bigger element.
Quick check
Shard Garden's page has a game canvas, a "Play with friends" headline and the key art image. Which one can never be the LCP element?
- The game canvas
- The headline
- The key art image
Show the answer
The game canvas
A canvas is not on the list of LCP elements. Images, videos, background images and blocks of text are.
Four parts of LCP
- Time to First ByteUntil the first byte of the page arrives. Target: about 40% of LCP.
- Resource load delayFrom then until the browser starts downloading the image. Target: under 10%.
- Resource load durationDownloading the image itself. Target: about 40%.
- Element render delayFrom the image arriving to it being drawn. Target: under 10%.
The targets come from web.dev. Any part far above its share is the place to start.
Read the numbers
1Time to First Byte 6002Resource load delay 19003Resource load duration 8004Element render delay 3005---------------------------6LCP 3600
Which part is far over its target share?
- Resource load delay
- Time to First Byte
- Element render delay
Show the answer
Resource load delay
1,900 of 3,600 ms is about 53%, and the target is under 10%. The browser waits almost two seconds before it even starts downloading the key art.
Why the browser starts late
A long load delay means the browser found the image late or gave it low priority. Common causes:
- The image is set in CSS or JavaScript, so the browser only finds it after downloading those files.
- The image has
loading="lazy". web.dev says plainly: never lazy-load your LCP image.
Fixes: a real <img> in the HTML with fetchpriority="high". If the image must live in CSS, add <link rel="preload" as="image" fetchpriority="high"> so the browser starts it at once.
Bug hunt
1<h1>Shard Garden</h1>2<img src="key-art.avif"3 loading="lazy"4 width="1200" height="675"5 alt="Four friends">6<p>Defend a garden.</p>7<img src="badge.png"8 loading="lazy"9 width="160" height="48"10 alt="Get it on Play">
The key art is the LCP element, and the store badge sits at the bottom of the page. Which line should change?
- Line 1
- Line 3
- Line 8
Show the answer
Line 3
Line 3 lazy-loads the LCP image, so the browser waits before fetching it. It should say fetchpriority="high" instead. Lazy-loading the badge on line 8 is fine, because it is far down the page.
The other three parts
- Time to First ByteThe server and the network. It has its own lesson in this stage.
- Load durationA smaller file downloads faster: the right size for the screen, in a modern format like AVIF.
- Render delayThe image is here, but something must finish first, like a big script or a web font. Less work before the first paint shrinks it.
Quick check
Kai should add loading="lazy" to the key art so the rest of the page loads faster.
- True
- False
Show the answer
False
Lazy loading makes the browser wait before fetching the image. For the LCP element, that only adds resource load delay.
From looking to tapping
Fast key art gets players to the Play button. What happens next matters just as much: every tap in the garden has to answer quickly.
Bolt says: Next: INP, the number that measures every tap, click and key press.
Fact-checked 11 October 2026
- web.dev: Largest Contentful Paint (LCP) web.dev
- web.dev: Optimize Largest Contentful Paint web.dev