2022년 11월 21일
이론
조회 : 302|3분 읽기
Core Web Vitals
건전한 사이트를 위한 필수 메트릭
메트릭이란?
대시보드에서 볼 수 있는 특정 수치들을 그래프로 보여주는 일종의 시각화
🌐 Web Vitals이란
웹에서 우수한 사용자 경험을 제공하는 데 필수적인 품질 신호에 대한 통합 지침을 제공하기 위한 Google의 이니셔티브
TTFB(Time To First Byte)
페이지를 요청했을 때 서버에서 데이터의 첫 번째 바이트가 도착하는 시점
서버 성능과 직결된다.
최적화
서버 로직 최적화
DB 쿼리 최적화
RAM이나 CPU 같은 서버의 하드웨어 업그레이드
CDN 사용
FCP(First Contentful Paint, 최초 콘텐츠풀 페인트)
페이지가 로드되기 시작하고 컨텐츠의 일부가 화면에 렌더링 될 때 까지의 시간
최적화
CSS 최소화(사용하지 않는 CSS제거, CSS-in-JS 사용)
요청할 origin에 preconnect
TTFB 줄이기
캐시 활용
DOM size 줄이기
네트워크 payload 줄이기
코드 경량화, splitting (사용하지 않는 파일 import x, 라이브러리 x)
TTI (Time To Interactive, 상호 작용까지의 시간)
웹 페이지가 완전히 상호작용이 가능(interactive)하게 되는 시점
컨텐츠를 볼 수 있지만 스크롤 할 수 없거나 항목을 클릭해도 효과가 없으면 interactive 하지 않은 것이다.
최적화
JS 줄이기
요청할 origin에 preconnect
FCP, FMP 최적화
TBT (Total Blocking Time, 총 차단 시간)
스레드가 input 응답을 막을 정도로 오래 차단 되었을 때 FCP, TTI 사이의 총 시간을 나타낸다.
최적화
JS 실행시간 단축
스레드 작업 최소화
요청 수 down 전송 크기 down
FMP(First Meaningful Paint, 유의미한 최초 페인트)
사용자에게 의미 있는 콘텐츠(Hero elements)가 그려지는 시점으로 주요 컨텐츠를 보여주는
css, js가 호출된다.
하지만 이벤트 리스너는 아직 추가되지 않았다.
사용자는 이 시점에서 페이지가 완전히 로드 되었다고 인식한다.
최적화
JS 실행시간 단축
스레드 작업 최소화
요청 수 down 전송 크기 down
💡 Core Web Vitals란
모든 웹에 적용되는 Web Vitals의 하위 집합으로 모든 사이트 소유자가 측정해야 하며 모든 Google 도구의 표면에 위치한다.
각각의 Core Web Vitals는 사용자 경험의 고유한 측면을 나타내고 필드에서 측정 가능하며 필수적인 사용자 중심 결과에 대한 현실의 경험을 반영한다.
Core를 구성하는 메트릭은 시간이 지남에 따라 진화한다.
2020년 기준으로는 로딩(LCP), 상호 작용(FID), 시각적 안정성(CLS)에 중심을 두고 있다.
⏱️ LCP (Largest Contentful Paint, 최대 콘텐츠풀 페인트)
예전에는 FMP(유의미한 최초 페인트), SI(속도 인덱스) 같은 성능 메트릭을 권장했지만 페이지의 메인 컨텐츠가 로드된 시점을 식별하지 못해 LCP를 사용하게 되었다.
LCP는 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고한다.
최적화
1. 서버 응답
- 서버 최적화
- CDN 사용
- 자원 캐싱
- 요청할 origin에 preconnect
2. 렌더링 block
- CSS 최소화
- js 최소화
3. 리소스 로드 시간
- 이미지 최적화 ex) alt 사용, webp or avif 형식 사용...
- 중요한 자원 preload
- 적응형 자원 서빙
- 자원 캐싱
😡 CLS (Cumulative Layout Shift, 누적 레이아웃 이동)
페이지의 전체 수명 동안 발생하는 모든 예기치 않은 레이아웃 이동에 대해 가장 큰 레이아웃 이동 점수
레이아웃 이동은 시각적 요소가 렌더링된 프레임에서 다음 프레임으로 위치를 변경할 때마다 발생
최적화
이미지나 비디오 요소에 크기를 지정해 놓거나 placeholder 사용
layout 변경시 transform 사용
DOM 업데이트 전에 네트워크 응답을 대기하는 작업 지양
✏️ FID(First Input Delay, 최초 입력 지연)
사용자가 페이지와 처음 상호 작용할 때부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정
ex) 링크를 클릭하거나 버튼을 탭하거나 사용자 지정 JS 기반 컨트롤을 사용할 때
페이지에서 일부 콘텐츠를 렌더링했지만 아직 안정저긍로 상호 작용할 수 없는 상태이므로 일반적으로 긴 최초 입력 지연은 FCP, TTI 사이에 발생한다.
브라우저가 작업을 실행하는 동안 입력이 발생하기 때문에 입력에 응답하려면 작업이 완료될 때까지 기다려야 한다.
이러한 대기 시간이 이 페이지에서 사용자에 대한 FID 값이다.
최적화
Task 분할
- TBT 개선
- 코드 split
상호작용 준비를 위한 최적화
- JS lazy load
- 라이브러리 로딩시간 고려
web worker
- 백그라운드 스레드에서 JS 실행
참고