lighthouse란?

lighthouse라는 웹 애플리케이션 분석 도구에 대해 조사했으므로 정리하겠습니다. version은 2.9.4입니다.

lighthouse란?

lighthouse는 Google의 웹 애플리케이션을 분석하는 도구로, 다음 5가지 측정항목으로 점수를 계산합니다.
* Performance
* Progressive Web App
* Accessibility
* Best Practices
* SEO
각 항목의 점수 값은 여러 측정 항목의 값을 기준으로 계산됩니다.
측정 항목에 대해서는 아래를 참조하십시오.
Lighthouse v3 Score Weighting [MAKE YOUR OWN COPY] - Google Sheets

설치 방법

두 가지 설치 방법이 있습니다.
* Google 크롬 설치 (Google 크롬에 표준으로 포함되어 있음)
* npm 또는 yarn을 사용하여 설치

$ npm i -g lighthouse

사용법

여기에서는 CLI에서 사용하는 방법에 대해서만 설명합니다.
설치가 완료되면 터미널 등을 사용하여 다음 명령을 실행해보십시오.$ lighthouse https://www.yahoo.co.jp/이 명령을 실행하면 브라우저가 자동으로 시작됩니다 https://www.yahoo.co.jp/에 액세스할 수 있다고 생각합니다. 또한 액세스와 동시에 Yahoo! 왜 이렇게 되는지에 대해서는 나중에 설명하겠습니다. 터미널 끝에 아래와 같은 출력과 함께 보고서 결과가 HTML로 만들어졌다고 생각합니다.
이 파일을 브라우저 등에서 열어보세요.

Printer html output written to /******/******/******/*****/******/m.yahoo.co.jp_2018-06-02_15-39-09.report.html +210ms

(mac chrome에서 파일을 여는 간단한 예)

$ open -a "/Applications/Google Chrome.app" ./m.yahoo.co.jp_*.report.html

위와 같은 결과를 볼 수 있다고 생각합니다. 이 방법으로 응용 프로그램의 품질을 확인할 수 있습니다.
또, 체크와 동시에 브라우저로 내용을 확인하고 싶은 경우는, 아래와 같이 view 옵션을 붙이면 실행과 함께 결과를 확인할 수 있습니다.

$ lighthouse https://www.yahoo.co.jp/ --view

여기서 왠지 스마트 폰용 페이지가 표시되었는지 확인하고 싶습니다.
우선 페이지 상단에 Runtime settings라는 문자가 있으므로 이 문자를 클릭해 보세요. 그러면 아래와 같은 Runtime environment라는 것이 표시된다고 생각합니다.

Runtime environment의 이름과 같이 런타임 환경을 여기에서 확인할 수 있습니다.
여기를 보면 알 수 있지만, lighthouse의 명령은 기본적으로 네트워크 대역, cpu 등의 제한이나 장치의 에뮬레이션(Nexus 5)이 자동으로 들어갑니다. 방금, Yahoo!
이 설정을 사용하지 않으려면 아래와 같이 disable ~ 옵션을 부여하여 비활성화 할 수 있습니다.

$ lighthouse https://www.yahoo.co.jp/ --view --disable-network-throttling --disable-cpu-throttling --disable-device-emulation

이 외에도 다양한 설정을 할 수 있습니다. 자세한 내용은 github 또는 help 옵션에서 확인할 수 있습니다.
( htps : // 기주 b. 코 m / 오오 g ぇ Ch 로메 / ぃ gh 쇼세 # ぃ gh 쇼세 c ぃ 오 p 치 온 s )

$ lighthouse --help

[GoogleChrome/lighthouse: Auditing, performance metrics, and best practices for Progressive Web Apps]

따라서 lighthouse를 사용하면 웹 응용 프로그램의 품질을 쉽게 확인할 수 있습니다. 이번에는 간단한 실행 방법까지를 소개했습니다.

다음에는 산출된 점수에 대해 더 깊이 조사해 나가고 싶습니다.