Panduan Largest Contentful Paint (LCP)

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

Apa LCP adalah

pertama impression orang memiliki dari Anda situs adalah bagaimana fast ini muncul 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 tanpa scrolling.

itu “largest element” (terjemahan) “largest element” adalah biasanya satu dari dua hal:

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

LCP adalah moment itu element finishes rendering, diukur dari ketika halaman pertama dimulai memuat. lebih rendah angka, lebih cepat Anda halaman feels.

score

Google sorts LCP ke three buckets:

• baik: 2,5 seconds atau lebih sedikit
• perlu improvement: 2,5 untuk 4 seconds
• Poor: lebih daripada 4 seconds

Anda’re aiming untuk itu 2,5-kedua mark. dan ini adalah judged pada nyata pengunjung untuk Anda situs, tidak sebuah test Anda jalankan setelah — so ini adalah experience Anda sebenarnya audience mendapatkan pada mereka sebenarnya phones dan connections.

Mengapa ini dapat menjadi hard

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

ini adalah juga harder pada mobile daripada desktop, karena phones memiliki lebih lambat connections dan lebih sedikit processing power.

Apa untuk melakukan pertama

Three quick wins itu perbaiki paling umum mistakes:

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

2. Tell browser main image adalah penting — ada sebuah attribute (fetchpriority="high") itu melakukan persis itu. Put ini pada satu image itu’s sebenarnya Anda LCP candidate; slapping ini pada several images dilutes sinyal.
3. Speed up Anda server. jika Anda server adalah slow untuk respond, tidak ada apa pun else Anda melakukan penting banyak.

ingin penuh mental model — four sub-bagian dari LCP, cara temukan Anda LCP element, rendering dan font stuff, dan bagaimana banyak ini sebenarnya penting untuk rankings? Switch untuk Advanced tab.

TL;DR — LCP adalah render time dari largest image atau text block terlihat di viewport, relative untuk ketika halaman dimulai 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 satu dari three Core Web Vitals dan breaks ke four sub-bagian — TTFB, resource muat delay, resource muat duration, element render delay — di mana TTFB dan muat duration biasanya dominate (guidelines, tidak fixed shares — diagnose Anda own halaman). Top memperbaiki: tidak pernah lazy-muat LCP image, tambahkan fetchpriority="high" pada sebenarnya candidate, preload ini ketika ini tidak di HTML, kill render-blocking CSS/JS, dan perbaiki TTFB. ini adalah sebuah field metric — lab alat hanya approximate ini — dan LCP element dapat perubahan selama muat. Google mengonfirmasi Core Web Vitals feed peringkat sistem tetapi tidak publish sebuah tepat LCP weight atau panggil ini sebuah tiebreaker; konten relevance masih dominates.

Apa LCP sebenarnya measures

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

sebuah sedikit hal itu trip orang up right away:

• ini adalah tidak “halaman 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 satu element, tidak seluruh halaman.
• ini adalah tidak yang sama sebagai FCP. pertama Contentful Paint fires ketika apa pun konten pertama muncul; LCP menunggu 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 lebih besar element becomes terlihat. terakhir entry sebelum pengguna interacts (tap, scroll, keypress) atau halaman unloads adalah nilai itu counts — interaction sering perubahan apa terlihat, so reporting berhenti di sana. sebuah candidate itu’s kemudian dihapus dari DOM tidak erase -nya own entry — ini tetap reported element unless sebuah masih-lebih besar satu renders sebelum reporting berhenti.

thresholds — dan mengapa 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 lulus.

Mengapa 2,5 secara khusus? Google’s threshold methodology leaned pada dua hal: human perception research pointing di roughly 1–3 seconds sebagai band itu feels “immediate,” (terjemahan) “immediate,” dan CrUX achievability data menunjukkan 2,5 s adalah consistently achievable untuk well-dioptimalkan situs tanpa menjadi trivially easy. Tighter targets like 1,5 s atau 2,0 s tidak consistently achievable di seluruh cukup origins, so mereka tidak membuat cut.

Apa counts sebagai LCP element

element jenis considered untuk LCP:

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

reported size adalah apa sebenarnya terlihat di viewport — portions clipped atau scrolled off jangan count, dan untuk images ini adalah terlihat size atau intrinsic size, whichever adalah lebih kecil. Margins, padding, dan borders adalah ignored. sebuah handful dari elements mendapatkan excluded oleh heuristics: apa pun dengan opacity: 0, elements itu cover seluruh 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 tidak selalu, dan tidak selalu compression (lebih pada itu berikutnya). remaining chunk adalah text LCPs, di mana lever adalah entirely berbeda: ini adalah font memuat, tidak image weight.

four sub-bagian — bagian sebagian besar artikel skip

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

1. Time untuk pertama Byte (TTFB) — dari ketika pengguna dimulai memuat halaman untuk ketika browser menerima pertama byte dari HTML. Typical share: ~40% dari total LCP.
2. Resource muat delay — kesenjangan antara TTFB dan browser starting untuk muat LCP resource. ini adalah penemuan time. Typical share: di bawah 10%.
3. Resource muat duration — bagaimana panjang LCP resource itself takes untuk download. Typical share: ~40%.
4. Element render delay — dari ketika resource finishes memuat untuk ketika element sebenarnya 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 di mana neither adalah memuat adalah sebuah opportunity untuk meningkatkan.

web.dev adalah jelas itu ini percentages adalah guidelines, tidak strict aturan — jangan convert them ke absolute-kedua targets, dan jangan force setiap halaman untuk match split. mereka’re hanya bermakna relative untuk setiap lainnya, dan jika Anda LCP adalah consistently di dalam 2,5 seconds sudah, relative proportions jangan penting di semua. gunakan table untuk spot yang sub-bagian adalah eating sebuah outsized share pada Anda halaman, lalu perbaiki itu satu — tidak untuk chase sebuah tepat 40/10/40/10 split.

dan di sini’s bit itu upends umum assumption: sebagai dari February 2025 ini four sub-bagian adalah tersedia 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, “sekadar compress my images” (terjemahan) “hanya compress my images” frequently memperbaiki wrong sub-bagian. TTFB dan penemuan delay adalah sering bigger levers.

cara temukan Anda LCP element

sebelum Anda mengoptimalkan apa pun, cari tahu yang element adalah Anda LCP dan yang 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 perbaiki untuk sub-bagian ini targets:

Perbaiki resource muat delay (penemuan). ini adalah highest-leverage dan sebagian besar commonly rusak satu.

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

Preload dan fetchpriority solve berbeda masalah, so jangan reach untuk keduanya oleh habit. Preload exposes sebuah resource browser’s preload scanner akan jika tidak 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 awal HTML — menambahkan either dapat melakukan little beyond extra permintaan. periksa sebuah trace, apply satu itu matches sebenarnya masalah, dan konfirmasi field angka moved.

Perbaiki 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-utas tasks.

Reduce resource muat duration.

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

«Reduce TTFB. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Minimize redirects, drop unnecessary unique URL parameters, and optimize server response time. Note that LCP includes any unload time from the previous page, connection setup, and redirect time — all of which roll into TTFB. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh lima, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

Lab vs. field — ini pembedaan penting

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

Lab alat — Lighthouse, Chrome DevTools, WebPageTest — hanya approximate ini di bawah simulated conditions, dan mereka jangan 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 tidak jaminan sebuah passing CrUX score, dan vice versa. gunakan lab alat untuk debug dan reproduce; trust data lapangan untuk sebenarnya verdict.

ada sebuah kedua alasan lab dan field angka dapat diverge, worth knowing so sebuah odd reading tidak kirim Anda chasing sebuah phantom bug: saat ini LargestContentfulPaint browser API (masih sebuah W3C berfungsi Draft) adalah scoped untuk sebuah single document muat. ini tidak itself reset pada back/forward cache (bfcache) restores atau sama-document SPA navigations, dan halaman itu mulai off-screen — background tabs, prerendered halaman — dapat report inflated nilai karena timing berjalan dari muat alih-alih dari ketika halaman sebenarnya menjadi terlihat. reporting algorithm juga halts pada qualifying pengguna input, so jika sebuah pengguna interacts sebelum Anda main konten displays, LCP tidak akan capture ini. None dari ini perubahan threshold table di atas; ini menjelaskan mengapa sebuah spesifik session’s angka dapat look wrong ketika underlying navigation tidak sebuah plain pertama muat.

melakukan LCP memengaruhi rankings?

Ya, di sense itu Google mengonfirmasi Core Web Vitals feed -nya peringkat sistem dan recommends achieving baik scores. tetapi saat ini Penelusuran Central documentation tidak publish sebuah tepat LCP weight dan tidak deskripsikan ini sebagai sebuah tiebreaker — Google’s own framing adalah itu pengalaman halaman “can contribute to success in Search” (terjemahan) “dapat contribute untuk success di Penelusuran” untuk kueri di mana multiple halaman sudah offer comparable, relevant konten, dan itu sebuah baik score tidak jaminan sebuah peringkat boost. konten relevance dan quality masih dominate. mengoptimalkan LCP karena sebuah lebih cepat-feeling halaman adalah genuinely better untuk pengguna (dan conversions) — tidak karena mechanism adalah terdokumentasi sebagai sebuah rankings tiebreaker, karena ini tidak.

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

Di mana ini fits

LCP adalah satu dari three Core Web Vitals, alongside Interaction untuk Berikutnya Paint dan Cumulative Layout Shift. -nya pertama sub-bagian, Time untuk pertama Byte, adalah -nya own diagnostic metric, dan pertama Contentful Paint sits right berikutnya 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 ketika halaman dimulai memuat. ini adalah closest standardized proxy untuk “ketika melakukan itu main konten muncul.” (terjemahan) “ketika melakukan main konten muncul.”
• 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 satu dari three Core Web Vitals.
• Tidak halaman-muat time, tidak FCP. FCP = pertama pixel dari apa pun konten; LCP = largest element. LCP adalah juga dynamic — largest candidate dapat perubahan selama muat; terakhir satu 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 (di mana fonts, tidak 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, tidak fixed shares; diagnose per halaman alih-alih chasing sebuah tepat split. CrUX 2025 data: image download adalah sering smallest bagian — so “sekadar compress images” (terjemahan) “hanya compress images” sering memperbaiki wrong hal.
• Top memperbaiki: tidak pernah lazy-muat LCP image; tambahkan fetchpriority="high" pada sebenarnya candidate; preload ini ketika ini adalah tidak di HTML (preload dan fetchpriority solve berbeda masalah — jangan reach untuk keduanya oleh habit); cut render-blocking CSS/JS; reduce TTFB.
• Field, tidak 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 tidak itself reset untuk bfcache restores atau sama-document SPA navigations.
• Rankings: Google mengonfirmasi CWV feed peringkat sistem tetapi publishes Tidak tepat LCP weight dan tidak panggil ini sebuah tiebreaker; konten relevance masih dominates. Hardest CWV untuk meningkatkan, dan harder pada mobile.

Dokumentasi resmi

Utama-sumber guidance dari Google’s Chrome dan Penelusuran tim.

web.dev (Chrome team)

• Largest Contentful Paint (LCP) — canonical definition: apa counts sebagai sebuah LCP element, bagaimana size adalah calculated, ketika reporting berhenti, dan pengukuran APIs.
• mengoptimalkan Largest Contentful Paint — four sub-bagian kerangka kerja dan penuh optimization playbook.
• Core Web Vitals — di mana LCP sits among three Core Web Vitals.
• Bagaimana Core Web Vitals metrics thresholds adalah didefinisikan — research dan achievability data behind 2,5 s mark.

Chrome untuk Developers

• LCP image subparts dan RTT now tersedia di CrUX — Feb 2025 field-data rilis 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 — bagaimana Core Web Vitals factor ke Penelusuran.

Quotes dari sumber

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.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- On what’s measured: “LCP doesn’t consider margins, paddings, or borders applied using CSS.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh tiga, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- On 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.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh tiga, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- On what’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 quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh tiga, bagian kecil empat: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«web.dev — optimization (Philip Walton & Barry Pollard, Google) » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

• 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 sumber.” 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 merekomendasikan situs owners achieve baik Core Web Vitals untuk success dengan Penelusuran dan untuk ensure sebuah great pengguna experience umumnya.” (Relayed dari Penelusuran Central Core Web Vitals doc; konfirmasi terhadap langsung halaman sebelum treating sebagai akhir.)

LCP perbaiki checklist

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

• ditemukan sebenarnya LCP element (PageSpeed Insights Diagnostics, DevTools performa panel, atau web-vitals library) — jangan mengoptimalkan blind.
• diperiksa four sub-bagian untuk see yang satu adalah bottleneck sebelum mengubah apa pun.
• LCP image adalah tidak loading="lazy" (lazy memuat belongs di bawah fold hanya).
• LCP image memiliki fetchpriority="high".
• LCP image adalah discoverable di awal HTML — atau preloaded (<link rel="preload">) jika ini adalah dimuat melalui CSS/JS.
• Tidak memuat hero image melalui JavaScript (hides ini dari preload scanner).
• Render-blocking CSS minimized/inlined; non-critical styles deferred.
• Tidak synchronous scripts di <head>; panjang tasks rusak up.
• Modern image format (WebP/AVIF), sensible compression, disajikan melalui sebuah CDN dengan baik Cache-Control.
• Di bawah-fold images lazy-dimuat so mereka jangan 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 ditukar font file.
• Verified terhadap data lapangan (CrUX / Search Console), tidak hanya sebuah Lighthouse lab jalankan.

LCP cheat sheet

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

** four sub-bagian — apa setiap adalah dan perbaiki**

Apa dapat menjadi LCP element

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

«Excluded by heuristic: opacity: 0, full-viewport “background” elements, low-entropy placeholders. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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; terakhir 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 tidak selalu jawaban.
• LCP ≠ FCP; LCP ≠ total pemuatan halaman time.

alat untuk measuring dan memperbaiki LCP

data lapangan (apa 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 melalui 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 penuh render timeline.
• WebPageTest — waterfall view untuk pinning down yang sub-bagian adalah slow.

SEO crawler

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

Bagaimana alat themselves score

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

LCP memperbaiki itu target wrong masalah

Lazy-memuat hero image

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

Compressing setiap image sebelum finding bottleneck

Image download duration adalah hanya satu 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 perbaiki.

memuat hero melalui JavaScript

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

Declaring victory dari satu Lighthouse jalankan

Lighthouse adalah sebuah controlled diagnostic, sementara Google’s CWV verdict muncul dari CrUX data lapangan. gunakan lab berjalan untuk verify mechanism dan tunggu untuk nyata-pengguna data untuk tampilkan apakah p75 outcome ditingkatkan.

LCP resource dimulai late

Symptom: sebuah panjang kesenjangan muncul antara TTFB dan LCP resource permintaan. mungkin penyebab: lazy memuat, JS penemuan, sebuah CSS background image, atau rendah fetch priority. Perbaiki: membuat resource discoverable di awal HTML, hapus lazy memuat, apply fetchpriority="high", atau preload ini. Konfirmasi permintaan moves sebelumnya di sebuah trace.

resource memuat tetapi LCP masih fires late

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

Lab LCP adalah baik tetapi field LCP adalah poor

Symptom: Lighthouse melewati sementara CrUX atau Search Console melakukan tidak. mungkin penyebab: pengguna nyata memiliki berbeda devices, networks, cache status, geography, atau LCP elements. Perbaiki: 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 berjalan

Symptom: DevTools identifies berbeda images atau text blocks. mungkin penyebab: responsive breakpoints, personalization, late DOM perubahan, atau competing candidates. Perbaiki: test representative viewports dan status, lalu mengoptimalkan setiap recurring candidate alih-alih assuming satu 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 sementara parsing HTML:

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

«## CSS background image: undisclosed vs preloaded » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Ketika LCP image harus tetap sebuah CSS background, disclose ini sebelum stylesheet finishes:

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

preload hanya helps ketika -nya URL dan permintaan attributes match sebenarnya resource.

List recent LCP candidates di Chrome DevTools

Paste ini ke Chrome DevTools Console, reload halaman, dan watch setiap candidate browser reports. terakhir candidate sebelum interaction adalah relevant satu.

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 di atas—fold images

Jalankan ini di DevTools Console. ini lists lazy images milik siapa 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 perbaiki landed

penemuan-order test

Test untuk jalankan: record sebuah DevTools performa trace setelah mengubah hero image. Yang diharapkan hasil: LCP permintaan dimulai sebelumnya dan adalah tidak lazy-dimuat. Failure interpretation: resource tetap 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 jalankan: bandingkan LCP resource completion dan LCP event di equivalent sebelum/setelah traces. Yang diharapkan hasil: element render delay shrinks tanpa sebuah baru layout atau visual regression. Failure interpretation: CSS, JavaScript, atau fonts masih block paint. Monitoring window: immediate di seluruh representative viewports. Rollback trigger: rusak rendering, missing styles, atau sebuah worse recurring LCP.

Field-outcome test

Test untuk jalankan: monitor URL-tingkat CrUX atau pertama-party RUM p75 LCP setelah deployment. Yang diharapkan hasil: p75 moves toward atau tetap di dalam baik threshold tanpa regressing INP atau CLS. Failure interpretation: lab case adalah tidak 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 rilis.

LCP metrics worth tracking

Field p75 LCP

Metric: LCP di 75th percentile oleh form factor. Apa ini tells Anda: apakah pengguna nyata memenuhi Core Web Vitals memuat threshold. cara pull ini: CrUX, Search Console, atau pertama-party RUM. Benchmark / realistic range: baik adalah di atau di bawah 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. Apa ini tells Anda: yang stage owns tunggu. cara pull ini: representative lab traces dan image-LCP subparts dari CrUX/RUM di mana tersedia. Benchmark / realistic range: gunakan artikel’s approximate 40/10/40/10 diagnostic split sebagai sebuah guide, tidak 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. Apa ini tells Anda: apakah 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.

Uji pemahaman Anda: 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

• Apa adalah Largest Contentful Paint (LCP) & cara meningkatkan ini — my penuh LCP guide pada Ahrefs blog.
• Apa adalah Core Web Vitals (CWVs) & cara meningkatkan Them — bagaimana LCP fits dengan INP dan CLS, dan mengapa ini adalah hardest untuk perbaiki.
• Beginner’s Guide untuk SEO teknis — di mana halaman performa sits di bigger picture.

Official (Google / Chrome)

• Largest Contentful Paint (LCP) dan mengoptimalkan LCP — canonical pair.
• Bagaimana CWV thresholds adalah didefinisikan — mengapa behind 2,5 s.

dari others

• Perbaiki 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; sumber untuk adoption stats pada fetchpriority, preload usage, image vs text LCP splits, dan lulus 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): Apa 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 lulus. ini memiliki paling components, yang adalah mengapa situs struggle dengan ini lebih daripada INP atau CLS. Sumber
• Mobile adalah harder daripada desktop. Lebih lambat CPUs dan connections push LCP up, dan pada 3G/slow connections 2,5 s threshold adalah nearly impossible untuk hit. Sumber
• Image download time adalah sering smallest bagian dari LCP. Chrome’s analysis dari HTTP Archive data ditemukan download duration frequently tidak bottleneck — TTFB dan penemuan delay biasanya adalah. Sumber
• CrUX coverage adalah thin. di kami study dari 42 million halaman, hanya ~11,4% memiliki associated CrUX data lapangan — sebagian besar halaman jangan mendapatkan cukup nyata-pengguna traffic untuk menjadi diukur. Sumber
• 62% dari mobile halaman vs 74% dari desktop halaman achieve baik LCP (2025 Web Almanac). mobile kesenjangan reflects lebih lambat CPUs dan network connections. Sumber
• hanya 2,1% dari mobile halaman preload mereka LCP image, despite 76% memiliki sebuah image sebagai mereka LCP element — sebuah significant missed optimization opportunity (2025 Web Almanac). Sumber
• 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. Sumber

Videos

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

Log perubahan