코어 웹 바이탈은 LCP, INP, CLS로 페이지의 로딩, 입력 반응, 레이아웃 안정성을 살펴봅니다. 검색 최적화뿐 아니라 방문자가 과제를 끝낼 수 있는 경험과도 연결됩니다.
데모는 개선 전후의 세 계기판을 움직입니다. 하나의 종합 점수에만 매달리지 말고 현장 데이터에서 어떤 템플릿·기기·사용자에게 문제가 집중되는지 확인하세요.
언제 쓰나
느린 템플릿과 흔들리는 화면의 개선 우선순위를 정할 때 씁니다.
코어 웹 바이탈
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);