Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Add LCP phase breakdown to the Lighthouse docs #6125

Merged
merged 3 commits into from
May 3, 2023
Merged

Add LCP phase breakdown to the Lighthouse docs #6125

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
845a362
Add LCP phase breakdown to the Lighthouse docs
adamraine Apr 26, 2023
6c8fcdc
ope
adamraine Apr 26, 2023
79ebe5e
remove 77
adamraine Apr 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions site/en/docs/lighthouse/performance/lighthouse-largest-contentful-paint/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ details on how LCP is determined.

## How Lighthouse determines your LCP score

Browser support for LCP launched in [Chrome 77][launch]. Lighthouse extracts LCP data from
[Chrome's tracing tool](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool).
Lighthouse extracts LCP data from [Chrome's tracing tool](https://www.chromium.org/developers/how-tos/trace-event-profiling-tool).

The table below shows how to interpret your LCP score:

Expand Down Expand Up @@ -61,15 +60,22 @@ The table below shows how to interpret your LCP score:

## How to improve your LCP score

See [How to improve Largest Contentful Paint on your site][improve].
If the LCP is an image, the timing can be broken down into four phases.
Knowing which phases take the longest can help you [optimize your LCP][improve].
Lighthouse will display the LCP element along with the phase breakdown in the "Largest Contentful Paint element" diagnostic.

| LCP phase | Description |
| ------------------------- | ----------- |
| Time to first byte (TTFB) | The time from when the user initiates loading the page until when the browser receives the first byte of the HTML document response. [Learn more about TTFB](https://web.dev/ttfb/). |
| Load delay | The delta between TTFB and when the browser starts loading the LCP resource. |
| Load time | The time it takes to load the LCP resource itself. |
| Render delay | The delta between when the LCP resource finishes loading until the LCP element is fully rendered. |

## Resources

- [Source code for **Largest Contentful Paint** audit](https://github.com/GoogleChrome/lighthouse/blob/main/core/audits/metrics/largest-contentful-paint.js)
- [Largest Contentful Paint](https://web.dev/lcp/)
- [Largest Contentful Paint API](https://wicg.github.io/largest-contentful-paint/)
- [New in Chrome 77: Largest Contentful Paint][launch]

[definition]: https://web.dev/lcp/#what-is-lcp
[launch]: /blog/new-in-chrome-77/#lcp
[improve]: https://web.dev/lcp/#how-to-improve-lcp
[improve]: https://web.dev/optimize-lcp/