browsertime
Version:
Get performance metrics from your web page using Browsertime.
42 lines (39 loc) • 1.95 kB
JavaScript
export const lcpHighlightScript = `
return (function(color) {
const observer = new PerformanceObserver(list => {});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
const entries = observer.takeRecords();
if (entries.length > 0) {
const largestEntry = entries[entries.length - 1];
// There could be cases where we do not get an element
if (largestEntry.element) {
const clientRect = largestEntry.element.getBoundingClientRect();
const canvas = document.createElement('canvas'); //Create a canvas element
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=2147483646;
canvas.id = "browsertime-lcp";
document.body.appendChild(canvas);
const context = canvas.getContext('2d');
context.rect(Math.max(0,clientRect.x), Math.max(0,clientRect.y), Math.min(clientRect.width, window.innerWidth - clientRect.x) , Math.min(clientRect.height, window.innerHeight-clientRect.y));
context.lineWidth = "6";
context.strokeStyle = color;
context.stroke();
context.fillStyle = color;
context.globalAlpha = 0.1;
context.rect(Math.max(0,clientRect.x), Math.max(0,clientRect.y), Math.min(clientRect.width, window.innerWidth - clientRect.x) , Math.min(clientRect.height, window.innerHeight-clientRect.y));
context.fill();
return '';
} else {
return 'No element attached to the entry in largest-contentful-paint';
}
} else {
return 'Chrome did not report any largest-contentful-paint';
}
})(arguments[arguments.length - 1]);
`;