Largest contentful Paint

Largest-Contentful-Paint.md

Largest contentful paint (LCP)

I wonder if i can see all the lcp elements instead of getting the eventual lcp element from the performance panel. Below script higlights all lcp elements available on the page. After running the script in console / source - snippet it highlight by a dotten blue line for all lcp elements. This uses browser's PerformanceObserver API to get all lcp elements.

By @samarpanda

/**
 * PerformanceObserver
 */
const po = new PerformanceObserver(list => {
  let entries = list.getEntries();

  entries = dedupe(entries, "startTime");
  
  /**
   * Print all entries of LCP
   */
  entries.forEach((item, i) => {
    console.dir(item);
    console.log(`${i+1} current LCP item : ${item.element}: ${item.startTime}`);
    /**
     * Highlight LCP elements on the page
     */
    item.element ? item.element.style = "border: 5px dotted blue;" : '';
  })
  
  /**
   * LCP is the lastEntry in getEntries Array
   */
  const lastEntry = entries[entries.length - 1];
  /**
   * Print final LCP
   */
  console.log(`LCP is: ${lastEntry.startTime}`);
});

/**
 * Start observing for largest-contentful-paint
 * buffered true getEntries prior to this script execution
 */
po.observe({ type: 'largest-contentful-paint', buffered: true })

function dedupe(arr, key){
  return [...new Map(arr.map(item => [item[key], item])).values()]
}

Demo screenshots

• 
• 
• 
• 

Hack to get lowest LCP - https://www.devisedlabs.com/blog/largest-contentful-paint-lcp-hack
Although i don't recommend this.