[WEB_DEV] Why does speed matter?
왜 웹사이트 속도가 중요한가?
1. 사용자 유지(리텐션)를 위한 핵심 요소
빠른 웹사이트는 사용자 이탈률을 줄이고, 더 오래 머물게 만든다.
c.f Google의 Core Web Vitals와 같은 사용자 중심 성능 지표 도입
2. 전환율(Conversion)을 높이는 요소
3. 사용자 경험(UX)의 기본
-
페이지가 로딩되기 전까지는 사용자 경험 자체가 없으며, 속도가 느릴수록 그 공백이 길어져 사용자가 이탈함.
-
특히 모바일 환경에서는 CPU, 메모리 한계로 인해 대용량 코드가 성능 저하로 이어지기 쉬움.
사용자 중심 성능 지표(User-centric performance metrics)의 필요성과 활용
1. 성능은 상대적이다
-
사용자의 네트워크 속도나 기기 성능에 따라 같은 사이트도 빠르게 혹은 느리게 느껴질 수 있음.
-
단순한 로딩 시간만으로는 진정한 사용자 경험을 설명할 수 없음.
-
성능을 논할 때는 반드시 측정 가능한 지표(메트릭) 를 기준으로 명확하게 말해야 함.
2. 성능 지표는 다음의 네 가지 질문에 기반해 사용자 경험을 반영
Is it happening?: 페이지 로딩이 제대로 시작되었는가?
Is it useful?: 사용자에게 유의미한 콘텐츠가 나타났는가?
Is it usable?: 사용자가 페이지와 상호작용할 수 있는가?
Is it delightful?: 상호작용은 매끄럽고 자연스러운가?- 성능을 구성하는 다양한 지표
FCP (First Contentful Paint): 첫 콘텐츠가 화면에 나타나기까지의 시간.
LCP (Largest Contentful Paint): 가장 큰 콘텐츠(텍스트/이미지)가 나타나는 시간.
INP (Interaction to Next Paint): 사용자 인터랙션의 반응성.
TBT (Total Blocking Time): 페이지 초기 로딩 중 사용자 입력을 방해한 시간.
CLS (Cumulative Layout Shift): 예기치 않은 레이아웃 이동 정도.
TTFB (Time to First Byte): 요청 후 첫 바이트가 도착하기까지의 시간.c.f. Web Vitals란?
Google이 주도한 이니셔티브로, 웹사이트의 사용자 경험 품질을 정량적으로 측정하고 개선할 수 있도록 하는 성능 지표 세트.
모든 사이트 운영자(개발자, 마케터, 기획자 포함)가 성능 전문가가 아니더라도 이해하고 활용할 수 있도록 설계됨.
Core Web Vitals (핵심 지표 3가지) -> Stable 상태
- 측정 도구
Field 측정 도구 (실제 사용자 기반 - 더 중요)
Chrome User Experience Report (CrUX)
Chrome DevTools
PageSpeed Insights
Google Search Console (Core Web Vitals Report)Lab 측정 도구 (시뮬레이션 기반)
Chrome DevTools
Lighthouse (단, INP 대신 TBT 사용)
- JavaScript로 Core Web Vitals 측정하기
: web-vitals 라이브러리를 사용하면 간단하게 Core Web Vitals 지표를 측정하고, 서버로 전송 가능.
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body) ||
fetch('/analytics', { body, method: 'POST', keepalive: true });
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);5번의 Core web vitals의 경우 회사 프로젝트에 실제로 도입해봐야겠다
[출처]
https://web.dev/learn/performance/why-speed-matters#performance_is_about_retaining_users
