At a glance
- LCP has four parts: time to first byte, resource load delay, resource load duration and element render delay.
- web.dev suggests that most of the time should go to the server response and the image download, with the two delays kept under about 10% each.
- "Never lazy-load your LCP image", says web.dev; about 16% to 17% of pages still do, according to the 2025 Web Almanac.
- Set fetchpriority="high" on the likely LCP image, and on no more than one or two images.
Find the LCP element first
Before changing anything, find out which element is the LCP on each template and device. On a lobby it may be the hero banner on desktop and the first row of thumbnails on mobile, where the banner is shorter. On a sportsbook event page it is often a block of text, such as the event title, which changes the fix completely. Chrome DevTools shows the LCP element in the Performance panel, and Google's web-vitals library can report it from real visits with its attribution build.
Check more than one variant. Casino sites often personalize the hero by market, login state or campaign, so the LCP element for a logged-in player in Ontario may differ from the one a new visitor in the UK sees.
The four parts of LCP
web.dev splits every LCP time into four parts. Measuring each one tells you where to work.
| Part | What it covers | Guideline share | Common casino cause |
|---|---|---|---|
| Time to first byte | From the start of navigation until the first byte of HTML arrives | About 40% | Uncached, personalized lobby HTML; redirects for geolocation or login |
| Resource load delay | From first byte until the browser starts loading the LCP image | Under 10% | Banner injected by a carousel script, or lazy-loaded |
| Resource load duration | The download of the LCP image itself | About 40% | Oversized banner art, no modern format, no responsive sizes |
| Element render delay | From download until the element is painted | Under 10% | Render-blocking CSS and scripts, fonts, A/B testing scripts that hide the page |
web.dev calls these shares "guidelines, not strict rules" and warns against turning them into fixed time targets. They are useful for spotting which part is out of proportion.
Fixes for each part
Time to first byte
Serve the lobby shell from a cache or CDN where possible and personalize smaller parts after the first paint. Remove avoidable redirects, such as a redirect to a country path that could be decided at the edge. Our caching and delivery guide covers cache keys for market and language variants.
Resource load delay
Make the LCP image discoverable in the initial HTML as an <img> element, not as a CSS background or a slide created by script. If it can only be referenced from CSS or JavaScript, web.dev recommends preloading it with high fetch priority. Add fetchpriority="high" to the likely LCP image; web.dev notes that "setting a high priority on more than one or two images makes priority setting unhelpful".
Resource load duration
Size the banner for its slot with srcset and sizes, use a modern format such as AVIF or WebP where the quality holds, and compress it. The thumbnail guide has the details.
Element render delay
Keep render-blocking CSS small, defer scripts that are not needed for the first view and avoid scripts that hide the page until an experiment loads. A banner that has downloaded but waits for a carousel library to start is a render delay, not a download problem.
Video heroes and carousels
Once painted, the first frame of a video can count as an LCP candidate, says web.dev's video guide, so sites that rely on video should use a poster image or optimize the first frame. For carousels, give the first visible slide high priority and mark other slides low; web.dev's fetch priority article notes that lazy loading alone may not stop the browser from boosting offscreen slides. Our lobby guide covers carousels in more detail, and live video has its own guide.
Questions
Should the hero banner be lazy-loaded to save data?
No. If the banner is the LCP element, lazy loading delays it every time. web.dev says to use lazy loading only for images outside the initial viewport.
Can text be the LCP element?
Yes. LCP counts the largest image or text block in view. On text-heavy sportsbook or help pages, the heading or first paragraph is often the LCP, and fonts and render-blocking CSS matter more than images.
Why does my lab LCP look good while field LCP fails?
The lab tests one load on one device profile. Field data covers real devices, networks, logged-in states and cache states over 28 days. See field versus lab data.
Sources
- web.dev, Optimize Largest Contentful Paint, last updated March 31, 2025.
- web.dev, How the Core Web Vitals metrics thresholds were defined, last updated May 7, 2025.
- web.dev, Optimize resource loading with the Fetch Priority API, last updated November 14, 2023.
- web.dev, Browser-level image lazy loading for the web, last updated August 13, 2024.
- web.dev, Video performance, last updated April 2, 2026.
- HTTP Archive, Web Almanac 2025: Performance, published January 15, 2026.
- GoogleChrome, web-vitals library, no date shown.