LCP(Largest Contentful Paint)
뷰포트에서 가장 큰 콘텐츠 엘리먼트가 나타날 때 측정한다. 페이지의 주요 내용이 화면에 렌더링이 완료되는 시기를 결정하는데 사용된다.
FID(First Input Delay)
FID는 사용자가 페이지와 처음 상호 작용할 때(예: 링크를 클릭하거나 버튼을 탭하거나 사용자 지정 JavaScript 기반 컨트롤을 사용할 때)부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정합니다.
TBT(Total Blocking Time)
총 차단 시간(TBT) 메트릭은 메인 스레드가 입력 응답을 막을 만큼 오래 차단되었을 때 First Contentful Paint(최초 콘텐츠풀 페인트, FCP)와 Time to Interactive(상호 작용까지의 시간, TTI) 사이 총 시간을 측정합니다.
CLS(Cumulative Layout Shift)
방문자에게 콘텐츠가 얼마나 불안정한 지 측정하는 사용자 경험 측정 항목 입니다.
현재 보고 있는 페이지에 갑자기 발생하는 레이아웃의 변경은 시각적으로 거슬리며 사용자의 주의를 산만하게 합니다.
또한 잘못된 클릭을 유도하여 실제 피해를 일으킬 수도 있고 아주 실망스러운 사용자 경험으로 이어질 것입니다.
CLS(Cumulative Layout Shift) 측정은 사용자에게 발생하는 레이아웃 이동(layout shift) 빈도를 측정하여 이 문제를 해결하는 데 도움이 됩니다.
웹 성능 개선을 위한 방법
API 응답 속도 줄이기
Javascript 비동기 처리 개선
SWR 라이브러리의 local mutate 활용
Layout Shift 를 방지하기 위한 구조 개선
불필요한 API 호출, rerendering 줄이기
페이지 전환시 답답함을 해소하기 위한 애니메이션 추가
Bundle 사이즈를 크게 만드는 라이브러리 교체
