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와 반대로 페이지 콘텐츠 중 뭐라도 뜨기 시작한 시점까지의 시간.