본 글은 요즘 IT의 Core Web Vitals에 관한 글을 읽고 정리한 내용이다.
낮은 품질의 성능을 가진 웹사이트의 경우 사용자 경험을 악화시키고
이는 사용자 이탈율 증가로 수익 손실로 이어질 수 있다.
따라서 단순히 '기능' 제공이 아닌 양질의, 성능 좋은 서비스를 개발하는 것이 중요하다.
Core Web Vitals 란 성능 최적화를 위해 우선 순위를 결정할 수 있도록 돕는 지표이다.
이를 준수해 웹사이트를 개발하면 성능은 물론 검색 엔진 최적화까지 진행할 수 있다.
★ Core Web Vitals의 세가지 지표
1. LCP (Largest Contentful Paint) : 페이지 로딩 속도 측정
-
사용자가 웹페이지를 로드할 때 페이지의 가장 큰 콘텐츠 요소가 브라우저 화면에 얼마나 빨리 렌더링 되는지 측정하는 지표 (이미지, 비디오, 텍스트 박스 등)
- 2.5초 미만 - 좋음
- 2.5초 이상 4초 미만 - 개선 필요
- 4초 이상 - 좋지 않음
-
빠른 LCP는 사용자가 페이지를 보다 빠르게 파악하고 상호작용 할 수 있게 함.
2. FID (First Input Delay) : 대화형 성능 측정
- 사용자가 웹페이지의 상호작용 요소를 클릭한 후 실제로 브라우저에서 반응이 시작되기까지 걸리는 시간을 측정하는 지표.
- 0.1초 미만 - 좋음
- 0.1초 이상 0.3초 미만 - 개선필요
- 0.3초 이상 - 좋지 않음
- 이는 사용자 경험과 직결되는 부분으로, FID가 좋지 않을 경우 사용자의 이탈 가능성이 높아짐.
3. CLS (Cumulative Layout Shift) : 콘텐츠 안정성 측정
-
웹 페이지에서 요소들의 이동이나 크기 조정 등 레이아웃이 예상치 못하게 변경되는 빈도와 양을 측정하는 지표
- 0.1 미만 - 좋음
- 0.1 이상 0.25 이하 - 개선 필요
- 0.25 이상 - 좋지 않음
-
웹페이지의 레이아웃이 변경되는 경우 스크롤 위치나 버튼 위치 등이 예상치 못하게 바뀌어
사용자에게 혼란을 주거나 사용자가 의도하지 않은 동작을 수행하여 사용자 경험을 저해할 수 있음.
★ 성능 지표 측정 툴
1. LightHouse
웹페이지 성능, 접근성, SEO, PWA(Progressive Web App)등을 측정하는데 사용할 수 있음.
2. PageSpeed Insights
웹페이지 로딩 속도 측정 및 최적화 방법 제시
PageSpeed Insight의 경우 모바일 기기에서의 웹페이지 성능 측정하는데 사용하는 반면 LightHouse는 성능 및 접근성, SEO, PWA등 다양한 측면에서의 품질을 측정하는데 사용.
3. 크롬 개발자 도구
웹 개발 및 디버깅에 필요한 다양한 기능을 제공하는 도구 모음. Network 탭에서 웹페이지 성능 측정 및 디버깅을 할 수 있음.
