Lighthouse로 성능 기회 탐색하기

Kayce Basques

Lighthouse는 페이지 성능을 측정하고 페이지 성능을 개선하는 방법을 찾는 데 도움이 되는 도구입니다. Lighthouse를 사용하는 방법에 관한 일반적인 워크플로는 다음과 같습니다.

1. 감사할 페이지를 Lighthouse에 지정합니다.
2. Lighthouse는 이 페이지를 로드하고 페이지가 다양한 성능 주요 기록에 도달하는 데 걸리는 시간을 기록합니다. 이러한 주요 시점을 metrics이라고 합니다.
3. Lighthouse는 페이지 성능에 관한 보고서를 제공합니다. 이 보고서는 각 측정항목의 점수와 함께 페이지 로드 속도를 높일 수 있는 기회 목록을 제공합니다.

목표는 시간 경과에 따라 측정항목 점수를 개선하거나 적어도 악화되지 않도록 하는 것입니다. 하지만 측정항목에 대해 직접 작업할 수는 없습니다. 대신 Lighthouse가 제공하는 기회를 따릅니다. 이러한 기회를 포착하면 측정항목 점수가 개선되는 경향이 있습니다.

프로필 페이지에서 Lighthouse 실행

web.dev 프로필 페이지에서 Lighthouse를 실행합니다.

1. URL을 제공하면 Lighthouse에서 일련의 감사를 실행하여 페이지 실적에 관한 보고서를 생성합니다.

2. 감사 보고서를 검토하여 페이지에서 개선할 수 있는 영역을 식별합니다.

3. 각 감사에 대해 점수 향상을 위한 안내와 즉시 취할 수 있는 조치를 확인할 수 있습니다.

Chrome DevTools에서 Lighthouse 실행

Chrome DevTools는 Chrome 브라우저에 직접 내장된 웹 개발자 도구 집합입니다. 아무것도 다운로드하지 않아도 DevTools를 다운로드할 수 있습니다. Chrome을 사용하는 경우 DevTools가 있는 것입니다.

1. Chrome에서 감사하려는 페이지로 이동합니다.
2. `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.

감사 탭을 클릭합니다. 이 탭이 표시되지 않으면 » 기호를 클릭한 후 목록에서 감사를 선택합니다. Lighthouse는 감사 패널을 구동하는 엔진입니다. 그래서 등대 이미지가 표시됩니다.

1. 모바일 라디오 버튼이 선택되어 있는지 확인합니다. Lighthouse는 페이지를 감사할 때 휴대기기의 표시 영역과 사용자 에이전트 문자열을 시뮬레이션합니다.
2. 실적 체크박스가 사용 설정되어 있는지 확인합니다. 감사 섹션의 나머지 체크박스는 사용 설정 또는 사용 중지할 수 있습니다. 이러한 템플릿을 사용 설정하면 페이지의 다른 측면을 개선할 수 있는 다양한 방법이 표시됩니다.
3. 시뮬레이션된 빠른 3G, 4배 CPU 속도 저하 라디오 버튼이 선택되어 있는지 확인합니다. Lighthouse는 페이지를 로드하는 동안 네트워크나 CPU를 실제로 제한하지 않습니다. 대신 일반 조건에서 페이지를 로드하는 데 걸린 시간을 확인한 후 컴퓨터보다 4배 덜 강력한 CPU를 사용하는 빠른 3G 네트워크에서 걸리는 시간을 예측합니다.
4. 저장용량 비우기 체크박스가 선택되어 있는지 확인합니다. 이 옵션을 사용하면 Lighthouse가 모든 페이지 리소스의 네트워크로 강제 이동하며, 이는 신규 방문자가 페이지를 경험하는 방식입니다.
5. 감사 실행을 클릭합니다. 5~10초 후에 Lighthouse에 보고서가 표시됩니다.

참고: 필요에 가장 적합한 구성 옵션을 설정할 수 있습니다. 이해하지 못한다면 여기에 언급된 것이 좋은 기본값입니다. 이러한 옵션으로 페이지 속도를 높일 수 있다면 모든 사용자에게 페이지 속도가 빨라집니다. 중요한 것은 모든 감사에서 옵션을 일관성 있게 유지하는 것입니다.

예를 들어 시뮬레이션된 Fast 3G, 4x CPU 속도 저하 제한을 사용 설정한 상태에서 감사를 실행하고 제한을 사용 중지한 상태에서 감사를 실행하면 측정항목 점수가 크게 낮아집니다. 실제로는 구성만 바뀌었는데 현재 페이지가 훨씬 느린 이유를 파악하는 데 많은 시간을 할애할 수 있습니다.

보고서 이해하기

보고서의 오른쪽 상단에 전체 실적 점수가 표시됩니다. 100점은 완벽한 점수입니다. 전체 점수 아래에는 측정항목 점수가 표시됩니다. Lighthouse v3 점수 가이드에서는 각 측정항목 점수가 전체 점수에 어떻게 기여하는지 설명합니다.

측정항목 위로 마우스를 가져가면 측정항목에 대해 자세히 알아볼 수 있습니다. 관련 문서를 읽으려면 자세히 알아보기를 클릭하세요.

측정항목 점수 아래에 페이지가 로드되는 동안 어떻게 표시되는지 보여주는 스크린샷이 표시됩니다.

스크린샷 아래에는 페이지 성능을 개선할 수 있는 방법이 표시됩니다.

추천을 클릭하여 자세히 알아보세요.

다음 단계

Lighthouse를 사용하여 프로필 페이지 또는 Chrome DevTools에서 페이지를 감사해 보세요. 추천 중 하나를 구현한 다음 페이지를 다시 감사하여 변경사항이 보고서에 어떤 영향을 미쳤는지 확인합니다. 측정항목 점수가 조금이라도 높아지는 것이 이상적이며 Lighthouse에서 더 이상 이러한 기회를 개선해야 할 과제로 보고해서는 안 됩니다.

Lighthouse를 직접 실행하는 것은 문제의 부분 확인에 적합하지만, 궁극적으로는 지속적인 모니터링을 설정하여 사이트가 양호한 상태를 유지하도록 하는 것이 좋습니다. 시간 경과에 따른 Lighthouse 진행 상황을 추적하려면 사이트를 프로필에 추가합니다.