Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save radum/386cda34bf0c26d882b9e7e277d1ad58 to your computer and use it in GitHub Desktop.
Save radum/386cda34bf0c26d882b9e7e277d1ad58 to your computer and use it in GitHub Desktop.
/**
* A bookmarklet for viewing the largest contentful paint in a page.
* Will show each LCP after the bookmarklet is clicked.
*
* To install:
* 1. Copy the code starting from the line beginning `javascript:`
* 2. Add a new bookmark in Chrome, and paste the code in as the URL.
**/
javascript:(function(){
try {
const canvas = document.createElement('canvas');
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'absolute';
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.zIndex = 100000;
canvas.style.pointerEvents = 'none';
document.body.appendChild(canvas);
const context = canvas.getContext('2d');
const po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
let rect = entry.element.getBoundingClientRect();
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = 'red';
context.strokeRect(rect.x,
rect.y,
rect.width,
rect.height);
}
});
po.observe({type: 'largest-contentful-paint', buffered: true});
} catch (e) {
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment