Skip to content

Instantly share code, notes, and snippets.

@jpigla

jpigla/a_core-web-vitals_bookmarklet.js

Last active September 24, 2021 13:46
Show Gist options
  • Save jpigla/9c1ec067e0986a1faf9b16faa6a9c673 to your computer and use it in GitHub Desktop.
Save jpigla/9c1ec067e0986a1faf9b16faa6a9c673 to your computer and use it in GitHub Desktop.
Download ZIP
Bookmarklet to see metrics of Core Web Vitals and elements in DevConsole
Raw
a_core-web-vitals_bookmarklet.js
javascript:%20(function%20()%20%7B%20%20%20%20%20%20%20%20%20%20%20%20const%20myStringOfstyles%3D%20%60%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.ttb-lcp-candidate%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outline:%204px%20dashed%20goldenrod%20!important%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20outline-offset:%20-4px%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%60%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20style%20%3D%20document.createElement(%27style%27)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20style.innerText%20%3D%20myStringOfstyles%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.head.appendChild(style)%3B%20%20%20%20%20%20%20%20%20%20%20%20function%20sendToHolder(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20delta,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20verdict%20%20%20%20%20%20%20%20%20%20%20%20%7D)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20holder%20%3D%20document.getElementById(%27webVitalsHolder%27)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(typeof%20(holder)%20%3D%3D%3D%20%27undefined%27%20%7C%7C%20holder%20%3D%3D%3D%20null)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20holder%20%3D%20document.createElement(%27div%27)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.id%20%3D%20%27webVitalsHolder%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.position%20%3D%20%27fixed%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.bottom%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.left%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.margin%20%3D%20%275px%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.padding%20%3D%20%275px%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.fontFamily%20%3D%20%27system-ui,%20-apple-system,%20BlinkMacSystemFont,%20%22Segoe%20UI%22,%20%22Roboto%22,%20Oxygen,%20Ubuntu,%20Cantarell,%20%22Fira%20Sans%22,%20%22Droid%20Sans%22,%20%22Helvetica%20Neue%22,%20Arial,%20sans-serif%3B%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.fontSize%20%3D%20%2712px%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.backgroundColor%20%3D%20%27%23fff%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.color%20%3D%20%27%23000%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.border%20%3D%20%271px%20solid%20%23000%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.borderRadius%20%3D%20%270.5rem%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.boxShadow%20%3D%20%270%2025px%2050px%20-12px%20rgba(0,0,0,.25)%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.style.zIndex%20%3D%20%27999999%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.body.appendChild(holder)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20element%20%3D%20document.getElementById(%27webVital-%27%20%2B%20name)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(typeof%20(element)%20!%3D%3D%20%27undefined%27%20%26%26%20element%20!%3D%3D%20null)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(verdict%20%3D%3D%3D%200)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20element.style.color%20%3D%20%27%230cce6b%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if%20(verdict%20%3D%3D%3D%201)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20element.style.color%20%3D%20%27%23ffa400%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if%20(verdict%20%3D%3D%3D%202)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20element.style.color%20%3D%20%27%23ff4e42%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20element.innerText%20%3D%20%60%20%24%7Bname%7D:%20%24%7Bdelta%7D%60%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20extractionSpan%20%3D%20document.createElement(%27span%27)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20extractionSpan.id%20%3D%20%27webVital-%27%20%2B%20name%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(verdict%20%3D%3D%3D%200)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20extractionSpan.style.color%20%3D%20%27%230cce6b%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if%20(verdict%20%3D%3D%3D%201)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20extractionSpan.style.color%20%3D%20%27%23ffa400%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20if%20(verdict%20%3D%3D%3D%202)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20extractionSpan.style.color%20%3D%20%27%23ff4e42%27%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20extractionSpan.innerText%20%3D%20%60%20%24%7Bname%7D:%20%24%7Bdelta%7D%60%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20holder.appendChild(extractionSpan)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20let%20CLS%20%3D%200,%20%20%20%20%20%20%20%20%20%20%20%20LCP%20%3D%200,%20%20%20%20%20%20%20%20%20%20%20%20FID%20%3D%200,%20%20%20%20%20%20%20%20%20%20%20%20CLSmax%20%3D%200,%20%20%20%20%20%20%20%20%20%20%20%20CLSCurr%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20sendToHolder(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name:%20%27old%20CLS%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20delta:%20CLS.toFixed(4),%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20verdict:%200%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20sendToHolder(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name:%20%27new%20CLS%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20delta:%20CLSmax.toFixed(4),%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20verdict:%200%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20var%20firstHiddenTime%20%3D%20document.visibilityState%20%3D%3D%3D%20%27hidden%27%20%3F%200%20:%20Infinity%3B%20%20%20%20%20%20%20%20%20%20%20%20document.addEventListener(%27visibilitychange%27,%20(event)%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20firstHiddenTime%20%3D%20Math.min(firstHiddenTime,%20event.timeStamp)%3B%20%20%20%20%20%20%20%20%20%20%20%20%7D,%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20once:%20true%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20new%20PerformanceObserver(list%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20list.getEntries().forEach(entry%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(entry.hadRecentInput)%20return%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20elist%20%3D%20entry.sources%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(%60CLS:%60,%20entry)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(%60Shifted:%60)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20elist.forEach((e)%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(e.node%20%26%26%20e.node.nodeType%20!%3D%3D%203)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20exStyle%20%3D%20e.node.style.cssText%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20e.node.style.cssText%20%3D%20%60%24%7BexStyle%7D%20outline:%204px%20dashed%20royalblue%3B%20outline-offset:%20-4px%3B%60%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CLS%20%2B%3D%20parseFloat(entry.value)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ver%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(CLS%20%3E%200.1%20%26%26%20CLS%20%3C%3D%200.25)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ver%20%3D%201%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(CLS%20%3E%200.25)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ver%20%3D%202%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sendToHolder(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name:%20%27old%20CLS%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20delta:%20CLS.toFixed(4),%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20verdict:%20ver%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%7D).observe(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type:%20%27layout-shift%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20buffered:%20true%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20let%20firstTs%20%3D%20Number.NEGATIVE_INFINITY,%20%20%20%20%20%20%20%20%20%20%20%20prevTs%20%3D%20Number.NEGATIVE_INFINITY%3B%20%20%20%20%20%20%20%20new%20PerformanceObserver((entryList)%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20for%20(const%20entry%20of%20entryList.getEntries())%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(entry.hadRecentInput)%20continue%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(entry.startTime%20-%20firstTs%20%3E%205000%20%7C%7C%20entry.startTime%20-%20prevTs%20%3E%201000)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20firstTs%20%3D%20entry.startTime%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CLSCurr%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20prevTs%20%3D%20entry.startTime%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CLSCurr%20%2B%3D%20entry.value%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CLSmax%20%3D%20Math.max(CLSmax,%20CLSCurr)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20let%20ver%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(CLSmax%20%3E%200.1%20%26%26%20CLSmax%20%3C%3D%200.25)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ver%20%3D%201%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(CLSmax%20%3E%200.25)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ver%20%3D%202%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sendToHolder(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name:%20%27new%20CLS%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20delta:%20CLSmax.toFixed(4),%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20verdict:%20ver%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%7D).observe(%7B%20type:%20%27layout-shift%27,%20buffered:%20true%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20new%20PerformanceObserver(list%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20list.getEntries().forEach(entry%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LCP%20%3D%20parseFloat(entry.renderTime)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(LCP%20%3D%3D%3D%200)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LCP%20%3D%20parseFloat(entry.loadTime)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B%5D.forEach.call(document.querySelectorAll(%27.ttb-lcp-candidate%27),%20function%20(el)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20el.classList.remove(%27ttb-lcp-candidate%27)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(%60LCP:%60,%20entry)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(entry.element)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20entry.element.classList.add(%27ttb-lcp-candidate%27)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ver%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(LCP%20%3E%202500%20%26%26%20LCP%20%3C%3D%204000)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ver%20%3D%201%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(LCP%20%3E%204000)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ver%20%3D%202%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sendToHolder(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name:%20%27LCP%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20delta:%20%60%24%7B(LCP%20/%201000).toFixed(2)%7D%20s%60,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20verdict:%20ver%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%7D).observe(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type:%20%27largest-contentful-paint%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20buffered:%20true%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20new%20PerformanceObserver(list%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20list.getEntries().forEach(entry%20%3D%3E%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20FID%20%3D%20parseFloat(entry.processingStart%20-%20entry.startTime)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(%60FID:%60,%20entry)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ver%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(FID%20%3E%20100%20%26%26%20FID%20%3C%3D%20300)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ver%20%3D%201%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(FID%20%3E%20300)%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ver%20%3D%202%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sendToHolder(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20name:%20%27FID%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20delta:%20%60%24%7BFID.toFixed(4)%7D%20Ms%60,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20verdict:%20ver%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%20%20%20%7D).observe(%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type:%20%27first-input%27,%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20buffered:%20true%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%7D)()%3B
Raw
core-web-vitals_bookmarklet.js
javascript: (function () {
function sendToHolder({ name, delta, verdict }) {
var holder = document.getElementById("webVitalsHolder");
if (typeof holder === "undefined" || holder === null) {
var holder = document.createElement("div");
holder.id = "webVitalsHolder";
holder.style.position = "fixed";
holder.style.bottom = 0;
holder.style.left = 0;
holder.style.margin = "15px";
holder.style.padding = "12px";
holder.style.fontFamily = "monospace";
holder.style.fontSize = "20px";
holder.style.backgroundColor = "#fff";
holder.style.color = "#000";
holder.style.border = "1px solid #000";
holder.style.borderRadius = "0.5rem";
holder.style.boxShadow = "0 25px 50px -12px rgba(0,0,0,.25)";
holder.style.zIndex = "999999";
document.body.appendChild(holder);
}
var element = document.getElementById("webVital-" + name);
if (typeof element !== "undefined" && element !== null) {
if (verdict === 0) {
element.style.color = "#0cce6b";
} else if (verdict === 1) {
element.style.color = "#ffa400";
} else if (verdict === 2) {
element.style.color = "#ff4e42";
}
element.innerText = `| ${name}: ${delta} |`;
} else {
var extractionSpan = document.createElement("span");
extractionSpan.id = "webVital-" + name;
if (verdict === 0) {
extractionSpan.style.color = "#0cce6b";
} else if (verdict === 1) {
extractionSpan.style.color = "#ffa400";
} else if (verdict === 2) {
extractionSpan.style.color = "#ff4e42";
}
extractionSpan.innerText = `| ${name}: ${delta} |`;
holder.appendChild(extractionSpan);
}
}
var CLS = 0;
var LCP = 0;
var FID = 0;
sendToHolder({ name: "CLS", delta: CLS.toFixed(4), verdict: 0 });
var firstHiddenTime = document.visibilityState === "hidden" ? 0 : Infinity;
document.addEventListener(
"visibilitychange",
(event) => {
firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
},
{ once: true }
);
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.hadRecentInput) return;
console.log(`CLS:`, entry);
CLS += parseFloat(entry.value);
var ver = 0;
if (CLS > 0.1 && CLS <= 0.25) {
ver = 1;
}
if (CLS > 0.25) {
ver = 2;
}
sendToHolder({ name: "CLS", delta: CLS.toFixed(4), verdict: ver });
});
}).observe({ type: "layout-shift", buffered: true });
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
LCP = parseFloat(entry.renderTime);
if (LCP === 0) {
LCP = parseFloat(entry.loadTime);
}
console.log(`LCP:`, entry);
var ver = 0;
if (LCP > 2500 && LCP <= 4000) {
ver = 1;
}
if (LCP > 4000) {
ver = 2;
}
sendToHolder({
name: "LCP",
delta: `${(LCP / 1000).toFixed(2)} s`,
verdict: ver,
});
});
}).observe({ type: "largest-contentful-paint", buffered: true });
new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
FID = parseFloat(entry.processingStart - entry.startTime);
console.log(`FID:`, entry);
var ver = 0;
if (FID > 100 && FID <= 300) {
ver = 1;
}
if (FID > 300) {
ver = 2;
}
sendToHolder({
name: "FID",
delta: `${FID.toFixed(4)} ms`,
verdict: ver,
});
});
}).observe({ type: "first-input", buffered: true });
})();
// (Visually) Modified
// Origin Credit: https://tamethebots.com/blog-n-bits/web-perf-iv-a-new-hope#bookmarklet
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment