RUM은 사용자의 브라우저에서 성능 이벤트를 수집해 실제 환경의 분포를 보여줍니다. 한 번의 로컬 테스트보다 느린 기기나 네트워크에서의 경험을 찾기 쉽습니다.
데모에서는 방문자 점들이 쌓이고 75백분위 선이 이동합니다. 집계값을 볼 때는 페이지 종류, 기기, 지역 등을 나눠 원인을 찾고 개인정보 수집 범위도 제한합니다.
언제 쓰나
개선 우선순위를 정하거나 배포 전후 실제 사용자 경험을 비교할 때 씁니다.
실제 사용자 측정
Real User Monitoring
실제 방문자의 기기와 네트워크에서 나온 성능 값을 모읍니다.
···
<div class="atlas"><div class="head"><b>RUM · visits become a distribution</b><span class="pulse"></span></div><div class="stage"><div class="rum-plot box"><div class="rum-dots" id="rum-dots"></div><div class="rum-line" id="rum-line"><span>p75</span></div></div><div class="rum-foot mono"><span>fast</span><span id="rum-count">5 visits</span><span>slow</span></div></div></div>.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.rum-plot{height:76%;position:relative;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,var(--bg)),var(--bg))}.rum-dots{position:absolute;inset:10px 8px}.rum-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.8;transition:opacity .3s}.rum-line{position:absolute;left:62%;top:0;bottom:0;border-left:2px dashed var(--accent-2);transition:left .5s}.rum-line span{position:absolute;left:3px;top:4px;font-size:12px;color:var(--accent)}.rum-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:7px}const points=[15,27,38,45,53,58,62,68,72,77,84,89];let count=5;function tick(){count=count>=points.length?5:count+1;document.getElementById('rum-dots').innerHTML=points.slice(0,count).map((x,i)=>'<i class=rum-dot style="left:'+x+'%;top:'+(18+(i*37)%60)+'%"></i>').join('');document.getElementById('rum-line').style.left=points[Math.floor((count-1)*.75)]+'%';document.getElementById('rum-count').textContent=count+' visits'}tick();setInterval(tick,600)