Panduan Largest Contentful Paint (LCP)

TL;DR — Largest Contentful Paint (LCP) measures how panjang ini takes untuk biggest thing pada screen — biasanya sebuah hero image atau sebuah big block dari text — untuk tampilkan up setelah someone clicks untuk Anda halaman. di bawah 2,5 seconds adalah baik. ini adalah one dari Google’s three Core Web Vitals, dan ini adalah one sebagian besar situs struggle dengan.

What LCP adalah

pertama impression people memiliki dari Anda situs adalah how fast ini appears untuk muat. LCP tries untuk put sebuah angka pada itu. ini measures amount dari time ini takes untuk muat single largest terlihat element di viewport — bagian dari halaman Anda dapat see without scrolling.

itu “largest element” (terjemahan) “largest element” adalah biasanya one dari two things:

• sebuah big image — sebuah hero banner, sebuah product photo, sebuah featured image.
• sebuah big block dari text — umum pada artikel halaman itu don’t lead dengan sebuah image.

LCP adalah moment itu element finishes rendering, diukur dari when halaman pertama started memuat. lower angka, faster Anda halaman feels.

score

Google sorts LCP ke three buckets:

• baik: 2,5 seconds atau less
• perlu improvement: 2,5 untuk 4 seconds
• Poor: more daripada 4 seconds

Anda’re aiming untuk itu 2,5-kedua mark. dan ini adalah judged pada nyata pengunjung untuk Anda situs, not sebuah test Anda run once — so ini adalah experience Anda actual audience gets pada mereka actual phones dan connections.

Why ini dapat menjadi hard

LCP adalah Core Web Vital people struggle dengan paling. itu’s because ini memiliki sebagian besar moving bagian: Anda server memiliki untuk respond, browser memiliki untuk temukan dan download image, dan lalu ini memiliki untuk actually paint ini. sebuah slowdown di apa pun dari itu langkah drags whole angka up. Compressing Anda images adalah sebuah umum pertama guess — dan ini sometimes helps — tetapi ini adalah sering not nyata bottleneck.

ini adalah juga harder pada mobile daripada desktop, because phones memiliki slower connections dan less processing power.

What untuk melakukan pertama

Three quick wins itu fix paling umum mistakes:

1. Don’t lazy-muat Anda main image. “Lazy loading” (terjemahan) “Lazy memuat” tells browser untuk wait sebelum fetching sebuah image. itu’s great untuk stuff far down halaman — tetapi jika Anda melakukan ini untuk Anda hero image, Anda’re deliberately delaying paling penting thing pada screen.

2. Tell browser main image adalah penting — there’s sebuah attribute (fetchpriority="high") itu melakukan exactly itu. Put ini pada one image itu’s actually Anda LCP candidate; slapping ini pada several images dilutes signal.
3. Speed up Anda server. jika Anda server adalah slow untuk respond, nothing else Anda melakukan penting much.

ingin full mental model — four sub-bagian dari LCP, cara temukan Anda LCP element, rendering dan font stuff, dan how much ini actually penting untuk rankings? Switch untuk Advanced tab.

TL;DR — LCP adalah render time dari largest image atau text block terlihat di viewport, relative untuk when halaman started memuat. baik adalah ≤ 2,5 s di 75th percentile dari pengguna nyata (split oleh device); 2,5–4 s perlu berfungsi, di atas 4 s adalah poor. ini adalah one dari three Core Web Vitals dan breaks ke four sub-bagian — TTFB, resource muat delay, resource muat duration, element render delay — where TTFB dan muat duration biasanya dominate (guidelines, not fixed shares — diagnose Anda own halaman). Top fixes: tidak pernah lazy-muat LCP image, tambahkan fetchpriority="high" pada actual candidate, preload ini when ini isn’t di HTML, kill render-blocking CSS/JS, dan fix TTFB. ini adalah sebuah field metric — lab alat hanya approximate ini — dan LCP element dapat perubahan selama muat. Google confirms Core Web Vitals feed peringkat sistem tetapi doesn’t publish sebuah exact LCP weight atau panggil ini sebuah tiebreaker; konten relevance masih dominates.

What LCP actually measures

LCP reports render time dari largest image atau text block terlihat di viewport, diukur relative untuk when pengguna pertama navigated untuk halaman. Google’s own framing: ini adalah closest standardized proxy untuk when main konten appears untuk pengguna. ini replaced earlier, fuzzier metrics like pertama Meaningful Paint dan Speed indeks.

sebuah few things itu trip people up right away:

• ini adalah not “page load time.” (terjemahan) “pemuatan halaman time.” sebuah halaman dapat memiliki setiap resource fetched dan masih post sebuah slow LCP jika rendering largest element adalah blocked. LCP adalah tentang itu one element, not whole halaman.
• ini adalah not yang sama sebagai FCP. pertama Contentful Paint fires when apa pun konten pertama appears; LCP waits untuk largest element. sebuah halaman dapat memiliki sebuah fast FCP ( navbar paints) dan sebuah slow LCP ( hero image memuat late).
• ini adalah sebuah dynamic metric. browser dispatches sebuah baru LCP candidate setiap time sebuah larger element becomes terlihat. last entry sebelum pengguna interacts (tap, scroll, keypress) atau halaman unloads adalah nilai itu counts — interaction sering perubahan what’s terlihat, so reporting stops there. sebuah candidate itu’s later dihapus dari DOM doesn’t erase -nya own entry — ini stays reported element unless sebuah masih-larger one renders sebelum reporting stops.

thresholds — dan why 2,5 seconds

Assessed di 75th percentile dari nyata-pengguna halaman memuat, segmented oleh device jenis. So three out dari four visits perlu untuk come di di bawah 2,5 s untuk sebuah origin untuk pass.

Why 2,5 specifically? Google’s threshold methodology leaned pada two things: human perception research pointing di roughly 1–3 seconds sebagai band itu feels “immediate,” (terjemahan) “immediate,” dan CrUX achievability data showing 2,5 s adalah consistently achievable untuk well-dioptimalkan situs without menjadi trivially easy. Tighter targets like 1,5 s atau 2,0 s weren’t consistently achievable di seluruh enough origins, so mereka didn’t membuat cut.

What counts sebagai LCP element

element jenis considered untuk LCP:

• <img> elements
• <image> elements inside sebuah <svg>
• <video> elements ( poster image muat time, atau pertama frame, whichever adalah earlier)
• sebuah element dengan sebuah background image dimuat via CSS url() function
• Block-tingkat elements containing text nodes atau lainnya inline text children

reported size adalah what’s actually terlihat di viewport — portions clipped atau scrolled off don’t count, dan untuk images ini adalah terlihat size atau intrinsic size, whichever adalah smaller. Margins, padding, dan borders adalah ignored. sebuah handful dari elements get excluded oleh heuristics: anything dengan opacity: 0, elements itu cover whole viewport (treated sebagai backgrounds), dan rendah-entropy placeholder images.

tentang three-quarters dari halaman memiliki sebuah image sebagai mereka LCP element — so image berfungsi adalah biasanya right pertama move. tetapi not selalu, dan not selalu compression (more pada itu next). remaining chunk adalah text LCPs, where lever adalah entirely berbeda: ini adalah font memuat, not image weight.

four sub-bagian — bagian sebagian besar artikel skip

ini adalah framework I’d start apa pun LCP diagnosis dengan. web.dev breaks LCP ke four sequential sub-bagian:

1. Time untuk pertama Byte (TTFB) — dari when pengguna starts memuat halaman untuk when browser menerima pertama byte dari HTML. Typical share: ~40% dari total LCP.
2. Resource muat delay — gap antara TTFB dan browser starting untuk muat LCP resource. ini adalah penemuan time. Typical share: di bawah 10%.
3. Resource muat duration — how panjang LCP resource itself takes untuk download. Typical share: ~40%.
4. Element render delay — dari when resource finishes memuat untuk when element actually paints. Typical share: di bawah 10%.

principle behind table: vast majority dari LCP time seharusnya menjadi spent memuat HTML document dan LCP resource. apa pun stretch where neither adalah memuat adalah sebuah opportunity untuk meningkatkan.

web.dev adalah explicit itu ini percentages adalah guidelines, not strict aturan — don’t convert them ke absolute-kedua targets, dan don’t force setiap halaman untuk match split. mereka’re hanya meaningful relative untuk setiap lainnya, dan jika Anda LCP adalah consistently di dalam 2,5 seconds sudah, relative proportions don’t penting di semua. gunakan table untuk spot which sub-bagian adalah eating sebuah outsized share pada Anda halaman, lalu fix itu one — not untuk chase sebuah exact 40/10/40/10 split.

dan here’s bit itu upends umum assumption: sebagai dari February 2025 ini four sub-bagian adalah available di CrUX API untuk image LCPs, dan Chrome team’s analysis dari HTTP Archive data ditemukan itu image download time adalah sering smallest bagian dari LCP time. dengan kata lain, “just compress my images” (terjemahan) “hanya compress my images” frequently fixes wrong sub-bagian. TTFB dan penemuan delay adalah sering bigger levers.

cara temukan Anda LCP element

sebelum Anda mengoptimalkan anything, cari tahu which element adalah Anda LCP dan which sub-bagian adalah bottleneck:

• PageSpeed Insights — Diagnostics bagian flags LCP element, dan field-data tab menampilkan Anda nyata-pengguna score.
• Chrome DevTools — performa panel marks LCP node pada timeline.
• ** web-vitals JS library** — log LCP (dan element) dari Anda own nyata-pengguna monitoring.

cara meningkatkan LCP

Map setiap fix untuk sub-bagian ini targets:

Fix resource muat delay (penemuan). ini adalah highest-leverage dan sebagian besar commonly broken one.

• tidak pernah lazy-muat Anda LCP image. loading="lazy" pada LCP element selalu menambahkan unnecessary muat delay. Reserve lazy memuat untuk below—fold images.
• tambahkan fetchpriority="high" untuk mungkin LCP image so browser fetches ini early di tinggi priority.
• Preload ini dengan <link rel="preload"> when image isn’t discoverable di initial HTML — misalnya, when ini adalah dimuat via CSS atau JavaScript. memuat hero image via JS adalah sebuah anti-pattern precisely because ini hides URL dari browser’s preload scanner.
• Host critical resources pada yang sama origin so browser doesn’t pay extra connection setup.

Preload dan fetchpriority solve berbeda masalah, so don’t reach untuk both oleh habit. Preload exposes sebuah resource browser’s preload scanner akan otherwise menemukan late (sebuah JS- atau CSS-dimuat image, misalnya); fetchpriority perubahan fetch priority dari sebuah resource browser sudah ditemukan. jika penemuan dan priority adalah sudah correct — image adalah sebuah plain <img> di initial HTML — menambahkan either dapat melakukan little beyond extra permintaan. periksa sebuah trace, apply one itu matches actual masalah, dan confirm field angka moved.

Fix element render delay.

• Reduce atau inline render-blocking CSS; defer non-critical styles.
• hindari synchronous scripts di <head>.
• Prefer rendering sisi server atau static generation so markup arrives ready untuk paint, dan break up panjang main-thread tasks.

Reduce resource muat duration.

• Modern image formats (WebP, AVIF), sensible compression, dan sebuah CDN.
• Efficient Cache-Control. dan don’t ignore network contention — lazy-memuat lainnya below-fold images dapat free up bandwidth so LCP image lands sooner.

Reduce TTFB.

• Minimize redirects, drop unnecessary unique parameter URL, dan mengoptimalkan server respons time. Note itu LCP mencakup apa pun unload time dari previous halaman, connection setup, dan redirect time — semua dari which roll ke TTFB.

Special case: text-based LCP. When largest element adalah text, critical path adalah font memuat, not image weight. font-display: optional atau sistem fonts eliminate font-induced render delay; font-display: swap without preloading font file dapat introduce ini.

Lab vs. field — ini distinction penting

LCP adalah fundamentally sebuah field metric. Google assesses ini pada pengguna nyata via CrUX, surfaced di PageSpeed Insights’ field tab dan Search Console Core Web Vitals report. itu data lapangan adalah what feeds rankings.

Lab alat — Lighthouse, Chrome DevTools, WebPageTest — hanya approximate ini di bawah simulated conditions, dan mereka don’t bahkan gunakan yang sama scoring. Lighthouse applies stricter desktop thresholds (baik ≤ 1,2 s) daripada field standard (≤ 2,5 s). So sebuah passing Lighthouse score doesn’t guarantee sebuah passing CrUX score, dan vice versa. gunakan lab alat untuk debug dan reproduce; trust data lapangan untuk actual verdict.

There’s sebuah kedua alasan lab dan field angka dapat diverge, worth knowing so sebuah odd reading doesn’t kirim Anda chasing sebuah phantom bug: saat ini LargestContentfulPaint browser API (masih sebuah W3C berfungsi Draft) adalah scoped untuk sebuah single document muat. ini doesn’t itself reset pada back/forward cache (bfcache) restores atau sama-document SPA navigations, dan halaman itu start off-screen — background tabs, prerendered halaman — dapat report inflated nilai because timing runs dari muat alih-alih dari when halaman actually became terlihat. reporting algorithm juga halts pada qualifying pengguna input, so jika sebuah pengguna interacts sebelum Anda main konten displays, LCP won’t capture ini. None dari ini perubahan threshold table above; ini menjelaskan why sebuah spesifik session’s angka dapat look wrong when underlying navigation isn’t sebuah plain pertama muat.

melakukan LCP affect rankings?

Yes, di sense itu Google confirms Core Web Vitals feed -nya peringkat sistem dan recommends achieving baik scores. tetapi saat ini Search Central documentation doesn’t publish sebuah exact LCP weight dan doesn’t describe ini sebagai sebuah tiebreaker — Google’s own framing adalah itu pengalaman halaman “can contribute to success in Search” (terjemahan) “dapat contribute untuk success di Search” untuk kueri where multiple halaman sudah offer comparable, relevant konten, dan itu sebuah baik score doesn’t guarantee sebuah peringkat boost. konten relevance dan quality masih dominate. mengoptimalkan LCP because sebuah faster-feeling halaman adalah genuinely better untuk pengguna (dan conversions) — not because mechanism adalah documented sebagai sebuah rankings tiebreaker, because ini isn’t.

sebuah couple dari realities dari data: dari Core Web Vitals, LCP adalah one situs struggle sebagian besar untuk meningkatkan, dan ini adalah noticeably harder pada mobile daripada desktop — slower CPUs dan connections. pada 3G dan slower, 2,5 s threshold dapat feel almost impossible untuk hit.

Where ini fits

LCP adalah one dari three Core Web Vitals, alongside Interaction untuk Next Paint dan Cumulative Layout Shift. -nya pertama sub-bagian, Time untuk pertama Byte, adalah -nya own diagnostic metric, dan pertama Contentful Paint sits right next untuk ini pada memuat timeline. Anda’ll see semua dari ini di PageSpeed Insights, Lighthouse, dan Chrome pengguna Experience Report (CrUX). setiap adalah -nya own deep dive di ini cluster.

AI summary

sebuah condensed take pada Advanced versi:

• LCP = render time dari largest terlihat image atau text block, relative untuk when halaman started memuat. ini adalah closest standardized proxy untuk “when does the main content appear.” (terjemahan) “when melakukan main konten appear.”
• Thresholds: baik ≤ 2,5 s, perlu improvement 2,5–4 s, Poor > 4 s — di 75th percentile dari pengguna nyata, split oleh device. ini adalah one dari three Core Web Vitals.
• Not halaman-muat time, not FCP. FCP = pertama pixel dari apa pun konten; LCP = largest element. LCP adalah juga dynamic — largest candidate dapat perubahan selama muat; last one sebelum pengguna interaction counts.
• LCP elements: <img>, <image> di <svg>, <video> poster, CSS background-image: url(), atau sebuah block-tingkat text element. ~3 di 4 halaman memiliki sebuah image LCP; rest adalah text (where fonts, not image weight, adalah lever).
• Four sub-bagian: TTFB (~40%), resource muat delay (<10%), resource muat duration (~40%), element render delay (<10%) — web.dev panggilan ini guidelines, not fixed shares; diagnose per halaman alih-alih chasing sebuah exact split. CrUX 2025 data: image download adalah sering smallest bagian — so “just compress images” (terjemahan) “hanya compress images” sering fixes wrong thing.
• Top fixes: tidak pernah lazy-muat LCP image; tambahkan fetchpriority="high" pada actual candidate; preload ini when ini adalah not di HTML (preload dan fetchpriority solve berbeda masalah — don’t reach untuk both oleh habit); cut render-blocking CSS/JS; reduce TTFB.
• Field, not lab. CrUX/Search Console drive rankings; Lighthouse hanya approximates dan menggunakan stricter desktop thresholds (≤ 1,2 s). saat ini LargestContentfulPaint API adalah scoped untuk document memuat dan doesn’t itself reset untuk bfcache restores atau sama-document SPA navigations.
• Rankings: Google confirms CWV feed peringkat sistem tetapi publishes no exact LCP weight dan doesn’t panggil ini sebuah tiebreaker; konten relevance masih dominates. Hardest CWV untuk meningkatkan, dan harder pada mobile.

Official documentation

Primary-source guidance dari Google’s Chrome dan Search teams.

web.dev (Chrome team)

• Largest Contentful Paint (LCP) — canonical definition: what counts sebagai sebuah LCP element, how size adalah calculated, when reporting stops, dan pengukuran APIs.
• mengoptimalkan Largest Contentful Paint — four sub-bagian framework dan full optimization playbook.
• Core Web Vitals — where LCP sits among three Core Web Vitals.
• How Core Web Vitals metrics thresholds adalah defined — research dan achievability data behind 2,5 s mark.

Chrome untuk Developers

• LCP image subparts dan RTT now available di CrUX — Feb 2025 field-data release dari four sub-bagian (image LCPs hanya).
• Largest Contentful Paint | Lighthouse — lab metric dan -nya device-spesifik scoring.

Google Search Central

• Understanding Core Web Vitals dan Google hasil pencarian — how Core Web Vitals factor ke Search.

Quotes dari source

pada—record statements dari Google’s documentation dan team. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage.

web.dev — definition dan perilaku (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.” (terjemahan) “LCP reports render time dari largest image, text block, atau video terlihat di viewport, diukur relative untuk when pengguna pertama navigated untuk halaman.” Jump untuk quote
• pada what’s diukur: “LCP doesn’t consider margins, paddings, or borders applied using CSS.” (terjemahan) “LCP doesn’t pertimbangkan margins, paddings, atau borders applied menggunakan CSS.” Jump untuk quote
• pada when 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.” (terjemahan) “ browser akan stop reporting baru entries segera setelah pengguna interacts dengan halaman (via sebuah tap, scroll, atau keypress), sebagai pengguna interaction sering perubahan what’s terlihat untuk pengguna.” Jump untuk quote
• pada what’s disertakan di 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.” (terjemahan) “ini adalah penting untuk note itu LCP mencakup apa pun unload time dari previous halaman, connection siapkan time, redirect time, dan lainnya Time untuk pertama Byte (TTFB) delays.” Jump untuk quote

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

• single sebagian besar penting lazy-memuat aturan: “Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay.” (terjemahan) “tidak pernah lazy-muat Anda LCP image, sebagai itu akan selalu lead untuk unnecessary resource muat delay.” Jump untuk quote
• principle behind sub-bagian targets: “The vast majority of the LCP time should be spent loading the HTML document and LCP source.” (terjemahan) “ vast majority dari LCP time seharusnya menjadi spent memuat HTML document dan LCP source.” Jump untuk quote

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.” (terjemahan) “kami highly recommend situs owners achieve baik Core Web Vitals untuk success dengan Search dan untuk ensure sebuah great pengguna experience umumnya.” (Relayed dari Search Central Core Web Vitals doc; confirm terhadap live halaman sebelum treating sebagai akhir.)

LCP fix checklist

berfungsi ini roughly top untuk bottom — penemuan dan TTFB pertama, because mereka’re biasanya biggest, sebagian besar commonly broken levers.

• ditemukan actual LCP element (PageSpeed Insights Diagnostics, DevTools performa panel, atau web-vitals library) — don’t mengoptimalkan blind.
• diperiksa four sub-bagian untuk see which one adalah bottleneck sebelum changing anything.
• LCP image adalah not loading="lazy" (lazy memuat belongs below fold hanya).
• LCP image memiliki fetchpriority="high".
• LCP image adalah discoverable di initial HTML — atau preloaded (<link rel="preload">) jika ini adalah dimuat via CSS/JS.
• Not memuat hero image via JavaScript (hides ini dari preload scanner).
• Render-blocking CSS minimized/inlined; non-critical styles deferred.
• No synchronous scripts di <head>; panjang tasks broken up.
• Modern image format (WebP/AVIF), sensible compression, disajikan via sebuah CDN dengan baik Cache-Control.
• Below-fold images lazy-dimuat so mereka don’t contend untuk bandwidth dengan LCP image.
• TTFB addressed: redirects minimized, server respons dioptimalkan, junk URL params dropped.
• Text LCP? menggunakan font-display: optional atau sistem fonts, dan preloading apa pun swapped font file.
• Verified terhadap data lapangan (CrUX / Search Console), not hanya sebuah Lighthouse lab run.

LCP cheat sheet

Thresholds (75th percentile dari pengguna nyata, oleh device)

** four sub-bagian — what setiap adalah dan fix**

What dapat menjadi LCP element

• <img> · <image> inside <svg> · <video> poster · CSS background-image: url() · block-tingkat text

Excluded oleh heuristic: opacity: 0, full-viewport “background” (terjemahan) “background” elements, rendah-entropy placeholders.

Fast facts

• LCP adalah sebuah field metric (CrUX / Search Console drive rankings); Lighthouse hanya approximates dan menggunakan sebuah stricter desktop baik dari ≤ 1,2 s.
• LCP element dapat perubahan selama muat; last candidate sebelum pengguna interaction counts.
• ~3 di 4 halaman memiliki sebuah image LCP; rest adalah text (fonts adalah lever).
• Image download time adalah sering smallest sub-bagian — compression isn’t selalu jawaban.
• LCP ≠ FCP; LCP ≠ total pemuatan halaman time.

alat untuk measuring dan fixing LCP

data lapangan (what rankings gunakan)

• PageSpeed Insights — field tab menampilkan Anda nyata-pengguna CrUX LCP; Diagnostics flags LCP element.
• Search Console — Core Web Vitals report — LCP status di seluruh Anda URLs, grouped, pada nyata-pengguna data.
• Chrome pengguna Experience Report (CrUX) — underlying field dataset; sebagai dari Feb 2025 mencakup four image-LCP sub-bagian via API.
• web-vitals JS library — log LCP dan LCP element dari Anda own nyata-pengguna monitoring.

data lab (untuk debugging)

• Lighthouse — quick lab LCP dan sebuah opportunities list (remember: stricter desktop thresholds daripada field).
• Chrome DevTools — performa panel — marks LCP node dan full render timeline.
• WebPageTest — waterfall view untuk pinning down which sub-bagian adalah slow.

SEO crawler

• Ahrefs situs Audit — surfaces Core Web Vitals / performa issues di seluruh situs di scale.

How alat themselves score

sebuah live contoh dari metric ini halaman describes — well-known halaman-speed dan monitoring services diperingkatkan pada mereka own nyata-pengguna mobile LCP (Chrome UX Report data lapangan):

LCP fixes itu target wrong masalah

Lazy-memuat hero image

loading="lazy" delays penemuan dari sebuah above—fold image itu adalah mungkin untuk become LCP. muat ini eagerly, give mungkin candidate fetchpriority="high", dan reserve lazy memuat untuk below—fold images.

Compressing setiap image sebelum finding bottleneck

Image download duration adalah hanya one dari four LCP sub-bagian dan dapat menjadi smallest. Identify LCP element dan inspect TTFB, muat delay, muat duration, dan render delay sebelum choosing sebuah fix.

memuat hero melalui JavaScript

sebuah JS-injected image hides -nya URL dari browser’s preload scanner dan membuat resource muat delay. Put image di initial HTML atau preload ini when CSS atau JS harus own ini.

Declaring victory dari one Lighthouse run

Lighthouse adalah sebuah controlled diagnostic, while Google’s CWV verdict comes dari CrUX data lapangan. gunakan lab runs untuk verify mechanism dan wait untuk nyata-pengguna data untuk tampilkan whether p75 outcome ditingkatkan.

LCP resource starts late

Symptom: sebuah panjang gap appears antara TTFB dan LCP resource permintaan. mungkin cause: lazy memuat, JS penemuan, sebuah CSS background image, atau rendah fetch priority. Fix: membuat resource discoverable di initial HTML, hapus lazy memuat, apply fetchpriority="high", atau preload ini. Confirm permintaan moves earlier di sebuah trace.

resource memuat tetapi LCP masih fires late

Symptom: muat duration ends well sebelum LCP event. mungkin cause: render-blocking CSS, synchronous JavaScript, sebuah panjang task, atau font rendering untuk sebuah text LCP. Fix: reduce blocking berfungsi dan test font strategy untuk text; confirm element render delay shrinks.

Lab LCP adalah baik tetapi field LCP adalah poor

Symptom: Lighthouse passes while CrUX atau Search Console melakukan not. mungkin cause: pengguna nyata memiliki berbeda devices, networks, cache states, geography, atau LCP elements. Fix: segment data lapangan, capture RUM element/sub-bagian detail, dan reproduce slow segment alih-alih tuning hanya default lab profile.

reported LCP element perubahan antara runs

Symptom: DevTools identifies berbeda images atau text blocks. mungkin cause: responsive breakpoints, personalization, late DOM perubahan, atau competing candidates. Fix: test representative viewports dan states, lalu mengoptimalkan setiap recurring candidate alih-alih assuming one desktop hero covers setiap pengguna.

Hero image penemuan: delayed vs early

sebuah simplified delayed implementation hides image behind JavaScript:

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

browser dapat menemukan dan prioritize ini versi while parsing HTML:

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

CSS background image: undisclosed vs preloaded

When LCP image harus remain sebuah CSS background, disclose ini sebelum stylesheet finishes:

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

preload hanya helps when -nya URL dan permintaan attributes match actual resource.

List recent LCP candidates di Chrome DevTools

Paste ini ke Chrome DevTools Console, reload halaman, dan watch setiap candidate browser reports. last candidate sebelum interaction adalah 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 });

temukan mungkin lazy-dimuat above—fold images

Run ini di DevTools Console. ini lists lazy images whose top edge begins di saat ini viewport; verify nyata LCP candidate sebelum menghapus attribute.

[...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 attributes di sebuah crawler

gunakan ini XPath di Screaming Frog custom extraction untuk kembalikan images marked sebagai tinggi priority:

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

Prove sebuah LCP fix landed

penemuan-order test

Test untuk run: record sebuah DevTools performa trace setelah changing hero image. Expected hasil: LCP permintaan starts earlier dan adalah not lazy-dimuat. Failure interpretation: resource remains hidden, deprioritized, atau blocked behind lainnya dependency. Monitoring window: immediate lab hasil. Rollback trigger: perubahan delays lainnya critical resource atau membuat lab LCP consistently worse.

Render-delay test

Test untuk run: compare LCP resource completion dan LCP event di equivalent sebelum/setelah traces. Expected hasil: element render delay shrinks without sebuah baru layout atau visual regression. Failure interpretation: CSS, JavaScript, atau fonts masih block paint. Monitoring window: immediate di seluruh representative viewports. Rollback trigger: broken rendering, missing styles, atau sebuah worse recurring LCP.

Field-outcome test

Test untuk run: monitor URL-tingkat CrUX atau pertama-party RUM p75 LCP setelah deployment. Expected hasil: p75 moves toward atau remains di dalam baik threshold without regressing INP atau CLS. Failure interpretation: lab case adalah not representative atau lainnya sub-bagian dominates nyata visits. Monitoring window: RUM dapat lead; CrUX perlu -nya rolling 28-day window untuk turn di atas. Rollback trigger: sebuah sustained field regression tied untuk release.

LCP metrics worth tracking

Field p75 LCP

Metric: LCP di 75th percentile oleh form factor. What ini tells Anda: whether pengguna nyata meet Core Web Vitals memuat threshold. cara pull ini: CrUX, Search Console, atau pertama-party RUM. Benchmark / realistic range: baik adalah di atau below 2,5 seconds; segment mobile dan desktop. Cadence: weekly, dengan CrUX rolling window recorded.

LCP sub-bagian distribution

Metric: TTFB, resource muat delay, muat duration, dan element render delay untuk LCP. What ini tells Anda: which stage owns wait. cara pull ini: representative lab traces dan image-LCP subparts dari CrUX/RUM where available. Benchmark / realistic range: gunakan artikel’s approximate 40/10/40/10 diagnostic split sebagai sebuah guide, not sebuah universal performa promise. Cadence: setelah template releases dan monthly untuk priority templates.

baik-LCP URL coverage

Metric: penting URL groups dengan baik field LCP. What ini tells Anda: whether improvement adalah broad atau limited untuk sebuah sample halaman. cara pull ini: Search Console CWV groups plus URL-tingkat CrUX untuk priority halaman. Benchmark / realistic range: establish sebuah baseline oleh template; rendah-traffic URLs dapat lack individual data lapangan. Cadence: weekly.

Test yourself: Largest Contentful Paint

Five quick pertanyaan pada LCP pengukuran dan diagnosis. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My related writing

• What adalah Largest Contentful Paint (LCP) & cara meningkatkan ini — my full LCP guide pada Ahrefs blog.
• What adalah Core Web Vitals (CWVs) & cara meningkatkan Them — how LCP fits dengan INP dan CLS, dan why ini adalah hardest untuk fix.
• Beginner’s Guide untuk SEO teknis — where halaman performa sits di bigger picture.

Official (Google / Chrome)

• Largest Contentful Paint (LCP) dan mengoptimalkan LCP — canonical pair.
• How CWV thresholds adalah defined — why behind 2,5 s.

dari others

• Fix Anda situs web’s Largest Contentful Paint oleh optimizing image memuat — MDN’s developer-pertama take, strong pada bandwidth contention dan JS-image anti-pattern.
• performa — 2025 Web Almanac — HTTP Archive’s annual deep-dive; source untuk adoption stats pada fetchpriority, preload usage, image vs text LCP splits, dan pass rates oleh device.
• Largest Contentful Paint (LCP) — DebugBear’s docs cover waterfall analysis untuk pinpointing sub-bagian, progressive JPEG caveats, dan iframe/soft-navigation edge cases.
• Largest Contentful Paint (LCP): What ini adalah, cara mengukur & mengoptimalkan — corewebvitals.io; nyata RUM benchmarks, business impact case studies (Vodafone Italy), dan Google Flights fetchpriority hasil.
• Largest Contentful Paint | MDN Web Docs — MDN reference untuk LargestContentfulPaint API, element jenis, dan browser compatibility.

Stats worth citing

• LCP adalah hardest Core Web Vital untuk pass. ini memiliki paling components, which adalah why situs struggle dengan ini more daripada INP atau CLS. Source
• Mobile adalah harder daripada desktop. Slower CPUs dan connections push LCP up, dan pada 3G/slow connections 2,5 s threshold adalah nearly impossible untuk hit. Source
• Image download time adalah sering smallest bagian dari LCP. Chrome’s analysis dari HTTP Archive data ditemukan download duration frequently isn’t bottleneck — TTFB dan penemuan delay biasanya adalah. Source
• CrUX coverage adalah thin. di kami study dari 42 million halaman, hanya ~11,4% memiliki associated CrUX data lapangan — sebagian besar halaman don’t get enough nyata-pengguna traffic untuk menjadi diukur. Source
• 62% dari mobile halaman vs 74% dari desktop halaman achieve baik LCP (2025 Web Almanac). mobile gap reflects slower CPUs dan network connections. Source
• hanya 2,1% dari mobile halaman preload mereka LCP image, despite 76% having sebuah image sebagai mereka LCP element — sebuah significant missed optimization opportunity (2025 Web Almanac). Source
• fetchpriority="high" adoption grew dari 0,03% dari mobile situs di 2022 untuk 17,3% di 2025, largely driven oleh WordPress core menambahkan ini (2025 Web Almanac). Google Flights saw sebuah 700 ms LCP improvement dari ini single attribute. Source

Videos

• Google Search Central (YouTube) — Core Web Vitals dan halaman-experience explainers, including Chrome team walkthroughs dari LCP optimization. Channel

Log perubahan