Poradnik: Largest Contentful Paint (LCP)

TL;DR — Largest Contentful Paint (LCP) measures how long it takes dla the biggest thing on screen — zwykle a hero image lub a big blok of tekst — to pokazywać up po someone clicks to twój strona. poniżej 2,5 seconds jest good. It’s one of Google’s three Core Web Vitals, i it’s the one najbardziej witryny struggle z.

co LCP jest

The pierwszy impression people mieć of twój witryna jest how fast it appears to load. LCP tries to put a liczba on że. It measures the amount of time it takes to load the single largest visible element in the viewport — the part of the strona you może see bez scrolling.

że “largest element” jest zwykle one of two things:

• A big image — a hero banner, a produkt photo, a featured image.
• A big blok of tekst — common on artykuł strony że don’t lead z an image.

LCP jest the moment że element finishes renderowanie, measured z gdy the strona pierwszy started ładowanie. The lower the liczba, the faster twój strona feels.

The score

Google sorts LCP do three buckets:

• Good: 2,5 seconds lub mniej
• Needs improvement: 2,5 to 4 seconds
• Poor: więcej niż 4 seconds

You’re aiming dla że 2,5-second mark. i it’s judged on rzeczywisty visitors to twój witryna, nie a test you run once — so it’s the experience twój rzeczywisty odbiorcy gets on ich rzeczywisty phones i connections.

Why it może być trudny

LCP jest the Core Web Vital people struggle z the najbardziej. że’s ponieważ it ma the najbardziej moving parts: twój serwer ma to respond, the przeglądarka ma to find i download the image, i then it ma to actually paint it. A slowdown at dowolny of tamte kroki drags the whole liczba up. Compressing twój images jest a common pierwszy guess — i it czasami pomaga — ale it’s często nie the rzeczywisty bottleneck.

It’s również harder on mobilny than komputer stacjonarny, ponieważ phones mieć slower connections i mniej processing power.

co to robić pierwszy

Three quick wins że fix the najbardziej częste błędy:

1. Don’t lazy-load twój main image. “Lazy loading” tells the przeglądarka to wait przed pobieranie an image. że’s great dla stuff far down the strona — ale if you robić it to twój hero image, you’re deliberately delaying the najbardziej ważny thing on screen. Evidence for this claim An LCP image should not be lazy-loaded, and reducing resource load delay is a primary LCP optimization. Scope: web.dev guidance for image-based LCP elements. Confidence: high · Verified: 2026-07-14 web.dev: Optimize LCP
2. Tell the przeglądarka the main image jest ważny — there’s an atrybut (fetchpriority="high") że robi exactly że. Put it on the one image że’s actually twój LCP candidate; slapping it on several images dilutes the signal.
3. Speed up twój serwer. If twój serwer jest slow to respond, nothing else you robić matters much.

Want the pełny mental model — the four sub-parts of LCP, how to find twój LCP element, the renderowanie i font stuff, i how much ten actually matters dla rankings? Switch to the Advanced tab.

TL;DR — LCP jest the render time of the largest image lub tekst blok visible in the viewport, relative to gdy the strona started ładowanie. Good jest ≤ 2,5 s at the 75th percentile of rzeczywisty użytkownicy (split by urządzenie); 2,5–4 s needs działać, ponad 4 s jest poor. It’s one of three Core Web Vitals i breaks do four sub-parts — TTFB, zasób load opóźnienie, zasób load duration, element render opóźnienie — gdzie TTFB i load duration zwykle dominate (guidelines, nie fixed shares — diagnose twój own strona). Top fixes: nigdy lazy-load the LCP image, dodawać fetchpriority="high" on the rzeczywisty candidate, preload it gdy it isn’t in the HTML, kill blokujący renderowanie CSS/JS, i fix TTFB. It’s a pole metric — lab narzędzia tylko approximate it — i the LCP element może change podczas load. Google confirms Core Web Vitals feed ranking systemy ale doesn’t publikować an dokładny LCP weight lub call it a tiebreaker; treść relevance nadal dominates.

co LCP actually measures

LCP raporty the render time of the largest image lub tekst blok visible in the viewport, measured relative to gdy the użytkownik pierwszy navigated to the strona. Google’s own framing: it’s the closest standardized proxy dla gdy the main treść appears to the użytkownik. It replaced earlier, fuzzier metrics like pierwszy Meaningful Paint i Speed Index.

A kilka things że trip people up right away:

• It’s nie “page load time.” A strona może mieć każdy zasób fetched i nadal post a slow LCP if renderowanie the largest element był blocked. LCP jest o że one element, nie the whole strona.
• It’s nie the same as FCP. pierwszy Contentful Paint fires gdy dowolny treść pierwszy appears; LCP waits dla the largest element. A strona może mieć a fast FCP (the navbar paints) i a slow LCP (the hero image loads late).
• It’s a dynamiczny metric. The przeglądarka dispatches a new LCP candidate każdy time a larger element becomes visible. The ostatni entry przed the użytkownik interacts (tap, scroll, keypress) lub the strona unloads jest the wartość że counts — interaction często changes co’s visible, so reporting stops there. A candidate że’s later removed z the DOM doesn’t erase jego own entry — it stays the reported element unless a nadal-larger one renders przed reporting stops.

The thresholds — i why 2,5 seconds

Assessed at the 75th percentile of rzeczywisty-użytkownik strona loads, segmented by urządzenie type. So three out of four visits need to come in poniżej 2,5 s dla an origin to pass.

Why 2,5 specifically? Google’s threshold methodology leaned on two things: człowiek perception research pointing at roughly 1–3 seconds as the band że feels “immediate,” i CrUX achievability data showing 2,5 s był consistently achievable dla well-optimized witryny bez będąc trivially łatwy. Tighter targets like 1,5 s lub 2,0 s weren’t consistently achievable w całym enough origins, so they didn’t make the cut.

co counts as the LCP element

The element types considered dla LCP:

• <img> elementy
• <image> elementy inside an <svg>
• <video> elementy (the poster image load time, lub the pierwszy frame, whichever jest earlier)
• An element z a background image załadowany via the CSS url() function
• blok-level elementy containing tekst nodes lub other inline tekst children

The reported size jest co’s actually visible in the viewport — portions clipped lub scrolled off don’t count, i dla images it’s the visible size lub the intrinsic size, whichever jest smaller. Margins, padding, i borders są ignored. A handful of elementy get excluded by heuristics: anything z opacity: 0, elementy że cover the whole viewport (treated as backgrounds), i niski-entropy placeholder images.

o three-quarters of strony mieć an image as ich LCP element — so image działać jest zwykle the right pierwszy move. ale nie zawsze, i nie zawsze kompresja (więcej on że następny). The remaining chunk są tekst LCPs, gdzie the lever jest entirely różny: it’s font ładowanie, nie image weight.

The four sub-parts — the part najbardziej artykuły skip

ten jest the framework I’d start dowolny LCP diagnosis z. web.dev breaks LCP do four sequential sub-parts:

1. Time to pierwszy Byte (TTFB) — z gdy the użytkownik starts ładowanie the strona to gdy the przeglądarka receives the pierwszy byte of HTML. Typical share: ~40% of total LCP.
2. zasób load opóźnienie — the gap między TTFB i the przeglądarka starting to load the LCP zasób. ten jest discovery time. Typical share: poniżej 10%.
3. zasób load duration — how long the LCP zasób itself takes to download. Typical share: ~40%.
4. element render opóźnienie — z gdy the zasób finishes ładowanie to gdy the element actually paints. Typical share: poniżej 10%.

The principle behind the tabela: the vast majority of LCP time powinien być spent ładowanie the HTML document i the LCP zasób. dowolny stretch gdzie neither jest ładowanie jest an opportunity to poprawić.

web.dev jest explicit że te percentages są guidelines, nie strict reguły — don’t convert them do absolute-second targets, i don’t force każdy strona to match the split. They’re tylko meaningful relative to każdy other, i if twój LCP jest consistently w 2,5 seconds już, the relative proportions don’t matter at wszystkie. użyj tabela to spot który sub-part jest eating an outsized share on twój strona, then fix że one — nie to chase an dokładny 40/10/40/10 split.

i here’s the bit że upends the common assumption: as of February 2025 te four sub-parts są available in the CrUX API dla image LCPs, i the Chrome zespół’s analiza of HTTP Archive data found że image download time był często the smallest part of LCP time. In other words, “just compress my images” frequently fixes the błędny sub-part. TTFB i discovery opóźnienie są często the bigger levers.

How to find twój LCP element

przed you optimize anything, find out który element jest twój LCP i który sub-part jest the bottleneck:

• PageSpeed Insights — the Diagnostics sekcja flags the LCP element, i the pole-data tab pokazuje twój rzeczywisty-użytkownik score.
• Chrome DevTools — the wydajność panel marks the LCP node on the timeline.
• The web-vitals JS library — log LCP (i the element) z twój own rzeczywisty-użytkownik monitorowanie.

How to poprawić LCP

Map każdy fix to the sub-part it targets:

Fix zasób load opóźnienie (discovery). ten jest the highest-leverage i najbardziej commonly broken one.

• nigdy lazy-load twój LCP image. loading="lazy" on the LCP element zawsze dodaje unnecessary load opóźnienie. Reserve lazy ładowanie dla below-the-fold images.
• dodawać fetchpriority="high" to the prawdopodobny LCP image so the przeglądarka fetches it early at wysoki priority.
• Preload it z <link rel="preload"> gdy the image isn’t discoverable in the initial HTML — na przykład, gdy it’s załadowany via CSS lub JavaScript. ładowanie the hero image via JS jest an anti-pattern precisely ponieważ it hides the URL z the przeglądarka’s preload scanner.
• Host critical zasoby on the same origin so the przeglądarka doesn’t pay extra connection setup.

Preload i fetchpriority solve różny problems, so don’t reach dla oba by habit. Preload exposes a zasób the przeglądarka’s preload scanner by otherwise odkrywać late (a JS- lub CSS-załadowany image, na przykład); fetchpriority changes the fetch priority of a zasób the przeglądarka już found. If discovery i priority są już poprawny — the image jest a plain <img> in the initial HTML — adding either może robić little beyond extra żądania. sprawdzenie a trace, apply the one że matches the rzeczywisty problem, i confirm the pole liczba moved.

Fix element render opóźnienie.

• Reduce lub inline blokujący renderowanie CSS; defer non-critical styles.
• Avoid synchronous scripts in the <head>.
• Prefer serwer-side renderowanie lub statyczny generation so the znaczniki arrives ready to paint, i break up long main-thread tasks.

Reduce zasób load duration.

• Modern image formaty (WebP, AVIF), sensible kompresja, i a CDN.
• Efficient Cache-Control. i don’t ignore network contention — lazy-ładowanie the other below-fold images może free up przepustowość so the LCP image lands sooner.

Reduce TTFB.

• Minimize redirects, drop unnecessary unique parametry URL, i optimize serwer odpowiedź time. Note że LCP obejmuje dowolny unload time z the poprzedni strona, connection setup, i redirect time — wszystkie of który roll do TTFB.

Special case: tekst-oparty LCP. gdy the largest element jest tekst, the critical path jest font ładowanie, nie image weight. font-display: optional lub system fonts eliminate font-induced render opóźnienie; font-display: swap bez preloading the font file może introduce it.

Lab vs. pole — ten distinction matters

LCP jest fundamentally a pole metric. Google assesses it on rzeczywisty użytkownicy via CrUX, surfaced in PageSpeed Insights’ pole tab i the Search Console Core Web Vitals raport. że pole data jest co feeds rankings.

Lab narzędzia — Lighthouse, Chrome DevTools, WebPageTest — tylko approximate it poniżej simulated conditions, i they don’t even użyj same scoring. Lighthouse applies stricter komputer stacjonarny thresholds (Good ≤ 1,2 s) than the pole standard (≤ 2,5 s). So a passing Lighthouse score doesn’t guarantee a passing CrUX score, i vice versa. używać lab narzędzia to debug i reproduce; trust the pole data dla the rzeczywisty verdict.

There’s a second powód lab i pole liczby może diverge, worth knowing so an odd reading doesn’t wysyłać you chasing a phantom bug: the current LargestContentfulPaint przeglądarka API (nadal a W3C działający Draft) jest scoped to a single document load. It doesn’t itself reset on back/forward pamięć podręczna (bfcache) restores lub same-document SPA navigations, i strony że start off-screen — background tabs, prerendered strony — może raport inflated wartości ponieważ timing runs z load zamiast z gdy the strona actually became visible. The reporting algorithm również halts on qualifying użytkownik input, so if a użytkownik interacts przed twój main treść displays, LCP won’t capture it. None of ten changes the threshold tabela above; it wyjaśnia why a specific session’s liczba może look błędny gdy the underlying navigation isn’t a plain pierwszy load.

robi LCP affect rankings?

Yes, in the sense że Google confirms Core Web Vitals feed jego ranking systemy i recommends achieving good scores. ale current Search Central documentation doesn’t publikować an dokładny LCP weight i doesn’t describe it as a tiebreaker — Google’s own framing jest że strona experience “can contribute to success in Search” dla zapytania gdzie multiple strony już oferta comparable, relevant treść, i że a good score doesn’t guarantee a ranking boost. treść relevance i quality nadal dominate. Optimize LCP ponieważ a faster-feeling strona jest genuinely better dla użytkownicy (i conversions) — nie ponieważ the mechanism jest udokumentowany as a rankings tiebreaker, ponieważ it isn’t.

A couple of realities z the data: of the Core Web Vitals, LCP jest the one witryny struggle najbardziej to poprawić, i it’s noticeably harder on mobilny than komputer stacjonarny — slower CPUs i connections. On 3G i slower, the 2,5 s threshold może feel almost impossible to hit.

gdzie ten fits

LCP jest one of three Core Web Vitals, alongside Interaction to następny Paint i Cumulative Layout Shift. jego pierwszy sub-part, Time to pierwszy Byte, jest jego own diagnostic metric, i pierwszy Contentful Paint sits right następny to it on the ładowanie timeline. You’ll see wszystkie of te in PageSpeed Insights, Lighthouse, i the Chrome doświadczenie użytkownika raport (CrUX). każdy jest jego own deep dive in ten cluster.

AI summary

A condensed take on the Advanced version:

• LCP = render time of the largest visible image lub tekst blok, relative to gdy the strona started ładowanie. It’s the closest standardized proxy dla “when does the main content appear.”
• Thresholds: Good ≤ 2,5 s, Needs improvement 2,5–4 s, Poor > 4 s — at the 75th percentile of rzeczywisty użytkownicy, split by urządzenie. It’s one of three Core Web Vitals.
• nie strona-load time, nie FCP. FCP = pierwszy pixel of dowolny treść; LCP = the largest element. LCP jest również dynamiczny — the largest candidate może change podczas load; the ostatni one przed użytkownik interaction counts.
• LCP elementy: <img>, <image> in <svg>, <video> poster, CSS background-image: url(), lub a blok-level tekst element. ~3 in 4 strony mieć an image LCP; the rest są tekst (gdzie fonts, nie image weight, są the lever).
• Four sub-parts: TTFB (~40%), zasób load opóźnienie (<10%), zasób load duration (~40%), element render opóźnienie (<10%) — web.dev calls te guidelines, nie fixed shares; diagnose per strona zamiast chasing an dokładny split. CrUX 2025 data: image download jest często the smallest part — so “just compress images” często fixes the błędny thing.
• Top fixes: nigdy lazy-load the LCP image; dodawać fetchpriority="high" on the rzeczywisty candidate; preload it gdy it’s nie in the HTML (preload i fetchpriority solve różny problems — don’t reach dla oba by habit); cut blokujący renderowanie CSS/JS; reduce TTFB.
• pole, nie lab. CrUX/Search Console drive rankings; Lighthouse tylko approximates i używa stricter komputer stacjonarny thresholds (≤ 1,2 s). The current LargestContentfulPaint API jest scoped to document loads i doesn’t itself reset dla bfcache restores lub same-document SPA navigations.
• Rankings: Google confirms CWV feed ranking systemy ale publishes no dokładny LCP weight i doesn’t call it a tiebreaker; treść relevance nadal dominates. Hardest CWV to poprawić, i harder on mobilny.

Official documentation

Primary-źródło guidance z Google’s Chrome i Search zespoły.

web.dev (Chrome zespół)

• Largest Contentful Paint (LCP) — the canonical definition: co counts as an LCP element, how size jest calculated, gdy reporting stops, i the pomiar APIs.
• Optimize Largest Contentful Paint — the four sub-parts framework i the pełny optymalizacja playbook.
• Core Web Vitals — gdzie LCP sits among the three Core Web Vitals.
• How the Core Web Vitals metrics thresholds były defined — the research i achievability data behind the 2,5 s mark.

Chrome dla programiści

• LCP image subparts i RTT now available in CrUX — the Feb 2025 pole-data release of the four sub-parts (image LCPs tylko).
• Largest Contentful Paint | Lighthouse — the lab metric i jego urządzenie-specific scoring.

Google Search Central

• Understanding Core Web Vitals i Google wyniki wyszukiwania — how Core Web Vitals factor do Search.

cytaty z the źródło

On-the-record statements z Google’s documentation i zespół. każdy link jest a deep link że jumps to the quoted passage.

web.dev — definition i behavior (Philip Walton & Barry Pollard, Google)

• “LCP reports the render time of the largest image, text block, or video visible in the viewport, measured relative to when the user first navigated to the page.” Jump to cytat
• On co’s measured: “LCP doesn’t consider margins, paddings, or borders applied using CSS.” Jump to cytat
• On gdy reporting stops: “The browser will stop reporting new entries as soon as the user interacts with the page (via a tap, scroll, or keypress), as user interaction often changes what’s visible to the user.” Jump to cytat
• On co’s included in the timing: “It is important to note that LCP includes any unload time from the previous page, connection set up time, redirect time, and other Time To First Byte (TTFB) delays.” Jump to cytat

web.dev — optymalizacja (Philip Walton & Barry Pollard, Google)

• The single najbardziej ważny lazy-ładowanie reguła: “Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay.” Jump to cytat
• The principle behind the sub-part targets: “The vast majority of the LCP time should be spent loading the HTML document and LCP source.” Jump to cytat

Google Search Central — rankings

• “We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally.” (Relayed z the Search Central Core Web Vitals doc; confirm wobec the live strona przed treating as final.)

LCP fix checklist

działać it roughly top to bottom — discovery i TTFB pierwszy, ponieważ they’re zwykle the biggest, najbardziej commonly broken levers.

• Found the rzeczywisty LCP element (PageSpeed Insights Diagnostics, DevTools wydajność panel, lub the web-vitals library) — don’t optimize blind.
• Checked the four sub-parts to see który one jest the bottleneck przed changing anything.
• LCP image jest nie loading="lazy" (lazy ładowanie belongs below the fold tylko).
• LCP image ma fetchpriority="high".
• LCP image jest discoverable in the initial HTML — lub preloaded (<link rel="preload">) if it’s załadowany via CSS/JS.
• nie ładowanie the hero image via JavaScript (hides it z the preload scanner).
• blokujący renderowanie CSS minimized/inlined; non-critical styles deferred.
• No synchronous scripts in the <head>; long tasks broken up.
• Modern image format (WebP/AVIF), sensible kompresja, served via a CDN z good Cache-Control.
• Below-fold images lazy-załadowany so they don’t contend dla przepustowość z the LCP image.
• TTFB addressed: redirects minimized, serwer odpowiedź optimized, junk URL params dropped.
• tekst LCP? używając font-display: optional lub system fonts, i preloading dowolny swapped font file.
• Verified wobec pole data (CrUX / Search Console), nie just a Lighthouse lab run.

LCP cheat sheet

Thresholds (75th percentile of rzeczywisty użytkownicy, by urządzenie)

The four sub-parts — co każdy jest i the fix

co może być the LCP element

• <img> · <image> inside <svg> · <video> poster · CSS background-image: url() · blok-level tekst

Excluded by heuristic: opacity: 0, pełny-viewport “background” elementy, niski-entropy placeholders.

Fast fakty

• LCP jest a pole metric (CrUX / Search Console drive rankings); Lighthouse tylko approximates i używa a stricter komputer stacjonarny Good of ≤ 1,2 s.
• The LCP element może change podczas load; the ostatni candidate przed użytkownik interaction counts.
• ~3 in 4 strony mieć an image LCP; the rest są tekst (fonts są the lever).
• Image download time jest często the smallest sub-part — kompresja isn’t zawsze the answer.
• LCP ≠ FCP; LCP ≠ total strona load time.

narzędzia dla measuring i fixing LCP

pole data (co rankings używać)

• PageSpeed Insights — pole tab pokazuje twój rzeczywisty-użytkownik CrUX LCP; Diagnostics flags the LCP element.
• Search Console — Core Web Vitals raport — LCP status w całym twój URLs, grouped, on rzeczywisty-użytkownik data.
• Chrome doświadczenie użytkownika raport (CrUX) — the underlying pole dataset; as of Feb 2025 obejmuje the four image-LCP sub-parts via the API.
• web-vitals JS library — log LCP i the LCP element z twój own rzeczywisty-użytkownik monitorowanie.

Lab data (dla debugging)

• Lighthouse — quick lab LCP i an opportunities lista (remember: stricter komputer stacjonarny thresholds than the pole).
• Chrome DevTools — wydajność panel — marks the LCP node i the pełny render timeline.
• WebPageTest — waterfall view dla pinning down który sub-part jest slow.

SEO crawlers

• Ahrefs witryna Audit — surfaces Core Web Vitals / wydajność problemy w całym the witryna at scale.

How the narzędzia themselves score

A live przykład of the metric ten strona describes — well-znany strona-speed i monitorowanie services ranked on ich own rzeczywisty-użytkownik mobilny LCP (Chrome UX raport pole data):

LCP fixes że target the błędny problem

Lazy-ładowanie the hero image

loading="lazy" opóźnienia discovery of an above-the-fold image że jest prawdopodobny to become LCP. Load it eagerly, give the prawdopodobny candidate fetchpriority="high", i reserve lazy ładowanie dla below-the-fold images.

Compressing każdy image przed finding the bottleneck

Image download duration jest tylko one of four LCP sub-parts i może być the smallest. zidentyfikuj LCP element i inspect TTFB, load opóźnienie, load duration, i render opóźnienie przed choosing a fix.

ładowanie the hero przez JavaScript

A JS-injected image hides jego URL z the przeglądarka’s preload scanner i creates zasób load opóźnienie. Put the image in the initial HTML lub preload it gdy CSS lub JS musi own it.

Declaring victory z one Lighthouse run

Lighthouse jest a controlled diagnostic, podczas gdy Google’s CWV verdict comes z CrUX pole data. używać lab runs to verify the mechanism i wait dla rzeczywisty-użytkownik data to pokazywać whether the p75 outcome poprawiony.

The LCP zasób starts late

Symptom: a long gap appears między TTFB i the LCP zasób żądanie. prawdopodobny cause: lazy ładowanie, JS discovery, a CSS background image, lub niski fetch priority. Fix: make the zasób discoverable in initial HTML, remove lazy ładowanie, apply fetchpriority="high", lub preload it. Confirm the żądanie moves earlier in a trace.

The zasób loads ale LCP nadal fires late

Symptom: load duration ends well przed the LCP event. prawdopodobny cause: blokujący renderowanie CSS, synchronous JavaScript, a long task, lub font renderowanie dla a tekst LCP. Fix: reduce blocking działać i test font strategy dla tekst; confirm element render opóźnienie shrinks.

Lab LCP jest good ale pole LCP jest poor

Symptom: Lighthouse passes podczas gdy CrUX lub Search Console robi nie. prawdopodobny cause: rzeczywisty użytkownicy mieć różny urządzenia, networks, pamięć podręczna states, geography, lub LCP elementy. Fix: segment pole data, capture RUM element/sub-part details, i reproduce the slow segment zamiast tuning tylko the domyślny lab profile.

The reported LCP element changes między runs

Symptom: DevTools identifies różny images lub tekst bloki. prawdopodobny cause: responsive breakpoints, personalization, late DOM changes, lub competing candidates. Fix: test representative viewports i states, then optimize każdy recurring candidate zamiast assuming one komputer stacjonarny hero covers każdy użytkownik.

Hero image discovery: delayed vs early

A simplified delayed implementacja hides the image behind JavaScript:

<div id="hero"></div>
<script>
  document.querySelector('#hero').innerHTML = '<img src="hero.webp" alt="">';
</script>

The przeglądarka może odkrywać i prioritize ten version podczas gdy parsing HTML:

<img src="hero.webp" alt="" fetchpriority="high" width="1200" height="675">

CSS background image: undisclosed vs preloaded

gdy the LCP image musi pozostawać a CSS background, disclose it przed the stylesheet finishes:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

The preload tylko pomaga gdy jego URL i żądanie atrybuty match the rzeczywisty zasób.

lista recent LCP candidates in Chrome DevTools

Paste ten do the Chrome DevTools Console, reload the strona, i watch każdy candidate the przeglądarka raporty. The ostatni candidate przed interaction jest the relevant one.

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.table({
      lcp: Math.round(entry.startTime),
      element: entry.element?.tagName,
      url: entry.url || '',
      size: entry.size,
    });
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

Find prawdopodobny lazy-załadowany above-the-fold images

Run ten in the DevTools Console. It listy lazy images whose top edge begins in the current viewport; verify the rzeczywisty LCP candidate przed removing the atrybut.

[...document.querySelectorAll('img[loading="lazy"]')]
  .filter((img) => img.getBoundingClientRect().top < innerHeight)
  .map((img) => ({ src: img.currentSrc || img.src, top: img.getBoundingClientRect().top }));

Extract image priority atrybuty in a crawler

używać ten XPath in Screaming Frog custom extraction to zwracać images marked as wysoki priority:

//img[@fetchpriority='high']/@src

Prove an LCP fix landed

Discovery-order test

Test to run: record a DevTools wydajność trace po changing the hero image. Expected wynik: the LCP żądanie starts earlier i jest nie lazy-załadowany. awaria interpretation: the zasób pozostaje hidden, deprioritized, lub blocked behind another dependency. monitorowanie window: immediate lab wynik. Rollback trigger: the change opóźnienia another critical zasób lub makes lab LCP consistently worse.

Render-opóźnienie test

Test to run: porównaj LCP zasób completion i LCP event in equivalent przed/po traces. Expected wynik: element render opóźnienie shrinks bez a new layout lub visual regression. awaria interpretation: CSS, JavaScript, lub fonts nadal blok paint. monitorowanie window: immediate w całym representative viewports. Rollback trigger: broken renderowanie, missing styles, lub a worse recurring LCP.

pole-outcome test

Test to run: monitorować URL-level CrUX lub pierwszy-party RUM p75 LCP po deployment. Expected wynik: p75 moves toward lub pozostaje w the Good threshold bez regressing INP lub CLS. awaria interpretation: the lab case był nie representative lub another sub-part dominates rzeczywisty visits. monitorowanie window: RUM może lead; CrUX needs jego rolling 28-day window to turn ponad. Rollback trigger: a sustained pole regression tied to the release.

LCP metrics worth tracking

pole p75 LCP

Metric: LCP at the 75th percentile by form factor. co it tells you: whether rzeczywisty użytkownicy meet the Core Web Vitals ładowanie threshold. How to pull it: CrUX, Search Console, lub pierwszy-party RUM. Benchmark / realistic range: Good jest at lub below 2,5 seconds; segment mobilny i komputer stacjonarny. Cadence: weekly, z the CrUX rolling window recorded.

LCP sub-part distribution

Metric: TTFB, zasób load opóźnienie, load duration, i element render opóźnienie dla LCP. co it tells you: który stage owns the wait. How to pull it: representative lab traces i image-LCP subparts z CrUX/RUM gdzie available. Benchmark / realistic range: użyj artykuł’s approximate 40/10/40/10 diagnostic split as a poradnik, nie a universal wydajność promise. Cadence: po template releases i monthly dla priority templates.

Good-LCP URL coverage

Metric: ważny URL groups z Good pole LCP. co it tells you: whether improvement jest broad lub limited to a sample strona. How to pull it: Search Console CWV groups plus URL-level CrUX dla priority strony. Benchmark / realistic range: establish a baseline by template; niski-ruch URLs może lack individual pole data. Cadence: weekly.

Test yourself: Largest Contentful Paint

Five quick questions on LCP pomiar i diagnosis. Pick an answer dla każdy, then sprawdzenie.

zasoby worth twój time

My powiązany writing

• co jest Largest Contentful Paint (LCP) & How To poprawić It — my pełny LCP poradnik on the Ahrefs blog.
• co są Core Web Vitals (CWVs) & How To poprawić Them — how LCP fits z INP i CLS, i why it’s the hardest to fix.
• The Beginner’s poradnik to techniczne SEO — gdzie strona wydajność sits in the bigger picture.

Official (Google / Chrome)

• Largest Contentful Paint (LCP) i Optimize LCP — the canonical pair.
• How CWV thresholds były defined — the why behind 2,5 s.

z others

• Fix twój website’s Largest Contentful Paint by optimizing image ładowanie — MDN’s programista-pierwszy take, strong on przepustowość contention i the JS-image anti-pattern.
• wydajność — 2025 Web Almanac — HTTP Archive’s annual deep-dive; źródło dla adoption stats on fetchpriority, preload usage, image vs tekst LCP splits, i pass rates by urządzenie.
• Largest Contentful Paint (LCP) — DebugBear’s docs cover waterfall analiza dla pinpointing sub-parts, progressive JPEG caveats, i iframe/soft-navigation edge cases.
• Largest Contentful Paint (LCP): co It jest, How to mierzyć & Optimize — corewebvitals.io; rzeczywisty RUM benchmarks, firma impact case studies (Vodafone Italy), i the Google Flights fetchpriority wynik.
• Largest Contentful Paint | MDN Web Docs — MDN reference dla the LargestContentfulPaint API, element types, i przeglądarka compatibility.

Stats worth citing

• LCP jest the hardest Core Web Vital to pass. It ma the najbardziej components, który jest why witryny struggle z it więcej niż INP lub CLS. źródło
• mobilny jest harder than komputer stacjonarny. Slower CPUs i connections push LCP up, i on 3G/slow connections the 2,5 s threshold jest nearly impossible to hit. źródło
• Image download time jest często the smallest part of LCP. Chrome’s analiza of HTTP Archive data found download duration frequently isn’t the bottleneck — TTFB i discovery opóźnienie zwykle są. źródło
• CrUX coverage jest thin. In nasz study of 42 million strony, tylko ~11,4% miał associated CrUX pole data — najbardziej strony don’t get enough rzeczywisty-użytkownik ruch to być measured. źródło
• 62% of mobilny strony vs 74% of komputer stacjonarny strony achieve Good LCP (2025 Web Almanac). The mobilny gap reflects slower CPUs i network connections. źródło
• tylko 2,1% of mobilny strony preload ich LCP image, despite 76% having an image as ich LCP element — a significant missed optymalizacja opportunity (2025 Web Almanac). źródło
• fetchpriority="high" adoption grew z 0,03% of mobilny witryny in 2022 to 17,3% in 2025, largely driven by WordPress core adding it (2025 Web Almanac). Google Flights saw a 700 ms LCP improvement z ten single atrybut. źródło

Videos

• Google Search Central (YouTube) — the Core Web Vitals i strona-experience explainers, w tym Chrome zespół walkthroughs of LCP optymalizacja. Channel

Dziennik zmian