Lighthouse의 진화: 지속적 통합, 새로운 실적 점수 공식 등

Chrome Developer Summit 2019의 최신 Lighthouse 업데이트 및 유용한 정보를 확인하세요.

Elizabeth Sweeny
Elizabeth Sweeny

Chrome Developer Summit (CDS)의 Speed Tooling Evolutions 강연에서 폴 아일랜드와 저는 모든 사용자를 위해 매우 빠른 환경을 빌드하고 유지하는 데 도움이 될 수 있는 Google의 최신 제품과 기능을 소개했습니다. 그 중심에는 성능 모니터링 도구인 Lighthouse 제품군에 추가된 기능이 있습니다.

Lighthouse팀은 프로덕션으로 푸시하기 전에 모든 커밋에서 Lighthouse를 실행할 수 있는 새로운 지속적 통합 제품인 Lighthouse CI의 알파 버전을 출시했습니다. Lighthouse CI는 Lighthouse를 여러 번 실행하고 정적 감사 또는 측정항목 기준점을 어설션한 다음 시각적 디핑 및 기본 카테고리 점수 기록을 위해 서버에 Lighthouse 보고서를 업로드합니다. 기존 budgets.json 구성모든 Lighthouse 감사 또는 카테고리 결과를 어설션하기 위한 새로운 표현 구문과 함께 원활하게 작동합니다.

Lighthouse CI 보고서입니다.

Lighthouse CI는 Travis CI, Circle CI, GitHub Actions와 함께 일부 구성이 포함된 모든 Ubuntu 또는 컨테이너 기반 CI 서비스를 바로 지원합니다. 온프레미스에 Lighthouse CI 서버를 설치하거나 즉시 설정을 위한 Docker 이미지를 사용할 수 있습니다. 임시로 제공되는 무료 공개 Lighthouse 보고서 스토리지를 즉시 사용할 수 있는 대안으로 사용할 수 있습니다.

제공 예정: 성능 점수 업데이트

Lighthouse 성능 점수 버전 6이 변경됩니다. 버전 5(2019년 11월 기준)의 Lighthouse에는 첫 콘텐츠 페인트, 속도 지수, 첫 번째 의미 페인트, 상호작용 시간, 첫 번째 CPU 유휴 상태라는 5가지 측정항목이 있어 0~100의 성능 점수를 구성할 수 있습니다.

버전 5와 6의 Lighthouse 성능 점수 수식 비교

자세한 내용은 Lighthouse 성능 점수를 참고하세요.

Lighthouse 버전 6에서는 첫 번째 CPU 유휴 상태 (FCI)와 첫 번째 의미 있는 페인트 (FMP)가 최대 콘텐츠 페인트 (LCP)총 차단 시간 (TBT)이라는 새로운 측정항목으로 대체됩니다. 5가지 측정항목 각각의 가중치는 부하 및 상호작용 측정의 여러 단계의 균형을 더 잘 조정할 수 있도록 조정됩니다.

Lighthouse팀은 모든 점수 곡선이 미세 조정되고 측정항목이 성숙하고 철저하게 테스트되었는지 확인하기 위해 계속 노력하고 있습니다. 2020년 1월에 Lighthouse v6 성능 점수를 제공하는 것을 목표로 합니다.

등대 스택 팩

Lighthouse는 사이트에서 프레임워크 또는 콘텐츠 관리 시스템(CMS)을 사용하는지 자동으로 감지하고 보고서에 스택별 조언을 포함할 수 있습니다. 스택 팩은 Lighthouse 보고서 핵심 감사 외에 여러분과 같은 커뮤니티 전문가가 선별한 맞춤설정된 권장사항을 추가합니다.

React 애플리케이션의 오프스크린 이미지 지연을 위한 Lighthouse 보고서 권장사항입니다.

현재 Angular, WordPress, Magento, React, AMP용 Stack Pack이 있습니다. 자체 Stack Pack을 만들려면 GitHub 저장소를 방문하거나 Lighthouse팀에 문의하세요.

출시 예정: Chrome 확장 프로그램으로 사용되는 Lighthouse 플러그인

Lighthouse 플러그인 아이콘입니다.

Lighthouse 플러그인은 Lighthouse의 확장성을 활용할 수 있는 또 다른 방법입니다. 현재 Lighthouse 핵심 감사에서 다루지 않는 품질 검사가 많이 있습니다. 이러한 검사는 일부 개발자에게만 적용 가능하거나 팀에 아직 감사를 만들 여력이 없기 때문입니다.

Lighthouse 플러그인을 사용하면 커뮤니티 전문가는 Lighthouse가 실행하고 새 카테고리로 보고서에 추가할 수 있는 새로운 검사 세트를 구현할 수 있습니다. 현재 플러그인은 Lighthouse CLI에서만 작동하지만, 목표는 DevTools 감사 패널에서도 실행되도록 하는 것입니다.

Google 게시자 광고 및 사용자 환경용 Lighthouse 플러그인을 실행하는 옵션이 있는 Chrome DevTools 감사 패널
DevTools 감사 패널의 커뮤니티 플러그인 (베타)

사용자가 Chrome 웹 스토어에서 Lighthouse 플러그인 확장 프로그램을 설치하면 DevTools가 설치된 플러그인을 식별하여 감사 패널에 옵션으로 제공합니다. Lighthouse팀은 향후 몇 달 내에 플러그인 접근 방식을 지원할 예정이므로 계속 지켜봐 주세요. 그때까지는 지금 바로 노드 모듈로 플러그인을 만들고 CLI를 통해 모든 Lighthouse 사용자가 액세스할 수 있도록 할 수 있습니다.

자세히 알아보기

Lighthouse 및 CDS 2019의 기타 성능 도구 업데이트에 관한 자세한 내용은 다음과 같은 Speed Tooling evolutions Talk(속도 도구 진화 강연)를 시청하세요.

보내 주신 의견은 Lighthouse를 개선하는 데 큰 도움이 됩니다. Lighthouse CI를 사용해 보거나 Stack Pack을 작성하거나 Lighthouse 플러그인을 만들어 Google에 의견을 알려주세요.