Run the lighthouse to light your web page

What is the Lighthouse?

lighthouse는 chrome 내 개발자도구에 내장된 웹앱의 품질개선에 도움을 주는 자동화 performance 측정 도구이다. 구글이 직접 운영하는 open source project이다. chrome extension 설치 후 F12로 개발자 도구를 열어 lighthouse 탭에서 Analyze page load를 선택하면 현재 페이지가 자동으로 reload 되며 검사가 진행되고 lighthouse report를 생성해준다.

lighthousereport에는 Performance(성능), Accessibility(웹접근성), Best practices(웹표준), SEO(검색엔진최적화), PWA(Progressive Web app, 모바일화) 다섯개 항목을 점수화 해서 보여준다.
이번 포스트에서는 Performance 측정시 어떤 기준을 가지고 평가하는지 구체적으로 알아보도록 하자.

Performance metrics of Lighthouse

lighthouse는 성능측정을 위해서 다음과 같은 metric들을 사용한다(metric은 다음 버전에서 새로 생기거나 때로는 사라지기도 한다). 그럼 하나하나씩 알아보도록 하자.

✔︎ 성능 지표를 추적하는 metric
✔︎ 사용자가 웹페이지에 접속했을때 첫번째 DOM Content를 rendering 하는데 걸리는 시간을 측정한다. 이는 곧 사용자가 느끼는 페이지 로딩속도로 판단할 수 있고, FCP가 1.8초 이하의 경우 우수한 사용자 경험을 제공한다고 할 수 있다.
✔︎ 해당 페이지의 image, canvas요소, svg 등 모두 DOM Content로 구분되며, iframe의 경우는 포함되지 않는다.

✔︎ viewport를 차지하는 가장 큰 content(image, 텍스트블록)의 rendering 시간을 측정한다.
✔︎ LCP로 간주되는 요소는 다음 등이 있다
▸<img/>와 <video /> 요소
▸background-image의 url로 load되는 요소
▸block 요소
✔︎ LCP가 0 ~ 2.5초일 경우 Fast(Green) / 2.5 ~ 4초는 Moderate(Orange) / 4초 이상은 Slow(Red)

✔︎ 웹페이지를 load하는 동안 컨텐츠가 얼마나 빠르게 표시되는지를 측정한다.
✔︎ 측정원리: 페이지 load를 각 frame마다 캡쳐하고, frame간에 보이는 컨텐츠를 파악하고 Speedline module을 이용해 측정해 표시한다.
✔︎ 점수를 높이는 방법
▸javascript 실행 시간 단축
▸font load 중에도 텍스트 표시 유지
▸main thread 작업을 최소화
✔︎ Speed index가 0 ~ 3.4일때 Fast(Green) / 3.4 ~ 5.8은 Moderate(Orange) / 5.8 이상은 Slow(Red)

✔︎ 페이지 load시점부터 유저가 실제 interaction이 가능한 시점까지의 시간을 측정하고, 아래와 같은 기준을 가진다.
▸페이지가 0.05초 안에 사용자의 interaction에 응답한다
▸event handler가 가장 잘보이는 element에 등록된다
▸페이지에 FCP(First contentful paint)로 측정된 컨텐츠가 보여야한다.
✔︎ Time to interactive가 0 ~ 3.8초일때 Fast(Green) / 3.9 ~ 7.3초는 Moderate(Orange) / 7.3초 이상은 Slow(Red)

✔︎ 웹페이지를 접속한 유저가 실제 interaction하기까지 block된 시간을 측정한다.
✔︎ Lighthouse에서는 FCP와 TTI 사이의 긴 시간의 작업을 모두 기록하여 TBT를 측정한다.

✔︎ 컨텐츠가 유저에게 보여질때, 예상치못하게 얼마나 움직이는지를 수치화한 지표이다.
▸예) 상단의 메인배너가 뒤늦게 load되면서 아래쪽의 컨텐츠가 밀리는 경우
▸예) 웹폰트가 뒤늦게 load되면서 시스템폰트를 대체하는데 폰트의 줄간격이 달라 레이아웃이 변하는 경우
✔︎ 0 ~ 1 까지의 범위가 있으며, 0.1이하의 경우 우수한 경험을 제공한다고 판단한다.

위 metric들은 다음의 가중치(weight)를 가지고 평균점수 계산에 이용된다.

그리고 각 취약점들에 대해 Opportunities, Diagnostics 결과를 제공해주어 개선이 될수 있는 방안을 추천해준다.

성능 최적화를 하는 것은 개발자에게 항상 미뤄둔 숙제같은 느낌일 것이다. 우리는 항상 생각하고 개발을 진행해야한다.(하지만 물론 쉽진 않다..)
그리고 이렇게 직접적인 지표를 개선하는 방법도 있겠지만, 좀더 user-oriented한 입장에서 UIUX적으로 풀어낸다던가, 아니면 구조적으로 architecture를 변경하는 방법도 있을 것이다.
하지만 결국 성능개선을 위한 노력은 미룰수 없다. 주기적으로 웹페이지를 점검해보고 현재 어떤 부분이 성능적으로 이슈가 되고 있는지 파악하는것이 그 시작이라고 생각한다. 오늘 당장 Lighthouse를 이용해 개선점을 찾아보도록 하자!