Core Web Vitals

<div class="vitals"><div class="status" id="state">BEFORE</div><div class="gauges"><div class="g"><b>LCP</b><div class="track"><i></i></div><small id="lcp">slow</small></div><div class="g"><b>INP</b><div class="track"><i></i></div><small id="inp">laggy</small></div><div class="g"><b>CLS</b><div class="track"><i></i></div><small id="cls">shifting</small></div></div><button id="optimize">OPTIMIZE</button></div>

.vitals{width:min(90%,570px);font:900 clamp(10px,max(1.9vmin,1vw),16px) sans-serif;color:var(--fg)}.status{color:var(--accent);letter-spacing:.12em;margin-bottom:clamp(7px,2vmin,18px)}.gauges{display:flex;gap:clamp(8px,2vmin,18px)}.g{flex:1;display:grid;gap:clamp(6px,1.2vmin,10px);background:var(--surface);border:1px solid var(--line);padding:clamp(9px,1.8vmin,17px)}.g b{font-size:clamp(13px,2.8vmin,23px)}.g small{color:var(--muted)}.track{height:clamp(9px,2vmin,18px);background:var(--line);border-radius:12px;overflow:hidden}.track i{display:block;height:100%;width:83%;background:var(--accent);transition:width .55s,background .55s}.vitals.good .track i{width:28%;background:var(--accent-2)}button{margin-top:clamp(9px,2vmin,17px);background:var(--fg);color:var(--bg);border:0;padding:6px 12px;font:inherit;cursor:pointer}small{font-size:max(.833em,10px,1vw)}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const box=document.querySelector('.vitals'),state=document.querySelector('#state'),button=document.querySelector('#optimize');let good=false;function show(){box.classList.toggle('good',good);state.textContent=good?'AFTER':'BEFORE';['lcp','inp','cls'].forEach((id,i)=>document.querySelector('#'+id).textContent=good?['fast','responsive','stable'][i]:['slow','laggy','shifting'][i])}button.addEventListener('click',()=>{clearInterval(timer);good=!good;show()});setTimeout(()=>{good=true;show()},950);const timer=setInterval(()=>{good=!good;show()},3400);