Lighthouse 소개

Lighthouse는 웹페이지 품질을 개선하는 데 도움이 되는 오픈소스 자동화 도구입니다. 공개 웹페이지 또는 인증이 필요한 웹페이지에서 실행할 수 있습니다. 성능, 접근성, SEO 등에 대한 감사 기능이 있습니다.

Lighthouse는 Chrome DevTools, 명령줄 또는 Node 모듈로 실행할 수 있습니다. Lighthouse에 감사할 URL을 제공하면 페이지에 대해 일련의 감사를 실행한 후 페이지 실적에 관한 보고서를 생성합니다. 실패한 감사를 페이지를 개선하는 방법을 나타내는 지표로 사용합니다. 각 감사에는 감사가 중요한 이유와 해결 방법을 설명하는 참조가 있습니다.

Lighthouse CI를 사용하여 사이트의 회귀를 방지할 수도 있습니다.

시작하기

가장 적합한 Lighthouse 워크플로를 선택하세요.

  • Chrome DevTools 인증이 필요한 페이지를 감사하고 브라우저에서 바로 사용자 친화적인 형식으로 보고서를 읽습니다.
  • 명령줄 셸 스크립트로 Lighthouse 실행을 자동화합니다.
  • 노드 모듈로 Lighthouse를 지속적 통합 시스템에 통합합니다.
  • 웹 UI 설치가 필요하지 않은 Lighthouse를 실행하고 보고서에 연결합니다.

Chrome DevTools에서 Lighthouse 실행

Lighthouse에는 Chrome DevTools에 자체 패널이 있습니다. 보고서를 실행하려면 다음 안내를 따르세요.

  1. 데스크톱용 Chrome을 다운로드합니다.
  2. Chrome을 열고 감사할 URL로 이동합니다. 웹에서 모든 URL을 감사할 수 있습니다.
  3. Chrome DevTools를 엽니다.

  4. Lighthouse 탭을 클릭합니다.

    감사할 웹페이지의 표시 영역이 왼쪽에 있습니다. 오른쪽은 Chrome DevTools Lighthouse 패널입니다.

  5. 페이지 로드 분석을 클릭합니다. DevTools에 감사 카테고리 목록이 표시됩니다. 모두 사용 설정된 상태로 둡니다.

  6. 감사 실행을 클릭합니다. 30~60초 후 Lighthouse에서 페이지에 대한 보고서를 제공합니다.

    Chrome DevTools의 Lighthouse 보고서

Node 명령줄 도구 설치 및 실행

Node 모듈을 설치하려면 다음 단계를 따르세요.

  1. 데스크톱용 Chrome을 다운로드합니다.
  2. Node의 현재 장기 지원 버전을 설치합니다.
  3. Lighthouse를 설치합니다. -g 플래그는 이를 전역 모듈로 설치합니다.
npm install -g lighthouse

감사를 실행하려면 다음 단계를 따르세요.

lighthouse <url>

모든 옵션을 보려면 다음 단계를 따르세요.

lighthouse --help

프로그래매틱 방식으로 Node 모듈 실행

Lighthouse를 Node 모듈로 프로그래매틱 방식으로 실행하는 예시는 프로그래매틱 방식으로 사용을 참고하세요.

PageSpeed Insights 실행

PageSpeed Insights에서 Lighthouse를 실행하려면 다음 단계를 따르세요.

  1. PageSpeed Insights로 이동합니다.
  2. 웹페이지 URL을 입력합니다.

  3. 분석을 클릭합니다.

    PageSpeed Insights 웹사이트

Lighthouse를 Chrome 확장 프로그램으로 실행

확장 프로그램을 설치하려면 다음 단계를 따르세요.

  1. 데스크톱용 Chrome을 다운로드합니다.
  2. Chrome 웹 스토어에서 Lighthouse Chrome 확장 프로그램을 설치합니다.

감사를 실행하려면 다음 단계를 따르세요.

  1. Chrome에서 감사할 페이지로 이동합니다.

  2. Chrome 주소 표시줄 옆이나 Chrome의 확장 프로그램 메뉴에서 Lighthouse를 클릭합니다. 클릭하면 Lighthouse 메뉴가 펼쳐집니다.

    보고서를 생성하라는 메시지가 표시됩니다.

  3. 보고서 생성을 클릭합니다. Lighthouse는 현재 포커스가 맞춰진 페이지에 대해 감사를 실행한 후 결과 보고서가 포함된 새 탭을 엽니다.

    확장 프로그램에서 생성된 Lighthouse 보고서입니다.

온라인에서 보고서 공유 및 보기

Lighthouse Viewer를 사용하여 보고서를 온라인으로 보고 공유합니다.

Lighthouse 뷰어

JSON으로 보고서 공유

Lighthouse 뷰어에는 Lighthouse 보고서의 JSON 출력이 필요합니다. 다음과 같이 JSON 출력을 생성합니다.

  • Lighthouse 보고서 메뉴의 를 클릭한 다음 JSON으로 저장을 클릭합니다.
  • 명령줄 실행: shell lighthouse --output json --output-path <path/for/output.json>

보고서 데이터를 보려면 다음 단계를 따르세요.

  1. Lighthouse 뷰어를 엽니다.
  2. JSON 파일을 뷰어로 드래그하거나 뷰어의 아무 곳이나 클릭하여 파일 탐색기를 열고 파일을 선택합니다.

GitHub Gist로 보고서 공유

JSON 파일을 수동으로 전달하고 싶지 않다면 보고서를 비밀 GitHub gist로 공유할 수도 있습니다. Gist의 한 가지 이점은 무료 버전 관리입니다.

보고서를 gist로 내보내려면 다음 단계를 따르세요.