Lighthouse로 웹사이트 성능 측정하기
시작하며
안녕하세요. 숨고 프론트엔드 엔지니어 Zoey입니다.
급변하는 웹의 바다에서 개발자들은 이따금씩 배가 제대로 된 방향으로 가고 있는지 살펴볼 필요가 있습니다. 구글에서 만든 등대로 숨고가 잘 항해하고 있는지 확인해보겠습니다.
Lighthouse를 이용해 웹사이트를 진단하는 방법에 대해 포스팅 합니다.
Lighthouse란
Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다. 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단을 할 수 있습니다.
사용법
Lighthouse 크롬 확장 프로그램을 설치하여 시작할 수 있습니다.
측정할 웹 사이트의 페이지로 이동합니다. 개발자 도구를 열어 Lighthouse 탭으로 갑니다. Generate report 버튼을 클릭합니다. 현재 페이지가 자동으로 리로드되며 검사가 진행됩니다.
숨고 웹사이트의 메인페이지를 검사하고 있습니다.
검사가 완료되면 결과 리포트가 생성됩니다. 카테고리별 측정 항목 및 점수, 계산 방식, 최적화 방안 등이 리포트에 포함되어 있습니다. Lighthouse 탭에서 바로 확인할 수 있으며, json이나 gist로 저장해두고 Lighthouse Report Viewer 사이트에서 언제든지 이전 결과를 다시 확인해 볼 수 있습니다.
Performance
성능 카테고리
성능의 측정항목은 6가지 Metric으로 정의됩니다. 각 Metric들은 페이지가 로드되는 속도를 다양한 측면에서 측정합니다.
신호등
신호등 컬러코드는 항목별로 정해진 기준에 따라 지정됩니다. Metric마다 속도(소요 시간)와 점수에 대한 기준이 다릅니다. 초록색은 빠름, 노란색은 중간, 빨간색은 느림을 나타냅니다.
위의 표는 FCP(First Contentful Paint) 측정 항목에 대한 컬러코드 기준 예시입니다. 정해진 속도 범위 안에 들어가면, 컬러코드와 점수가 결정됩니다. 이 점수는 가중평균으로 계산되어 총 성능점수에 영향을 미치게 됩니다.
6 Metrics
First Contentful Paint
First Contentful Paint marks the time at which the first text or image is painted.
초기 DOM 콘텐츠를 렌더링하는데 걸리는 시간을 측정합니다. 첫번째 텍스트 또는 이미지가 표시되는 시간을 가리킵니다. FCP 측정 시점을 시작점으로 하는 다른 Metric들이 있기 때문에, 가장 먼저 찍히는 FCP는 다른 항목들의 점수 및 전체 점수에 큰 영향을 줄 수 있습니다.
Speed Index
Speed Index shows how quickly the contents of a page are visibly populated.
콘텐츠가 시각적으로 표시되는 진행 속도를 측정합니다. 리로드되는 페이지의 비디오를 캡쳐하여 프레임 간의 속도를 계산합니다.
SI 점수를 높이는 방법
- 메인 스레드 작업 최소화
- JavaScript 실행 시간 단축
- 폰트가 로드되는 중에도 텍스트가 계속 표시되도록
Largest Contentful Paint
Largest Contentful Paint marks the time at which the largest text or image is painted.
가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간입니다. 보통 중요한 콘텐츠일수록 크기가 크기 때문에, Lighthouse는 LCP 점수에 가장 높은 가중치인 25%를 주어 계산합니다.
LCP로 간주되는 요소
<img>요소<svg>안에 있는<image>요소<video>요소- background-image 속성의 url()로 로드되는 요소
- block 레벨 요소 (elements containing text nodes or other inline-level text elements children)
LCP의 크기로 간주되려면
일반적으로 뷰포트(viewport) 내에서 사용자에게 표시되는 요소 중 가장 크기가 큰 요소로 결정됩니다.
Time to Interactive
Time to interactive is the amount of time it takes for the page to become fully interactive.
사용자가 페이지와 완전하게 상호작용할 수 있을 때까지 걸리는 시간입니다. 단순히 시각적으로 보여지는 것 뿐만 아니라, 사용자가 페이지와 소통이 가능한 상태까지 렌더링 되어야 합니다. 예를 들면, 이벤트 핸들러가 가장 눈에 띄는 페이지 요소에 등록되는 시점에는 사용자와 사이트가 상호작용이 가능해졌다고 볼 수 있습니다.
TTI 점수를 높이는 방법
- JavaScript 실행 시간 최소화
Total Blocking Time
Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.
마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에 페이지가 응답하지 못하도록 차단된 총 시간을 의미합니다. FCP와 TTI 사이의 모든 Long Task 블로킹 타임을 추가하여 계산됩니다.
TBT 점수를 높이는 방법 (= Long Task의 근본적인 원인을 제거하는 방법)
- 불필요한 JavaScript 로드, 실행 코드 제거
- 코드 분할을 통해 JavsScript payload 감소시키기
- 사용하지 않는 코드 삭제
Cumulative Layout Shift
Cumulative Layout Shift measures the movement of visible elements within the viewport.
사용자가 예상치 못한 레이아웃 이동을 경험하는 것에 대한 점수입니다. 레이아웃 불안정이 사용자에게 미치는 부정적인 영향에 대해 검사해 볼 수 있습니다.
위와 같은 사용자 경험을 제공하는 웹 사이트의 CLS 점수는 높지 않을 것입니다.
가중 평균
총 성능 점수는 6가지 Metric 점수들의 가중 평균으로 계산됩니다. 가중치가 더 높은 Metric이 전체 성능 점수에 큰 영향을 주게 됩니다. 각 가중치(%)는 사용자의 성능 인식을 균형있게 검사하기 위해 정해집니다.
계산기
측정항목 밑에 있는 계산기 보기를 클릭하면 Lighthouse Scoring Calculator 페이지가 새창으로 뜹니다. 각 Metric의 속도(ms)와 점수, 가중치로 계산된 총 점수를 보여 줍니다. Range UI로 되어 있어서, 속도와 점수를 얼마만큼 향상시켜야 목표하는 점수를 받을 수 있는지 쉽게 조작해 볼 수 있습니다.
성능 점수가 변동하는 이유
Lighthouse를 통해 검사를 여러번 실행해보면, 동일한 페이지여도 항상 같은 점수가 나오지 않는다는 것을 알 수 있습니다. 디바이스와 네트워크 환경이 다를 경우 많게는 30–40점 까지도 차이가 났던 경험이 있습니다. 성능 점수를 신뢰할 수 있는지, 최적화 작업을 하더라도 성능이 향상 된건지 아닌지 알기 어려운 경우가 있을 수 있습니다.
Lighthouse팀에서는 점수의 변동성이 검사를 실행하는 근본적인 조건의 변화 때문이라고 얘기합니다. 일반적으로 다음과 같은 문제들 때문입니다.
- A / B 테스트 또는 광고 게시 변경
- 인터넷 트래픽 라우팅 변경
- 고성능 데스크톱 및 저 성능 노트북과 같은 다양한 장치에서 테스트
- JavaScript를 삽입하고 네트워크 요청을 추가/수정하는 브라우저 확장
- 바이러스 백신 소프트웨어
Lighthouse를 실행하는 환경에 따라 점수는 상이하게 나올 수 있고 이를 제어하기란 어렵습니다. 숨고 메인페이지 최적화 작업에서는 최소한 동일한 디바이스와 네트워크, ABtest는 모두 B군으로 고정시킨 환경에서 짧은 기간 내 여러번 실험하여 평균치를 내는 방법으로 실험하였습니다. 가능한 범위 내에서 변동성이 적은 결과를 도출하여 신뢰도를 높이고자 했습니다.
Opportunities
페이지를 빠르게 로드하는 데 도움이 될 수 있는 방안을 추천해줍니다. 이 권장사항들은 성능 점수에 직접적인 영향을 주지는 않지만, Metric들의 속도를 느리게 하는 원인일 가능성이 있기에 시도해 볼 만합니다. 추천 항목들의 오른쪽 화살표를 클릭해 열어보면 각 항목에 대한 설명과 함께 개선해야 할 세부 내용들과 현재 크기, 절감 가능한 범위까지 확인해 볼 수 있습니다.
Diagnostics
애플리케이션 성능과 관련한 추가 정보로, opportunities와 마찬가지로 성능 점수에 간접적인 영향을 미칠 수 있습니다.
Passed Audits
검사에 통과한 항목들을 보여줍니다.
마무리하며
최적화 라는 것은 당장은 피할 수 있어도 언제까지고 미룰 수 있는 문제는 아닙니다. 의식적으로 성능 개선을 위한 노력이 필요한 것 같습니다. 주기적으로 프로젝트를 점검해보고 현재 상태를 알고 있는 것은 첫걸음이겠죠? 친절한 Lighthouse의 도움을 받으면 실마리를 좀 더 빨리 찾을 수 있을 것 같습니다.
공식사이트
- #benchmark
- #development
- #frontend
Zoey Kang
Frontend Engineer
