Skip to content

Instantly share code, notes, and snippets.

@jaesbit
Created November 23, 2023 16:35
Show Gist options
  • Save jaesbit/8ab2f3b4905b41886c7f3bb6ad25be3b to your computer and use it in GitHub Desktop.
Save jaesbit/8ab2f3b4905b41886c7f3bb6ad25be3b to your computer and use it in GitHub Desktop.
[tampermonkey] CLS logger using web-vitals library
// ==UserScript==
// @name (Web-Vitals lib) Cumulative Layout Shift Measure
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Try to improve your CWV score
// @author @jaesbit
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
var script = document.createElement('script');
script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
script.onload = function () {
// When loading `web-vitals` using a classic script, all the public
// methods can be found on the `webVitals` global namespace.
webVitals.onCLS(event => console.log('[CLS-lib]', event));
webVitals.onFID(event => console.log('[CLS-lib]', event));
webVitals.onLCP(event => console.log('[CLS-lib]', event));
};
document.head.appendChild(script);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment