웹 성능을 개선하기 위해 알아야 할 세 가지 지표 LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift)에 대해 자세히 소개하고, Lighthouse로 개선하는 방법에 대해 살펴봅니다.
1. 웹 성능 개선은 무엇을 의미할까요?
2. 웹 성능 알아보기
3. Core Web Vitals
4. Lighthouse란?
5. Lighthouse로 개선하기
모바일 성능 모니터링, 웹 서버 성능 진단 및 부하테스트 컨설팅에 관심이 있으신 분은 아래 연락처로 연락해주시면, 전문 컨설턴트가 안내해드리겠습니다.
- 홈페이지: https://imqa.io
- 메일: support@imqa.io
- 전화: 02-6395-7730
- 채팅: https://imqa.channel.io/
50. Core Web Vitals
시각적인 안정성
빠른 상호작용
빠른 로딩
CLS
Cumulative Layout Shift
FID
First Input Delay
LCP
Largest Contentful Paint
사용자 경험을 최적화하는 핵심 지표
컨텐츠가 빠르게 나타나며, 빠른 반응의 상호작용과 안정적인 레이아웃은
사용자에게 좋은 경험을 안겨준다.
56. Lighthouse
Navigation Timespan Snapshot
라이트하우스 모든 지표 측정 가능
페이지 로딩 직후 접근성분석
단일 페이지 앱 분석하기 지원안함
시간범위에 따른 레이아웃 변화 측정
전체 성능 점수 측정 불가능
페이지 상태 분석 불가능
현재 상태에서 페이지 분석
현재 페이지의 DOM,
외부 요인 분석 불가능
분석 방법
71. LCP - Largest Contentful Paint
Lighthouse
Lagest Contentful Paint 같은 경우 화면에서 가장 큰 컨텐츠가 빠르게 나올 수록 높은 점수를 준다.
가장 큰 컨텐츠는 가장 중요한 컨텐츠이며
시각적으로 큰영역이기에 사용자가 빠르다고 느낍니다.
72. TBT - Total Blocking Time
Lighthouse
메인 스레드가 입력 응답을 막을 만큼 오래 차단되었을 때 FCP, TTI 사이의 총 시간을 측정
73. TBT - Total Blocking Time
Lighthouse
Long task의 50ms 제외한 나머지 시간
74. CLS - Cumulative Layout Shift
Lighthouse
레이아웃은 사용자에게 의도치않는 결과를 가져오게 만듭니다.
CLS는 화면기준으로 특정 영역이 이동한 거리로 계산합니다.
75. CLS - Cumulative Layout Shift
Lighthouse
버튼이 생성되면서 화면에서 반을 차지하고있는 초록박스가 이동됩니다.
버튼이 생성되면서 아래로 이동된 수치와 초록박스의 영향되는 영역을 계산
보여지는 화면 기준 초록박스 영역 50% x 아래로 이동된 수치 14%를 계산해서 0.5x0.14 = 0.07
76. CLS - Cumulative Layout Shift
Lighthouse
예상한 레이아웃 이동과 예상치 못한 레이아웃 이동
사용자 이벤트(입력) 기준으로 500ms가 지나면 예상치 못한 레이아웃이동