Lighthouse로 웹 사이트 성능을 분석하는 방법

웹 사이트 성능을 수동, 프로그래밍 방식 또는 자동으로 감사

Lighthouse는 웹 페이지 성능을 측정하는 방법을 제공하는 Google의 오픈 소스 프로젝트입니다. 다양한 조건을 재현하기위한 구성 가능한 설정이 있습니다. 예를 들어 시뮬레이션 할 네트워크 및 장치 유형을 설정할 수 있습니다.

Lighthouse에 감사 할 URL을 제공하고 페이지에 대해 일련의 감사를 실행 한 다음 페이지의 성능에 대한 보고서를 생성합니다. 거기에서 실패한 감사를 페이지 개선 방법에 대한 지표로 사용하십시오. 각 감사에는 감사가 중요한 이유와 수정 방법을 설명하는 참조 문서가 있습니다. 등대

성능을 측정해야하는 이유는 여러 가지가 있지만 가장 중요한 이유 중 하나는 SEO에 대한 영향입니다. 이에 대해 자세히 설명하고이 기사에서 특정 메트릭을 다루는 방법에 대해 설명합니다.

Chrome DevTools로 Lighthouse 실행

Chrome DevTools 브라우저 확장 프로그램을 사용하여 성능 감사를 수동으로 실행할 수 있습니다. 테스트하려는 웹 페이지에서 확장 프로그램을 실행하고 "Audits"패널을 선택하기 만하면됩니다.

다양한 감사 중에서 "성능"을 선택할 수 있습니다. 장치 유형 및 네트워크 조절을 시뮬레이션하도록 선택할 수도 있습니다. 특히 제한에 대한 일부 정보는 Lighthouse 프로젝트 Github 리포지토리에서 찾을 수 있습니다.

다음 "감사 실행"을 클릭합니다. 완료되면 Lighthouse는 확장 UI 내에서 보고서를 제공합니다.

이 보고서는 중요한 메트릭, 기회 및 전체 성과 점수에 대한 일반적인 개요입니다. 썸네일은 페이지로드의 수명주기를 보여줍니다. 이것은 모두 무엇을 의미합니까? Google은 각 측정 항목,이를 해결하는 방법 및 전체 성능 점수를 설명하는 수많은 문서를 제공합니다.

Chrome DevTools 패널의 왼쪽 상단에는 전체 보고서를 JSON 형식으로 다운로드하는 데 사용할 수있는 다운로드 아이콘이 있습니다. 그런 다음 Lighthouse Report Viewer를 통해 PDF 보고서를 생성하는 데 사용할 수 있습니다.

페이지로드의 수명주기에 영향을 미치는 많은 요인으로 인해 결과를 일괄 적으로 비교하는 것이 중요합니다. 예를 들어 평균 5 회 실행하면 더 나은 통찰력을 얻을 수 있습니다.

프로그래밍 방식으로 Lighthouse 실행

우리의 표준 "공장 가동"상황의 경우 위의 내용으로 충분합니다. Lighthouse를 실행하는 또 다른 방법은 NPM을 통해 오픈 소스 패키지를 설치하고 CLI 설명서의 지침을 따르는 것입니다. 예를 들어 빌드 파이프 라인에서 프로그래밍 방식으로 감사를 실행하려는 경우 유용 할 수 있습니다.

위와 마찬가지로 Node 모듈을 프로그래밍 방식으로 사용하기위한 설명서를 따라 코드에서 Lighthouse를 실행할 수도 있습니다. Lighthouse?!로 본격적인 Node.js 애플리케이션을 만들 수 있습니다.

시간이 지남에 따라 자동으로 등대 실행

이제 우리는 전문가가되었습니다. 다음 단계로 넘어가겠습니다. Lighthouse 문서에는 많은 통합이 나열되어 있으므로 그중 하나를 살펴 보겠습니다.

"Foo"를 사용하여 Lighthouse 실행 및 시간 경과에 따른 결과 비교

많은 개발자가 정기적으로 애플리케이션 변경 사항을 배포하는 엔지니어링 환경에서는 시간이 지남에 따라 웹 사이트 성능을 모니터링하여 변경 세트를 성능 저하 또는 개선과 연관시키는 것이 중요 할 수 있습니다. 또 다른 예는 SEO 순위 또는 기타 이유로 성과를 개선하기위한 이니셔티브가있는 팀입니다. 이러한 상황에서는 며칠, 몇 주, 몇 달 동안 웹 사이트 성능을 모니터링하는 것이 중요합니다.

www.foo.software에서 추적 할 URL을 추가하고 성능 변화를 모니터링 할 수 있습니다. Foo는 또한 성능이 사용자가 정의한 임계 값 아래로 떨어졌을 때, 정상으로 돌아 왔을 때, 개선이 자동으로 식별 될 때 이메일, Slack 또는 PagerDuty 알림을 제공합니다!

가장 좋은 점은 무료로 계정을 만들 수 있다는 것입니다! 등록하고 로그인 한 후 상단 탐색에서 "페이지"링크를 클릭합니다. 여기에서 모니터링 할 URL을 추가 할 수 있습니다. Foo는 결과를 저장하고 중요한 메트릭의 시각화를 제공하는 타임 라인 차트를 표시합니다. 일, 주, 월을 전환하고 세부 보고서를 드릴 수 있습니다.

결론

Lighthouse는 웹 사이트 성능 측정에서 업계 표준이되고 있습니다. 중요한 메트릭에 대한 세부 정보를 제공하는 Lighthouse에 대한 문서 가치가있는 책이 있습니다.