perf.js from Philip Walton's video A deep dive into optimizing LCP

perf.js

new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    if (!lcpEntry.url) {
        // In case LCP is a <p> or <h1> etc (not a resource w url)
        console.log('LCP: ', lcpEntry.startTime, lcpEntry.element);
        console.log('LCP element outerHTML: ', lcpEntry.element.outerHTML);
        return;
    }
    
    const navEntry = performance.getEntriesByType('navigation')[0];
    const resEntries = performance.getEntriesByType('resource');
    const lcpResEntry = resEntries.filter((e) => e.name === lcpEntry.url)[0];
    
    const docTTFB = navEntry.responseStart;
    
    const lcpRequestStart = Math.max(docTTFB,
        lcpResEntry ? lcpResEntry.requestStart : 0);
    
    const lcpResponseEnd = Math.max(lcpRequestStart,
        lcpResEntry ? lcpResEntry.responseEnd : 0);
    
    const lcpRenderTime = Math.max(lcpResponseEnd,
        lcpEntry ? lcpEntry.startTime : 0);
    
    console.log('LCP: ', lcpRenderTime, lcpEntry.element);
    console.log('document_ttfb', docTTFB);
    console.log('resource_load_delay', lcpRequestStart - docTTFB);
    console.log('resource_load_time', lcpResponseEnd - lcpRequestStart);
    console.log('element_render_delay', lcpRenderTime - lcpResponseEnd);
    
    performance.measure('document_ttfb', 
        {start: 0, end: docTTFB});
    performance.measure('resource_load_delay', // Stagger time to force a new row.
        {start: docTTFB - 0.01, end: lcpRequestStart - 0.01});
    performance.measure('resource_load_time',
        {start: lcpRequestStart, end: lcpResponseEnd});
    performance.measure('element_render_delay', // Stagger time to force a new row.
        {start: lcpResponseEnd - 0.01, end: lcpRenderTime - 0.01});
    
}).observe({type: 'largest-contentful-paint', buffered: true});

The video: https://www.youtube.com/watch?v=fWoI9DXmpdk

Revision 2: Improved it by adding support for non-resource LCP element. See revision 1 if you want Philip Waltons original.