Largest ContentFul Paint (LCP)



Largest ContentFul Paint (LCP) 1)

It captures when the page is fully usable by the user (Not when a splash screen or a loading indicator is seen by the user (ie first contentful paint) but after), relative to when the page first started loading.

How to measure ?

With the PerformanceObserver

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate: '+entry.startTime);
}).observe({type: 'largest-contentful-paint', buffered: true});

Discover More
Browser - Page and User Performance API

The performance timeline is an API to measure user or browser page load performance. Page load performance Example with By entry types:
How to preload HTML resource (Javascript, StyleSheet)

This article shows you how to preload HTML resources to use them at a later time.
Page (Load|Speed) Metric - First Contentful Paint (FCP)

First Contentful Paint (FCP) : is a page load timing metrics that measures the time: from navigation to the time when the browser renders the first bit of content from the DOM (which may be text,...
Browser Devtool Performance Page Load Timing
Page Load Event (Timing)

Page load timing are events that occurs during a page load. The snapshot below is the timing timeline in the devtool performance tab of a page load. where: FP - is the first paint - the paint of...
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...
Devtool Chrome Web Core Vital Overlay
Web Core Vital Metrics

The web core vitals are the three core page load metrics that a web page should focus on. Largest ContentFul Paint First Input Delay Cumulative Layout Shift: All layout shift cumulated You...
Html Script Async Vs Defer
What is the difference between the Async and Defer Script attribute ?

The script HTML element has two asynchronous loading method that may be chosen via the presence of the async or defer attribute. Asyncdeferresource fetch instructions In a page load, the following...

Share this page:
Follow us:
Task Runner