모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

Core Web Vitals

구글에서 만든 것으로 웹페이지의 성능을 평가하는 지표들.

LCP

Largest Contentful Paint

페이지 로딩 성능을 의미하는 것.

의미

정확히는 '페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간'

뷰포트란?
사용자에게 현재 노출되는 화면. 기기마다 다르다.

'큰 이미지와 텍스트'는 아래의 요소들을 뜻한다.

• <img>

• <svg> 내부의 <image>

• poster 속성을 사용하는 <video>

• url()을 통해 불러온 배경 이미지가 있는 요소

• 텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소

  • 이 블록 레벨 요소에는 <p>, <div> 등이 포함

각 엘리먼트가 뷰포트에 등장한 시점부터 뷰포트에서 가장 큰 텍스트 또는 이미지가 완전히 로딩되는 시점까지 걸리는 시간

-> 페이지의 정보를 화면에 전달하는 속도를 객관적으로 판단하기 위한 지표

기준 점수

2.5초 이내: 좋음

4초 이내: 보통

4초 이후: 느림

최적화

최적의 시나리오는 서버에서 빌드해온 HTML을 프리로드 스캐너가 바로 읽어서 LCP로 빠르게 가져가는 것.

• 클라이언트에서 빌드하지 말 것

• 이미지 용량 최적화

• 뷰포트 영역 내에서의 css 애니메이션 줄이기

• 리소스 직접 호스팅

FID

First Input Delay

최초 입력이 얼마나 지연되는가를 의미함.

의미

사용자가 페이지와 처음 상호 작용할 때, 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정.

화면이 최초에 그려지고 난 후, 상호작용을 수행했을 때 브라우저의 메인 스레드가 이 이벤트에 대한 반응을 할 수 있을 때까지 걸리는 시간.

이벤트 핸들러가 완료되는데 걸리는 시간은 측정하지 않음.

기준 점수

100ms 이내: 좋음

300ms 이내: 보통

300ms 이후: 나쁨

최적화

• 꼭 웹페이지에서 해야 하는 작업인가: 오래 걸리고, 굳이 프론트에서 하지 않아도 되는 작업이라면 서버에서 처리하는 것이 낫다.

• 긴 작업을 분리하기: 메인 스레드를 오래 점유하도록 하지 않고 쪼개서 사용자의 인터랙션을 받을 수 있도록 하자.

• 자바스크립트 코드 최소화: 코드 스플리팅, 폴리필 최소화 등.

• 자바스크립트 코드 실행 지연: script 태그의 async, defer를 이용한다.

  • defer: 해당 스크립트를 병렬로 다운로드 (메인 스레드 작업 멈추지 않음) 페이지 완전히 로딩된 이후에 스크립트 실행

  • async: 마찬가지로 병렬로 다운로드 후 다운로드 완료된 순서대로 실행

CLS

Cumulative Layout Shift

의미

페이지의 생명주기 동안 발생하는 모든 예기치 않은 요소 이동에 대한 지표

기준 점수

• 영향분율: 레이아웃 이동이 발생한 요소의 전체 높이와 뷰포트 높이의 비율

• 거리분율: 레이아웃 이동이 발생한 요소가 뷰포트 대비 얼마나 이동했는지

둘을 곱하여 최종 점수를 계산한다.

0.1 이하: 좋음

0.25 이하: 보통

그 외: 개선 필요

최적화

• 스켈레톤 UI 적극 활용

• 서버 사이드 렌더링

• 폰트 로딩 최적화

핵심은 아니지만 중요한 지표

TTFB

브라우저가 웹 페이지의 첫 번째 바이트를 수신하는 데 걸리는 시간.

서버사이드 렌더링 시에 주의 깊게 봐야 한다.

FCP

LCP와 반대로 페이지 콘텐츠 중 뭐라도 뜨기 시작한 시점까지의 시간.