TIL-20221205

khundi·2022년 12월 5일

TIL

Lighthouse

사이트를 검사하여 성능 측정을 할 수 있는 도구이다.
Lighthouse는 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공해준다.
Google에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴이다.
Lighthouse는 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다.
Lighthouse는 Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있다. 검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행한다.

Lighthouse 사용법

Chrome 개발자 도구에서 실행하기

크롬에서 검사하고 싶은 페이지의 url을 입력한다.
개발자 도구를 연다.
lighthouse 탭을 클릭한다.

Analyze page load를 클릭한다. Categories에서 특정한 지표만 선택하여 검사할 수 있다.
검사가 진행되고 아래와 같이 리포트가 해당 페이지의 개발자 도구내에 생성된다.

Node CLI에서 실행하기

Lighthouse를 설치한다. 이 때 -g 옵션을 사용하여 Lighthouse를 전역 모듈로 설치하는 것이 좋다.

npm install -g lighthouse

다음의 명령어로 검사를 실행할 수 있습니다.

lighthouse <url>

다음의 명령어로 모든 옵션을 볼 수 있습니다.

lighthouse --help

Lighthouse 노드 모듈을 이용해 동적으로 프로그래밍하여 페이지 검사 리포트를 생성할 수도 있다. 이를 이용해 성능 테스트를 자동화할 수 있다

Lighthouse 분석 결과 항목

1. Performance

웹 성능을 측정한다. 화면에 컨텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기까지 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 체크한다.

2. Accessibility

웹 접근성을 체크한다. 대체 텍스트를 작성했는지, 배경색과 컨텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 체크한다.

3. Best Practices

웹 표준 모범 사례를 잘 따르고 있는지 체크한다. HTTPS 프로토콜을 사용하는지, 콘솔 창에 오류가 표시되고 있는지 체크한다.

4. SEO

검색 엔진 최적화 부분을 체크한다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지 체크한다.

5. PWA (Progressive Web App)

모바일 애플리케이션으로도 잘 작동하는지 체크한다. 앱아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 컨텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인한다.

Opportunities

Opportunities 항목에서는 웹 페이지의 개선점을 찾아준다.

아래의 항목들은 네이버의 웹 페이지를 분석했을 때 나온 항목들이다.

Serve images in next-gen formats

WebP 및 AVIF와 같은 차세대 이미지 형식을 사용하면 이미지 파일 크기를 더욱 줄일 수 있다고 알려주고 있다.

Use video formats for animated content

큰 사이즈의 애니메이션 GIF를 동영상으로 대체할 것을 권고하고 있다. 큰 GIF는 애니메이션 콘텐츠를 전달하는 데 비효율적이므로 비디오로 변환하면 사용자의 대역폭을 크게 절약할 수 있다. 데이터를 절약하기 위해 애니메이션은 MPEG4/WebM 비디오를 적용할 것을 권고하고 있다.

Reduce unused JavaScript

사용하지 않는 JavaScript를 줄이면 페이지 로드 속도를 높이고 방문자의 사용자 경험을 개선할 수 있다. 그리고 사용자가 필요로 할 때까지 스크립트 다운로드를 연기하도록 구현하기.

Reduce unused CSS

2KiB 이상 절약할 수 있는 미사용 CSS를 제거하여 필요한 데이터양을 줄일 것을 권고하고 있다.

Efficiently encode images

효율적으로 이미지를 인코딩하라고 권고하고 있다. 페이지 요청을 볼 때 HTML, CSS 또는 JavaScript 파일에 비해 이미지가 전체 페이지 크기의 대부분을 차지할 가능성이 높다.
이러한 이미지를 압축하지 않으면 브라우저가 이미지를 다운로드 하는 데 더 많은 시간을 소비해야 하므로 대역폭이 낭비되고 페이지 로드 시간이 늘어난다.