Skip to content

Instantly share code, notes, and snippets.

@addyosmani

addyosmani/lcp.js

Last active March 26, 2024 00:09
Show Gist options
  • Save addyosmani/c053f68aead473d7585b45c9e8dce31e to your computer and use it in GitHub Desktop.
Save addyosmani/c053f68aead473d7585b45c9e8dce31e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. addyosmani revised this gist Mar 26, 2024. 1 changed file with 46 additions and 45 deletions.
    91 changes: 46 additions & 45 deletions lcp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,64 +1,65 @@
    const puppeteer = require('puppeteer');
    const devices = require('puppeteer/DeviceDescriptors');

    const Good3G = {
    'offline': false,
    'downloadThroughput': 1.5 * 1024 * 1024 / 8,
    'uploadThroughput': 750 * 1024 / 8,
    'latency': 40
    'offline': false,
    'downloadThroughput': 1.5 * 1024 * 1024 / 8,
    'uploadThroughput': 750 * 1024 / 8,
    'latency': 40
    };

    const phone = devices['Nexus 5X'];
    const phone = puppeteer.KnownDevices['Nexus 5X'];

    function calcLCP() {
    window.largestContentfulPaint = 0;
    window.largestContentfulPaint = 0;

    const observer = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    const lastEntry = entries[entries.length - 1];
    window.largestContentfulPaint = lastEntry.renderTime || lastEntry.loadTime;
    });
    const observer = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    const lastEntry = entries[entries.length - 1];
    window.largestContentfulPaint = lastEntry.renderTime || lastEntry.loadTime;
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });

    document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
    observer.takeRecords();
    observer.disconnect();
    console.log('LCP:', window.largestContentfulPaint);
    }
    });
    document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
    observer.takeRecords();
    observer.disconnect();
    console.log('LCP:', window.largestContentfulPaint);
    }
    });
    }


    async function getLCP(url) {
    const browser = await puppeteer.launch({
    args: ['--no-sandbox'],
    timeout: 10000
    });
    const browser = await puppeteer.launch({
    args: ['--no-sandbox'],
    timeout: 10000
    });

    try {
    const page = await browser.newPage();
    const client = await page.target().createCDPSession();
    try {
    const page = await browser.newPage();
    const client = await page.createCDPSession();

    await client.send('Network.enable');
    await client.send('ServiceWorker.enable');
    await client.send('Network.emulateNetworkConditions', Good3G);
    await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
    await page.emulate(phone);
    await client.send('Network.enable');
    await client.send('ServiceWorker.enable');
    await client.send('Network.emulateNetworkConditions', Good3G);
    await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
    await page.emulate(phone);

    await page.evaluateOnNewDocument(calcLCP);
    await page.goto(url, { waitUntil: 'load', timeout: 60000 });
    await page.evaluateOnNewDocument(calcLCP);
    await page.goto(url, { waitUntil: 'load', timeout: 60000 });

    let lcp = await page.evaluate(() => {
    return window.largestContentfulPaint;
    });
    return lcp;
    browser.close();
    } catch (error) {
    console.log(error);
    browser.close();
    }
    let lcp = await page.evaluate(() => {
    return window.largestContentfulPaint;
    });

    browser.close();
    return lcp;

    } catch (error) {
    console.log(error);
    browser.close();
    }
    }

    getLCP("https://pptr.dev").then(lcp => console.log("LCP is: " + lcp));
    getLCP("https://remix-clone-hacker-news.flameddd1.workers.dev/")
    .then(lcp => console.log("LCP is: " + lcp));
  2. addyosmani revised this gist Mar 17, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions lcp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@ function calcLCP() {
    }


    async function getCLS(url) {
    async function getLCP(url) {
    const browser = await puppeteer.launch({
    args: ['--no-sandbox'],
    timeout: 10000
    @@ -61,4 +61,4 @@ async function getCLS(url) {
    }
    }

    getCLS("https://pptr.dev").then(lcp => console.log("LCP is: " + lcp));
    getLCP("https://pptr.dev").then(lcp => console.log("LCP is: " + lcp));
  3. addyosmani created this gist Mar 17, 2020.
    64 changes: 64 additions & 0 deletions lcp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    const puppeteer = require('puppeteer');
    const devices = require('puppeteer/DeviceDescriptors');

    const Good3G = {
    'offline': false,
    'downloadThroughput': 1.5 * 1024 * 1024 / 8,
    'uploadThroughput': 750 * 1024 / 8,
    'latency': 40
    };

    const phone = devices['Nexus 5X'];

    function calcLCP() {
    window.largestContentfulPaint = 0;

    const observer = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    const lastEntry = entries[entries.length - 1];
    window.largestContentfulPaint = lastEntry.renderTime || lastEntry.loadTime;
    });

    observer.observe({ type: 'largest-contentful-paint', buffered: true });

    document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
    observer.takeRecords();
    observer.disconnect();
    console.log('LCP:', window.largestContentfulPaint);
    }
    });
    }


    async function getCLS(url) {
    const browser = await puppeteer.launch({
    args: ['--no-sandbox'],
    timeout: 10000
    });

    try {
    const page = await browser.newPage();
    const client = await page.target().createCDPSession();

    await client.send('Network.enable');
    await client.send('ServiceWorker.enable');
    await client.send('Network.emulateNetworkConditions', Good3G);
    await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
    await page.emulate(phone);

    await page.evaluateOnNewDocument(calcLCP);
    await page.goto(url, { waitUntil: 'load', timeout: 60000 });

    let lcp = await page.evaluate(() => {
    return window.largestContentfulPaint;
    });
    return lcp;
    browser.close();
    } catch (error) {
    console.log(error);
    browser.close();
    }
    }

    getCLS("https://pptr.dev").then(lcp => console.log("LCP is: " + lcp));