Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* 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) {
}
})();
@siakaramalegos

This comment has been minimized.

Copy link

@siakaramalegos siakaramalegos commented May 5, 2021

I'm a nerd and deployed a mini site so that folks can drag the link to their bookmarks: https://projects.sia.codes/bookmarklets/

@anniesullie

This comment has been minimized.

Copy link
Owner Author

@anniesullie anniesullie commented May 10, 2021

Awesome! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment