구글의 프론트엔드 성공 지표 Core Web Vitals

프론트엔드 성능

- 페이지 로드 속도

: 웹 서비스에 필요한 파일 크기와 개수, 응답 속도, 네트워크 연결 상태 등의 영향을 받음

 

- 빠른 반응성

: 자바스크립트의 실행 속도 등의 요소에 영향 받음

 

 

 

 

 

Core Web Vitals

: 구글이 웹 사이트 성능 최적화를 위해 중요하다고 판단한 3가지 지표

: 이는 검색엔진 최적화 (SEO)에도 영향을 미침

 

- 웹 사이트의 속도 (LCP, Largest Contentful Paint)

: 사용자가 웹 페이지를 로드 할 때 페이지의 가장 큰 콘텐츠 요소가 브라우저 화면에서 얼마나 빨리 렌더링 되는지 측정하는 지표

: 좋음 (2.5초 미만) / 개선 필요 (4초 미만) / 좋지 않음 (4초 이상)으로 판단

: 콘텐츠 요소는 이미지, 비디오, 텍스트 박스 등 모든 콘텐츠 중 크기가 가장 큰 것

 

- 안정성 (FID, First Input Delay)

: 사용자가 웹 페이지의 상호작용 요소 (버튼, 링크 등)를 클릭한 후 실제 브라우저에서 반응이 시작되기 까지 걸리는 시간

: 웹 페이지와 상호작용할 때 반응성이 얼마나 빠른지 나타냄

: 좋음 (0.1초 미만) / 개선 필요 (0.3초 미만) / 좋지 않음 (0.3초 이상)으로 판단

: 상호작용 요소 클릭 후 이벤트를 처리하는데 필요한 시간과 브라우저에서 다른 작업을 수행하는데 필요한 시간 등을 고려

 

- 시각적 안정성 (CLS, Cumulative Layout Shift)

: 웹 페이지에서 요소들의 이동이나 크기 조정 등 레아이웃이 예상치 못하게 변경되는 빈도의 양을 측정

: 좋음 (0.1 미만) / 개선 필요 (0.25 미만) / 좋지 않음 (0.25 이상)

: 웹 페이지의 레이아웃이 변경될 때 스크롤 위치나 버튼 위치 등이 예상치 못하게 바뀌는 여부를 확인

 

 

 

 

성능지표 측정 방법

- LIGHT HOUSE

: 구글에서 개발한 오픈소스 자동화 도구

: 웹 페이지의 성능, 접근성, SEO, PWA (Progressive Web App) 등을 측정하는데 사용

: 측정 결과 뿐만 아니라 웹 사이트 성능 및 사용자 경험을 개선할 수 있는 다양한  참고사항을 함께 제공

: 크롬 웹 스토어의 확장도구로 설치하여 사용

 

- PageSpeed Insights

: 구글에서 제공하는 웹 사이트 성능 측정 도구

: 웹 페이지의 로딩 속도를 측정하고 최적화 할 수 있는 방법을 제시

: 주로 모바일 기기에서 웹 페이지 성능을 측정

 

- 크롬 개발자 도구

: Network 탭에서 로딩 되는 리소스들의 정보를 확인

: 타임과 사이즈 등의 항목을 확인해서 세부 파일들의 크기와 로딩 시간을 확인

: water fall 차트를 보며 각 리소스들의 로딩 시간을 함께 확인하고 어떤 부분에서 병목이 발생하는지 확인

 

 

 

 

 

Reference

Sohee / 구글의 프론트엔드 성공 지표 Core Web Vital... | 커리어리

구글의 프론트엔드 성공 지표 ‘Core Web Vitals’ | 요즘IT