CINXE.COM
Lighthouse Scoring calculator
<!DOCTYPE html> <html> <head> <title>Lighthouse Scoring calculator</title> <meta charset="utf-8" /> <!-- ToDO features: - store values together in localStorage? bugs: - when values are set in beginning (random or localstorage restored), the metric value can shift a little bit thanks to the observer on the score values. it only happens in this case. why? we dont know. but its dumb. - set a fixed explodey palette per each metric' --> <meta name="viewport" content="width=device-width, initial-scale=0.6"> <link rel="stylesheet" href="./style.css"> </head> <h1> <svg class="lh-topbar__logo" viewBox="0 0 24 24"> <defs> <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a"> <stop stop-color="#262626" stop-opacity=".1" offset="0%"></stop> <stop stop-color="#262626" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b"> <stop stop-color="#262626" stop-opacity=".1" offset="0%"></stop> <stop stop-color="#262626" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c"> <stop stop-color="#262626" stop-opacity=".1" offset="0%"></stop> <stop stop-color="#262626" stop-opacity="0" offset="100%"></stop> </linearGradient> <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d"> <stop stop-color="#FFF" stop-opacity=".1" offset="0%"></stop> <stop stop-color="#FFF" stop-opacity="0" offset="100%"></stop> </linearGradient> </defs> <g fill="none" fill-rule="evenodd"> <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"></path> <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"></path> <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"></path> <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"></path> <path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"></path> <path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"></path> <path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"></path> </g> </svg> Lighthouse Scoring Calculator </h1> <div id="container"></div> <footer class=wrapper> Learn more about scoring at <a href="https://web.dev/performance-scoring/">web.dev/performance-scoring</a>. <br> <details> <summary>Scores under 5/100 are not supported by this UI. <abbr>Why?</abbr> </summary> <a href="https://www.desmos.com/calculator/dufar5rf4g">Lighthouse uses log-normal curves</a>, which have extremely long tails. If this UI supported them then 50% of the "Value" slider's width would be devoted to scores under 8, which significantly reduces the usability of the slider. </details> </footer> <script defer type=module src="./calc.js"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-85519014-7', 'auto'); ga('send', 'pageview'); </script> </html>