Hướng dẫn về Largest Contentful Paint (LCP)

Tóm tắt — Largest Contentful Paint (LCP) measures Cách dài nó takes cho biggest điều on screen — thường hero image hoặc big block của text — để hiển thị lên sau khi ai đó clicks để của bạn trang. Dưới 2,5 seconds là good. nó một của Google three Core Web Vitals, và nó một phần lớn các trang struggle với.

Điều gì LCP là

đầu tiên impression mọi người có của bạn trang web là Cách fast nó xuất hiện để load. LCP tries để put number on đó. nó measures amount của time nó takes để load single largest visible element trong viewport — part của trang Bạn có thể see không có scrolling.

Đó “largest element” (bản dịch) «largest element» là thường một of hai điều:

• big image — hero banner, sản phẩm photo, featured image.
• big block của text — phổ biến on bài viết các trang đó không lead với image.

LCP là moment đó element finishes kết xuất, measured từ Khi trang đầu tiên đã bắt đầu loading. thấp hơn number, nhanh hơn của bạn trang feels.

score

Google sorts LCP vào three buckets:

• Good: 2,5 seconds hoặc ít hơn
• Cần improvement: 2,5 để 4 seconds
• Poor: nhiều hơn 4 seconds

bạn’re aiming cho đó 2,5-thứ hai mark. và nó judged on thực khách truy cập để của bạn trang web, không kiểm thử bạn chạy sau khi — so nó experience của bạn thực tế audience nhận on của họ thực tế phones và connections.

Vì sao nó có thể là hard

LCP là Cốt lõi Web Vital mọi người struggle với phần lớn. đó vì nó có phần lớn moving parts: của bạn máy chủ có để respond, trình duyệt có để tìm và download image, và sau đó nó có để thực ra paint nó. slowdown tại bất kỳ của những điều đó steps drags toàn bộ number lên. Compressing của bạn images là phổ biến đầu tiên guess — và nó đôi khi helps — nhưng nó thường không thực bottleneck.

nó cũng harder on mobile hơn desktop, vì phones có chậm hơn connections và ít hơn processing power.

Điều gì để làm đầu tiên

Three nhanh wins đó khắc phục phần lớn phổ biến mistakes:

1. không lazy-load của bạn main image. “Lazy loading” (bản dịch) «Lazy loading» tells đó trình duyệt để chờ trước fetching an image. đó là great cho stuff far xuống đó trang — nhưng nếu bạn làm điều này để của bạn hero image, bạn là có chủ ý delaying đó hầu hết quan trọng điều 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 đó trình duyệt đó main image là quan trọng — có an thuộc tính (fetchpriority="high") đó làm chính xác đó. Put điều này on đó một image đó là thực ra của bạn LCP candidate; slapping điều này on several images dilutes đó tín hiệu.
3. Speed lên máy chủ của bạn. Nếu máy chủ của bạn là chậm để respond, không có gì khác bạn làm matters nhiều.

Muốn đầy đủ mental model — four sub-parts của LCP, Cách tìm của bạn LCP element, kết xuất và font stuff, và Cách nhiều điều này thực ra matters cho thứ hạng? Chuyển để Nâng cao tab.

Tóm tắt — LCP là render time của largest image hoặc text block visible trong viewport, relative để Khi trang đã bắt đầu loading. Good là ≤ 2,5 s tại 75th percentile của thực người dùng (split by device); 2,5–4 s cần hoạt động, over 4 s là poor. nó một của three Core Web Vitals và breaks vào four sub-parts — TTFB, tài nguyên load delay, tài nguyên load duration, element render delay — nơi TTFB và load duration thường dominate (guidelines, không fixed chia sẻ — diagnose của bạn own trang). Top các cách sửa: không bao giờ lazy-load LCP image, thêm fetchpriority="high" on thực tế candidate, preload nó Khi nó không phải trong HTML, kill render-blocking CSS/JS, và khắc phục TTFB. nó trường chỉ số — lab tools chỉ approximate nó — và LCP element có thể thay đổi during load. Google xác nhận Core Web Vitals feed xếp hạng các hệ thống nhưng không publish chính xác LCP weight hoặc call nó tiebreaker; nội dung relevance vẫn dominates.

Điều gì LCP thực ra measures

LCP các báo cáo render time của largest image hoặc text block visible trong viewport, measured relative để Khi người dùng đầu tiên navigated để trang. Google own cách diễn đạt: nó closest standardized proxy cho Khi main nội dung xuất hiện để người dùng. nó replaced trước đó, fuzzier các chỉ số như đầu tiên Có ý nghĩa Paint và Speed chỉ mục.

một vài điều đó trip mọi người lên right away:

• đây là không “page load time.” (bản dịch) «trang load time.» MỘT trang có thể có mỗi tài nguyên fetched và vẫn post một chậm LCP nếu kết xuất đó largest element đã là blocked. LCP là về đó một element, không đó toàn bộ trang.
• đây là không đó giống nhau as FCP. Đầu tiên Contentful Paint fires khi bất kỳ nội dung đầu tiên xuất hiện; LCP chờ cho đó largest element. MỘT trang có thể có một fast FCP (đó navbar paints) và một chậm LCP (đó hero image loads muộn).
• đây là một dynamic chỉ số. Đó trình duyệt dispatches một new LCP candidate mỗi khi một lớn hơn element becomes visible. Đó cuối cùng entry trước người dùng interacts (tap, scroll, keypress) hoặc đó trang unloads là đó giá trị đó được tính — interaction thường thay đổi điều gì là visible, so reporting dừng ở đó. MỘT candidate đó là sau đó đã xóa từ đó DOM không erase của nó own entry — điều này vẫn giữ đó reported element trừ khi một vẫn-lớn hơn một renders trước reporting dừng.

thresholds — và Vì sao 2,5 seconds

Assessed tại 75th percentile của thực-người dùng trang loads, segmented by device loại. So three out của four visits cần để come trong dưới 2,5 s cho origin để truyền.

Vì sao 2,5 cụ thể? Google ngưỡng methodology leaned on hai điều: human perception research pointing tại khoảng 1–3 seconds as band đó feels “immediate,” và CrUX achievability dữ liệu cho thấy 2,5 s là consistently achievable cho well-optimized các trang không có là trivially easy. Tighter targets như 1,5 s hoặc 2,0 s đã không consistently achievable trên đủ origins, so họ đã không làm cut.

Điều gì được tính as LCP element

element types considered cho LCP:

• <img> elements
• <image> elements bên trong <svg>
• <video> elements ( poster image load time, hoặc đầu tiên frame, whichever là trước đó)
• element với background image loaded qua CSS url() function
• Block-cấp độ elements containing text nodes hoặc khác inline text children

reported size là Điều gì thực ra visible trong viewport — portions clipped hoặc scrolled off không count, và cho images nó visible size hoặc intrinsic size, whichever là nhỏ hơn. Margins, padding, và borders là đã bỏ qua. handful của elements nhận excluded by heuristics: bất cứ điều gì với opacity: 0, elements đó cover toàn bộ viewport (được xem như backgrounds), và thấp-entropy placeholder images.

về three-quarters của các trang có image as của họ LCP element — so image hoạt động là thường right đầu tiên move. nhưng không luôn, và không luôn compression (nhiều hơn on đó tiếp theo). remaining chunk là text LCPs, nơi lever là hoàn toàn khác: nó font loading, không image weight.

four sub-parts — part phần lớn các bài viết skip

Đây là framework I’d bắt đầu bất kỳ LCP diagnosis với. web.dev breaks LCP vào four sequential sub-parts:

1. Time để đầu tiên Byte (TTFB) — từ Khi người dùng bắt đầu loading trang để Khi trình duyệt nhận đầu tiên byte của HTML. Typical share: ~40% của total LCP.
2. tài nguyên load delay — khoảng trống giữa TTFB và trình duyệt starting để load LCP tài nguyên. Đây là phát hiện time. Typical share: dưới 10%.
3. tài nguyên load duration — Cách dài LCP tài nguyên itself takes để download. Typical share: ~40%.
4. Element render delay — từ Khi tài nguyên finishes loading để Khi element thực ra paints. Typical share: dưới 10%.

principle behind bảng: vast majority của LCP time nên là spent loading HTML document và LCP tài nguyên. bất kỳ stretch nơi neither là loading là opportunity để improve.

web.dev là rõ ràng đó những điều này percentages là guidelines, không strict rules — không convert them vào absolute-thứ hai targets, và không force mỗi trang để match split. họ’re chỉ có ý nghĩa relative để mỗi khác, và nếu của bạn LCP là consistently trong 2,5 seconds đã, relative proportions không quan trọng tại all. sử dụng bảng để spot mà sub-part là eating outsized share on của bạn trang, sau đó khắc phục đó một — không để chase chính xác 40/10/40/10 split.

Và ở đây đó bit đó upends đó phổ biến assumption: as of February 2025 những four sub-parts là khả dụng trong đó CrUX API cho image LCPs, và đó Chrome team analysis of HTTP Archive dữ liệu được tìm thấy đó image download time đã là thường đó smallest part of LCP time. Nói cách khác, “just compress my images” (bản dịch) «chỉ compress my images» frequently các cách sửa đó sai sub-part. TTFB và phát hiện delay là thường đó bigger levers.

Cách tìm của bạn LCP element

trước khi bạn optimize bất cứ điều gì, tìm out mà element là của bạn LCP và mà sub-part là bottleneck:

• PageSpeed Insights — Diagnostics section flags LCP element, và trường-dữ liệu tab hiển thị của bạn thực-người dùng score.
• Chrome DevTools — Performance panel marks LCP node on timeline.
• ** web-vitals JS library** — log LCP (và element) từ của bạn own thực-người dùng monitoring.

Cách improve LCP

Map mỗi khắc phục để sub-part nó targets:

khắc phục tài nguyên load delay (phát hiện). Đây là highest-leverage và phần lớn commonly hỏng một.

• không bao giờ lazy-load của bạn LCP image. loading="lazy" on LCP element luôn adds unnecessary load delay. Reserve lazy loading cho dưới—fold images.
• Thêm fetchpriority="high" để có khả năng LCP image so trình duyệt fetches nó sớm tại cao priority.
• Preload nó với <link rel="preload"> Khi image không phải discoverable trong ban đầu HTML — ví dụ, Khi nó loaded qua CSS hoặc JavaScript. Loading hero image qua JS là anti-pattern precisely vì nó hides URL từ trình duyệt preload scanner.
• Host cốt yếu các tài nguyên on giống nhau origin so trình duyệt không pay extra connection setup.

Preload và fetchpriority solve khác các vấn đề, so không reach cho cả hai by habit. Preload exposes tài nguyên trình duyệt preload scanner sẽ nếu không discover muộn ( JS- hoặc CSS-loaded image, ví dụ); fetchpriority thay đổi fetch priority của tài nguyên trình duyệt đã tìm thấy. nếu phát hiện và priority là đã đúng — image là đơn giản <img> trong ban đầu HTML — thêm either có thể làm little beyond extra các yêu cầu. kiểm tra trace, apply một đó matches thực tế vấn đề, và xác nhận trường number moved.

khắc phục element render delay.

• Reduce hoặc inline render-blocking CSS; defer non-cốt yếu styles.
• tránh synchronous scripts trong <head>.
• Ưu tiên máy chủ-side kết xuất hoặc static generation so markup arrives ready để paint, và break lên dài main-chuỗi trao đổi tasks.

Reduce tài nguyên load duration.

• Modern image formats (WebP, AVIF), sensible compression, và CDN.
• Efficient Cache-Control. và không bỏ qua network contention — lazy-loading khác dưới-fold images có thể free lên bandwidth so LCP image lands sooner.

Reduce TTFB.

• Minimize các chuyển hướng, drop unnecessary unique URL parameters, và optimize máy chủ phản hồi time. Note đó LCP bao gồm bất kỳ unload time từ trước đó trang, connection setup, và chuyển hướng time — tất cả mà roll vào TTFB.

Special case: text-based LCP. Khi largest element là text, cốt yếu path là font loading, không image weight. font-display: optional hoặc hệ thống fonts eliminate font-induced render delay; font-display: swap không có preloading font file có thể introduce nó.

Lab so với. trường — điều này phân biệt matters

LCP là fundamentally trường chỉ số. Google assesses nó on thực người dùng qua CrUX, surfaced trong PageSpeed Insights’ trường tab và Search Console Core Web Vitals báo cáo. đó trường dữ liệu là Điều gì feeds thứ hạng.

Lab tools — Lighthouse, Chrome DevTools, WebPageTest — chỉ approximate nó dưới simulated conditions, và họ không ngay cả sử dụng giống nhau scoring. Lighthouse áp dụng stricter desktop thresholds (Good ≤ 1,2 s) hơn trường tiêu chuẩn (≤ 2,5 s). So passing Lighthouse score không bảo đảm passing CrUX score, và vice versa. sử dụng lab tools để debug và reproduce; trust trường dữ liệu cho thực tế verdict.

có thứ hai reason lab và trường numbers có thể diverge, worth knowing so odd reading không gửi bạn chasing phantom bug: hiện tại LargestContentfulPaint trình duyệt API (vẫn W3C Hoạt động Draft) là scoped để single document load. nó không itself reset on lại/forward bộ nhớ đệm (bfcache) restores hoặc giống nhau-document SPA navigations, và các trang đó bắt đầu off-screen — background tabs, prerendered các trang — có thể báo cáo inflated các giá trị vì timing chạy từ load thay vì từ Khi trang thực ra trở thành visible. reporting algorithm cũng halts on qualifying người dùng input, so nếu người dùng interacts trước khi của bạn main nội dung displays, LCP sẽ không capture nó. None của điều này thay đổi ngưỡng bảng trên; nó giải thích Vì sao cụ thể session number có thể look sai Khi underlying navigation không phải đơn giản đầu tiên load.

Làm LCP ảnh hưởng thứ hạng?

Có, trong đó hợp lý đó Google xác nhận Core Web Vitals feed của nó xếp hạng các hệ thống và khuyến nghị achieving good scores. Nhưng hiện tại Tìm kiếm Central tài liệu không publish an chính xác LCP weight và không mô tả điều này as một tiebreaker — Google own cách diễn đạt là đó trang experience “can contribute to success in Search” (bản dịch) «có thể contribute để success trong Tìm kiếm» cho các truy vấn nơi multiple các trang đã offer comparable, relevant nội dung, và đó một good score không bảo đảm một xếp hạng boost. Nội dung relevance và quality vẫn dominate. Optimize LCP vì một nhanh hơn-feeling trang là genuinely tốt hơn cho người dùng (và conversions) — không vì đó mechanism là được ghi lại as một thứ hạng tiebreaker, vì điều này không.

couple của realities từ dữ liệu: của Core Web Vitals, LCP là một các trang struggle phần lớn để improve, và nó noticeably harder on mobile hơn desktop — chậm hơn CPUs và connections. On 3G và chậm hơn, 2,5 s ngưỡng có thể feel gần như không thể để hit.

nơi điều này fits

LCP là một của three Core Web Vitals, alongside Interaction để tiếp theo Paint và Cumulative Layout Shift. Của nó đầu tiên sub-part, Time để đầu tiên Byte, là của nó own diagnostic chỉ số, và đầu tiên Contentful Paint sits right tiếp theo để nó on loading timeline. bạn’ll see tất cả những điều này trong PageSpeed Insights, Lighthouse, và Chrome Người dùng Experience Báo cáo (CrUX). mỗi là của nó own deep dive trong điều này cluster.

AI summary

condensed take on Nâng cao version:

• LCP = render time of đó largest visible image hoặc text block, relative để khi đó trang đã bắt đầu loading. đây là đó closest standardized proxy cho “when does the main content appear.” (bản dịch) «khi làm đó main nội dung xuất hiện.»
• Thresholds: Good ≤ 2,5 s, Cần improvement 2,5–4 s, Poor > 4 s — tại đó 75th percentile of real người dùng, split by device. đây là một of three Cốt lõi Web Chỉ số quan trọng.
• Không trang-load time, không FCP. FCP = đầu tiên pixel of bất kỳ nội dung; LCP = đó largest element. LCP là cũng dynamic — đó largest candidate có thể thay đổi during load; đó cuối cùng một trước người dùng interaction được tính.
• LCP elements: <img>, <image> trong <svg>, <video> poster, CSS background-image: url(), hoặc một block-cấp độ text element. ~3 trong 4 các trang có an image LCP; đó rest là text (nơi fonts, không image weight, là đó lever).
• Four sub-parts: TTFB (~40%), tài nguyên load delay (<10%), tài nguyên load duration (~40%), element render delay (<10%) — web.dev calls những guidelines, không fixed chia sẻ; diagnose theo trang thay vì chasing an chính xác split. CrUX 2025 dữ liệu: image download là thường đó smallest part — so “just compress images” (bản dịch) «chỉ compress images» thường các cách sửa đó sai điều.
• Top các cách sửa: không bao giờ lazy-load đó LCP image; thêm fetchpriority="high" on đó thực tế candidate; preload điều này khi đây là không trong đó HTML (preload và fetchpriority solve khác nhau các vấn đề — không reach cho cả hai by habit); cut render-blocking CSS/JS; reduce TTFB.
• Trường, không lab. CrUX/Search Console drive thứ hạng; Lighthouse chỉ approximates và dùng stricter desktop thresholds (≤ 1,2 s). Đó hiện tại LargestContentfulPaint API là scoped để document loads và không itself reset cho bfcache restores hoặc giống nhau-document SPA navigations.
• Thứ hạng: Google xác nhận CWV feed xếp hạng các hệ thống nhưng publishes không chính xác LCP weight và không call điều này một tiebreaker; nội dung relevance vẫn dominates. Hardest CWV để improve, và harder on mobile.

Tài liệu chính thức

Chính-nguồn hướng dẫn từ Google Chrome và Tìm kiếm nhóm.

web.dev (Chrome team)

• Largest Contentful Paint (LCP) — canonical definition: Điều gì được tính as LCP element, Cách size là calculated, Khi reporting dừng, và việc đo lường APIs.
• Optimize Largest Contentful Paint — four sub-parts framework và đầy đủ optimization playbook.
• Core Web Vitals — nơi LCP sits among three Core Web Vitals.
• Cách Core Web Vitals các chỉ số thresholds là được định nghĩa — research và achievability dữ liệu behind 2,5 s mark.

Chrome cho Nhà phát triển

• LCP image subparts và RTT hiện tại khả dụng trong CrUX — Feb 2025 trường-dữ liệu phát hành của four sub-parts (image LCPs chỉ).
• Largest Contentful Paint | Lighthouse — lab chỉ số và của nó device-cụ thể scoring.

Google Search Central

• Understanding Core Web Vitals và Google kết quả tìm kiếm — Cách Core Web Vitals factor vào Tìm kiếm.

Quotes từ nguồn

On—record statements từ tài liệu củ Google và team. mỗi link là deep link đó jumps để quoted passage.

web.dev — definition và 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.” (bản dịch) «LCP các báo cáo đó render time of đó largest image, text block, hoặc video visible trong đó viewport, measured relative để khi người dùng đầu tiên navigated để đó trang.» Nhảy đến trích dẫn
• On điều gì là measured: “LCP doesn’t consider margins, paddings, or borders applied using CSS.” (bản dịch) «LCP không consider margins, paddings, hoặc borders applied dùng CSS.» Nhảy đến trích dẫn
• On khi reporting dừng: “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.” (bản dịch) «Đó trình duyệt sẽ dừng reporting new entries as soon as người dùng interacts với đó trang (qua một tap, scroll, hoặc keypress), as người dùng interaction thường thay đổi điều gì là visible để người dùng.» Nhảy đến trích dẫn
• On điều gì là được bao gồm trong đó 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.” (bản dịch) «Điều này là quan trọng để note đó LCP bao gồm bất kỳ unload time từ đó trước đó trang, connection set lên time, chuyển hướng time, và other Time Để Đầu tiên Byte (TTFB) delays.» Nhảy đến trích dẫn

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

• Đó single hầu hết quan trọng lazy-loading rule: “Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay.” (bản dịch) «Không bao giờ lazy-load của bạn LCP image, as đó sẽ luôn lead để unnecessary tài nguyên load delay.» Nhảy đến trích dẫn
• Đó principle behind đó sub-part targets: “The vast majority of the LCP time should be spent loading the HTML document and LCP source.” (bản dịch) «Đó vast majority of đó LCP time nên là spent loading đó HTML document và LCP nguồn.» Nhảy đến trích dẫn

Google Search Central — thứ hạng

• “We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally.” (bản dịch) «We highly khuyến nghị chủ trang web achieve good Core Web Vitals cho success với Tìm kiếm và để bảo đảm một great người dùng experience generally.» (Relayed từ đó Tìm kiếm Central Core Web Vitals doc; xác nhận so với đó trực tiếp trang trước treating as cuối.)

LCP khắc phục checklist

Hoạt động nó khoảng top để bottom — phát hiện và TTFB đầu tiên, vì họ’re thường biggest, phần lớn commonly hỏng levers.

• tìm thấy thực tế LCP element (PageSpeed Insights Diagnostics, DevTools Performance panel, hoặc web-vitals library) — không optimize blind.
• Checked four sub-parts để see mà một là bottleneck trước khi thay đổi bất cứ điều gì.
• LCP image là không loading="lazy" (lazy loading belongs dưới fold chỉ).
• LCP image có fetchpriority="high".
• LCP image là discoverable trong ban đầu HTML — hoặc preloaded (<link rel="preload">) nếu nó loaded qua CSS/JS.
• không loading hero image qua JavaScript (hides nó từ preload scanner).
• Render-blocking CSS minimized/inlined; non-cốt yếu styles deferred.
• Không synchronous scripts trong <head>; dài tasks hỏng lên.
• Modern image format (WebP/AVIF), sensible compression, phân phối qua CDN với good Cache-Control.
• Dưới-fold images lazy-loaded so họ không contend cho bandwidth với LCP image.
• TTFB addressed: các chuyển hướng minimized, máy chủ phản hồi optimized, junk URL params dropped.
• Text LCP? sử dụng font-display: optional hoặc hệ thống fonts, và preloading bất kỳ đã đổi font file.
• Verified so với trường dữ liệu (CrUX / Search Console), không chỉ Lighthouse lab chạy.

LCP bảng tra nhanh

Thresholds (75th percentile của thực người dùng, by device)

** four sub-parts — Điều gì mỗi là và khắc phục**

Điều gì có thể là LCP element

• <img> · <image> bên trong <svg> · <video> poster · CSS background-image: url() · block-cấp độ text

Excluded by heuristic: opacity: 0, đầy đủ-viewport “background” elements, thấp-entropy placeholders.

Fast facts

• LCP là trường chỉ số (CrUX / Search Console drive thứ hạng); Lighthouse chỉ approximates và dùng stricter desktop Good của ≤ 1,2 s.
• LCP element có thể thay đổi during load; cuối cùng candidate trước khi người dùng interaction được tính.
• ~3 trong 4 các trang có image LCP; rest là text (fonts là lever).
• Image download time là thường smallest sub-part — compression không phải luôn câu trả lời.
• LCP ≠ FCP; LCP ≠ total trang load time.

Tools cho measuring và sửa LCP

Trường dữ liệu (Điều gì thứ hạng sử dụng)

• PageSpeed Insights — trường tab hiển thị của bạn thực-người dùng CrUX LCP; Diagnostics flags LCP element.
• Search Console — Core Web Vitals báo cáo — LCP status trên của bạn các URL, grouped, on thực-người dùng dữ liệu.
• Chrome Người dùng Experience Báo cáo (CrUX) — underlying trường dataset; as của Feb 2025 bao gồm four image-LCP sub-parts qua API.
• web-vitals JS library — log LCP và LCP element từ của bạn own thực-người dùng monitoring.

Lab dữ liệu (cho gỡ lỗi)

• Lighthouse — nhanh lab LCP và opportunities list (remember: stricter desktop thresholds hơn trường).
• Chrome DevTools — Performance panel — marks LCP node và đầy đủ render timeline.
• WebPageTest — waterfall view cho pinning xuống mà sub-part là chậm.

SEO các crawler

• Ahrefs trang web Audit — surfaces Core Web Vitals / performance các vấn đề trên trang web tại quy mô.

Cách tools themselves score

trực tiếp ví dụ của chỉ số điều này trang mô tả — well-known trang-speed và monitoring services được xếp hạng on của họ own thực-người dùng mobile LCP (Chrome UX Báo cáo trường dữ liệu):

LCP các cách sửa đó đích sai vấn đề

Lazy-loading hero image

loading="lazy" delays phát hiện của trên—fold image Đó là có khả năng để become LCP. Load nó eagerly, cho có khả năng candidate fetchpriority="high", và reserve lazy loading cho dưới—fold images.

Compressing mỗi image trước khi finding bottleneck

Image download duration là chỉ một của four LCP sub-parts và có thể là smallest. Identify LCP element và inspect TTFB, load delay, load duration, và render delay trước khi chọn khắc phục.

Loading hero qua JavaScript

JS-injected image hides của nó URL từ trình duyệt preload scanner và tạo tài nguyên load delay. Put image trong ban đầu HTML hoặc preload nó Khi CSS hoặc JS phải own nó.

Declaring victory từ một Lighthouse chạy

Lighthouse là controlled diagnostic, trong khi Google CWV verdict xuất hiện từ CrUX trường dữ liệu. sử dụng lab chạy để verify mechanism và chờ cho thực-người dùng dữ liệu để hiển thị liệu p75 outcome improved.

LCP tài nguyên bắt đầu muộn

Symptom: dài khoảng trống xuất hiện giữa TTFB và LCP tài nguyên yêu cầu. có khả năng nguyên nhân: lazy loading, JS phát hiện, CSS background image, hoặc thấp fetch priority. khắc phục: làm tài nguyên discoverable trong ban đầu HTML, xóa lazy loading, apply fetchpriority="high", hoặc preload nó. xác nhận yêu cầu moves trước đó trong trace.

tài nguyên loads nhưng LCP vẫn fires muộn

Symptom: load duration ends well trước khi LCP event. có khả năng nguyên nhân: render-blocking CSS, synchronous JavaScript, dài task, hoặc font kết xuất cho text LCP. khắc phục: reduce blocking hoạt động và kiểm thử font strategy cho text; xác nhận element render delay shrinks.

Lab LCP là good nhưng trường LCP là poor

Symptom: Lighthouse truyền trong khi CrUX hoặc Search Console không. có khả năng nguyên nhân: thực người dùng có khác devices, networks, bộ nhớ đệm trạng thái, geography, hoặc LCP elements. khắc phục: segment trường dữ liệu, capture RUM element/sub-part details, và reproduce chậm segment thay vì tuning chỉ default lab profile.

reported LCP element thay đổi giữa chạy

Symptom: DevTools identifies khác images hoặc text chặn. có khả năng nguyên nhân: responsive breakpoints, personalization, muộn DOM thay đổi, hoặc competing candidates. khắc phục: kiểm thử representative viewports và trạng thái, sau đó optimize mỗi recurring candidate thay vì assuming một desktop hero covers mỗi người dùng.

Hero image phát hiện: delayed so với sớm

simplified delayed implementation hides image behind JavaScript:

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

trình duyệt có thể discover và prioritize điều này version trong khi phân tích cú pháp HTML:

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

CSS background image: undisclosed so với preloaded

Khi LCP image phải vẫn CSS background, tiết lộ nó trước khi stylesheet finishes:

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

preload chỉ helps Khi của nó URL và yêu cầu các thuộc tính match thực tế tài nguyên.

List gần đây LCP candidates trong Chrome DevTools

Paste điều này vào Chrome DevTools Console, reload trang, và watch mỗi candidate trình duyệt các báo cáo. cuối cùng candidate trước khi interaction là relevant một.

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 });

tìm có khả năng lazy-loaded trên—fold images

Chạy điều này trong DevTools Console. nó lists lazy images whose top edge begins trong hiện tại viewport; verify thực LCP candidate trước khi removing thuộc tính.

[...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 các thuộc tính trong crawler

sử dụng điều này XPath trong Screaming Frog custom extraction để trả về images marked as cao priority:

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

Prove LCP khắc phục landed

Phát hiện-order kiểm thử

Kiểm thử để chạy: record DevTools Performance trace sau khi thay đổi hero image. Dự kiến kết quả: LCP yêu cầu bắt đầu trước đó và không phải lazy-loaded. thất bại interpretation: tài nguyên vẫn hidden, deprioritized, hoặc blocked behind một dependency. Monitoring window: immediate lab kết quả. Rollback trigger: thay đổi delays một cốt yếu tài nguyên hoặc làm lab LCP consistently tệ hơn.

Render-delay kiểm thử

Kiểm thử để chạy: so sánh LCP tài nguyên completion và LCP event trong tương đương trước khi/sau khi traces. Dự kiến kết quả: element render delay shrinks không có new layout hoặc visual regression. thất bại interpretation: CSS, JavaScript, hoặc fonts vẫn block paint. Monitoring window: immediate trên representative viewports. Rollback trigger: hỏng kết xuất, bị thiếu styles, hoặc tệ hơn recurring LCP.

Trường-outcome kiểm thử

Kiểm thử để chạy: monitor URL-cấp độ CrUX hoặc đầu tiên-party RUM p75 LCP sau khi deployment. Dự kiến kết quả: p75 moves toward hoặc vẫn trong Good ngưỡng không có regressing INP hoặc CLS. thất bại interpretation: lab case không phải representative hoặc một sub-part dominates thực visits. Monitoring window: RUM có thể lead; CrUX cần của nó rolling 28-day window để turn over. Rollback trigger: sustained trường regression tied để phát hành.

LCP các chỉ số worth theo dõi

Trường p75 LCP

Chỉ số: LCP tại 75th percentile by form factor. Điều gì nó tells bạn: liệu thực người dùng đáp ứng Core Web Vitals loading ngưỡng. Cách pull nó: CrUX, Search Console, hoặc đầu tiên-party RUM. Benchmark / realistic range: Good là tại hoặc dưới 2,5 seconds; segment mobile và desktop. Cadence: weekly, với CrUX rolling window recorded.

LCP sub-part distribution

Chỉ số: TTFB, tài nguyên load delay, load duration, và element render delay cho LCP. Điều gì nó tells bạn: mà stage owns chờ. Cách pull nó: representative lab traces và image-LCP subparts từ CrUX/RUM nơi khả dụng. Benchmark / realistic range: sử dụng bài viết approximate 40/10/40/10 diagnostic split as hướng dẫn, không universal performance promise. Cadence: sau khi template releases và monthly cho priority templates.

Good-LCP URL coverage

Chỉ số: quan trọng URL groups với Good trường LCP. Điều gì nó tells bạn: liệu improvement là rộng hoặc limited để sample trang. Cách pull nó: Search Console CWV groups plus URL-cấp độ CrUX cho priority các trang. Benchmark / realistic range: establish baseline by template; thấp-traffic các URL có thể lack riêng lẻ trường dữ liệu. Cadence: weekly.

Tự kiểm tra: Largest Contentful Paint

Five nhanh các câu hỏi on LCP việc đo lường và diagnosis. Pick câu trả lời cho mỗi, sau đó kiểm tra.

các tài nguyên worth của bạn time

My related writing

• Điều gì là Largest Contentful Paint (LCP) & Cách Improve nó — my đầy đủ LCP hướng dẫn on Ahrefs blog.
• Điều gì là Core Web Vitals (CWVs) & Cách Improve Them — Cách LCP fits với INP và CLS, và Vì sao nó hardest để khắc phục.
• Người mới bắt đầu Hướng dẫn để kỹ thuật SEO — nơi trang performance sits trong bigger picture.

Chính thức (Google / Chrome)

• Largest Contentful Paint (LCP) và Optimize LCP — canonical pair.
• Cách CWV thresholds là được định nghĩa — Vì sao behind 2,5 s.

từ others

• khắc phục của bạn trang web Largest Contentful Paint by optimizing image loading — MDN’s nhà phát triển-đầu tiên take, mạnh on bandwidth contention và JS-image anti-pattern.
• Performance — 2025 Web Almanac — HTTP Archive annual deep-dive; nguồn cho adoption số liệu on fetchpriority, preload usage, image so với text LCP splits, và truyền rates by device.
• Largest Contentful Paint (LCP) — DebugBear tài liệu cover waterfall analysis cho pinpointing sub-parts, progressive JPEG caveats, và iframe/soft-navigation các trường hợp biên.
• Largest Contentful Paint (LCP): Điều gì nó là, Cách Đo lường & Optimize — corewebvitals.io; thực RUM benchmarks, business impact case studies (Vodafone Italy), và Google Flights fetchpriority kết quả.
• Largest Contentful Paint | MDN Web Tài liệu — MDN reference cho LargestContentfulPaint API, element types, và trình duyệt compatibility.

Số liệu worth citing

• LCP là hardest Cốt lõi Web Vital để truyền. nó có phần lớn components, mà là Vì sao các trang struggle với nó nhiều hơn INP hoặc CLS. Nguồn
• Mobile là harder hơn desktop. Chậm hơn CPUs và connections push LCP lên, và on 3G/chậm connections 2,5 s ngưỡng là nearly không thể để hit. Nguồn
• Image download time là thường smallest part của LCP. Chrome analysis của HTTP Archive dữ liệu tìm thấy download duration frequently không phải bottleneck — TTFB và phát hiện delay thường là. Nguồn
• CrUX coverage là thin. Trong của chúng ta nghiên cứu của 42 million các trang, chỉ ~11,4% có associated CrUX trường dữ liệu — phần lớn các trang không nhận đủ thực-người dùng traffic để là measured. Nguồn
• 62% của mobile các trang so với 74% của desktop các trang achieve Good LCP (2025 Web Almanac). mobile khoảng trống reflects chậm hơn CPUs và network connections. Nguồn
• chỉ 2,1% của mobile các trang preload của họ LCP image, despite 76% có image as của họ LCP element — significant missed optimization opportunity (2025 Web Almanac). Nguồn
• fetchpriority="high" adoption grew từ 0,03% của mobile các trang trong 2022 để 17,3% trong 2025, largely driven by WordPress cốt lõi thêm nó (2025 Web Almanac). Google Flights saw 700 ms LCP improvement từ điều này single thuộc tính. Nguồn

Videos

• Google Search Central (YouTube) — Core Web Vitals và trang-experience explainers, including Chrome team walkthroughs của LCP optimization. Channel

Nhật ký thay đổi