Add Largest Contentful Paint documentation for Lighthouse

[kaycebasques]

Fixes #1628

Changes proposed in this pull request:

• Adds /lighthouse-largest-contentful-paint/
• Updates /lighthouse-performance/ to link to the new doc

[netlify]

Deploy preview for web-dev-staging ready!

Built with commit 255c2f2

https://deploy-preview-1639--web-dev-staging.netlify.com

[kaycebasques]

Rationale for why this doc should exist even though it's short:

The LCP doc by Phil Walton that already exists on web.dev is excellent. One might wonder why we need the new doc that's being created in this PR and why the Lighthouse UI shouldn't just link out to Phil's doc. In general, all of the Lighthouse documentation have the same structure, which we believe results in a more consistent UX. In other words, when you click on one of the "Learn more" links next to a metric in the Lighthouse report UI, you can expect the doc to tell you what the metric measures, how Lighthouse determines the metric score, and how to improve the metric.

Phil's post also doesn't cover any Lighthouse specific stuff, like how exactly Lighthouse calculates LCP data. So rather than hacking Phil's doc to cover an audience that it wasn't intended for (Lighthouse users), our general approach is to just create a minimal Lighthouse doc, and then link out to Phil's great content where relevant.

[kaycebasques]

As this comment mentions, the most obvious URL for this page already exists, so we'll have to use something like /lighthouse-largest-contentful-paint/, which is a bit clunky IMO, but probably NBD in the long run.

[kaycebasques]

@connorjclark how does LCP get mapped to red/green/orange?

Example: https://web.dev/first-contentful-paint/#how-lighthouse-determines-your-fcp-score

[connorjclark]

All performance scores are green @ 90, yellow @ 50. We haven't determined these curves yet, so I can't yet provide what LCP values these would be.

[kaycebasques]

See this comment if you're wondering why this doc should exist even though it's minimal and mostly just links out to web.dev/largest-contentful-paint/

[kaycebasques]

Hi @connorjclark since you wrote the first PR for LCP I'm guessing that you're the best PoC for this new LCP content.

Please provide a technical review on this PR:

• Reply to the comments where I ask you for technical details
• Check that the explanation of what LCP measures is accurate
• Check that the explanation of how Lighthouse gets LCP data is accurate
• Check if the guidance is relevant. In this case, the guidance is just a link to Phil's "How to improve LCP on your site" section, so it's just a matter of checking if Phil covered all of the important topics.

[connorjclark]

All performance scores are green @ 90, yellow @ 50. We haven't determined these curves yet, so I can't yet provide what LCP values these would be.

[kaycebasques]

Thank you @connorjclark for the review!

[kaycebasques]

Blocked until the audit lands in Lighthouse.