Largest Contentful Paint: LCP
What it is: Measures page load performance by looking at the time it takes to render the largest image or text block that’s visible to the device’s viewport, relative to when the page first started loading.
Goal: LCP should occur within 2.5 seconds of when the page first starts loading. Anything greater than 4.0 seconds will be rated “Poor” in Google’s Core Web Vitals reporting.
(image via https://web.dev/lcp/)
Improving LCP
Typically, there are four factors that affect Largest Contentful Paint:
- Server response times - Almost every web page on the internet loads data from a server somewhere, and if that server is slow, it will affect your LCP. Caching or using a CDN can help improve performance.
- Resource load times - Similarly, if you’re loading images, videos, or embedded assets in your page, keep in mind how long they take to load.
- Render-blocking JavaScript and CSS - Frontend styling and functionality is typically included in JavaScript or CSS files, but if not configured properly, they might “block” the rest of your page from loading until they resolve.
- Client-side rendering - Some frontend web development frameworks rely heavily on client-side rendering. If your frontend framework does this inefficiently, it may harm your LCP.
More detailed information and actionable insights can be found on the official LCP Core Web Vitals page by Google. Keep in mind that some of these actionable items might require help from your engineering team: https://web.dev/lcp/#how-to-improve-lcp