Lighthouse 6.0의 새로운 기능

새로운 측정항목, 성능 점수 업데이트, 새로운 감사 등이 있습니다.

Connor Clark

오늘 Lighthouse 6.0이 출시됩니다.

Lighthouse는 자동화된 웹사이트 감사 도구입니다. 개발자에게 사이트의 사용자 환경을 개선할 수 있는 기회와 진단을 제공합니다. 이 도구는 Chrome DevTools, npm (노드 모듈 및 CLI로) 또는 브라우저 확장 프로그램( Chrome 및 Firefox). 다양한 Google Cloud 서비스(예: web.dev/measure, PageSpeed) 통계.

Lighthouse 6.0은 npm 및 Chrome에서 즉시 사용 가능 카나리아. Lighthouse를 활용하는 다른 Google 서비스는 매달 말까지 업데이트를 받을 수 있도록 해야 합니다. Chrome 84 (7월 중순)에 Chrome 안정화 버전으로 출시됩니다.

Lighthouse Node CLI를 사용해 보려면 다음 명령어를 사용합니다. bash npm install -g lighthouse lighthouse https://www.example.com --view

이 버전의 Lighthouse는 사용자 인터페이스에 대한 많은 변경사항이 확인할 수 있습니다. 다루는 내용은 다음과 같습니다. 자세히 살펴보겠습니다

• 새 측정항목
• 성능 점수 업데이트
• 새 감사
• Lighthouse CI
• Chrome DevTools 패널 이름을 바꿨습니다
• 모바일 에뮬레이션
• 브라우저 확장 프로그램
• 예산
• 소스 위치 링크
• 준비된 사항
• 감사합니다.

새 측정항목

Lighthouse 6.0에서는 보고서에 세 가지 새로운 측정항목을 도입합니다. 두 가지 새로운 측정항목인 콘텐츠가 포함된 페인트 (LCP) 및 레이아웃 변경 (CLS)은 Core Web을 사용하여 구현한 것입니다. vitals를 사용합니다.

최대 콘텐츠 렌더링 시간(LCP)

최대 콘텐츠 페인트 (LCP)는 인지된 로드를 측정한 값입니다. 경험해 볼 수 있습니다 페이지 로드 중에 기본 또는 '최대' 콘텐츠가 로드된 시점을 표시합니다. 사용자에게 표시됩니다. LCP는 페인트가 포함된 첫 페인트 (FCP)를 보완하는 중요한 요소로 는 로드 환경의 맨 시작을 캡처합니다. LCP는 개발자에게 사용자가 실제로 페이지의 콘텐츠를 볼 수 있게 됩니다. 2.5초 미만의 LCP 점수는 '좋음'으로 간주됩니다.

자세한 내용은 Paul Irish가 작성한 LCP 관련 심층 분석을 시청하세요.

레이아웃 변경 횟수(CLS)

레이아웃 변경 횟수 (CLS)는 시각적 안정성을 측정한 것입니다. 그것은 는 페이지 콘텐츠가 시각적으로 얼마나 많이 이동하는지를 수치화합니다. CLS 점수가 낮으면 개발자가 사용자의 과도한 콘텐츠 이동을 경험하지 않는다는 사실을 알립니다. CLS 점수가 0.10 미만인 경우 '좋음'으로 간주됩니다.

실습 환경의 CLS는 페이지 로드가 끝날 때까지 측정됩니다. 필드에서는 첫 번째 사용자 상호작용 또는 모든 사용자 입력을 포함하는 CLS 측정

자세한 내용은 애니 설리반의 CLS에 관한 심화 동영상을 시청하세요.

총 차단 시간 (TBT)

총 차단 시간 (TBT)은 로드 응답성을 수치화하여 입력 응답을 방지하기에 충분할 정도로 기본 스레드가 차단된 총 시간입니다. TBT는 콘텐츠가 포함된 첫 페인트 (FCP)와 상호작용하기까지 걸린 시간 사이의 총 시간을 측정합니다. (TTI). TTI의 동반 측정항목이며 기본 스레드 활동을 수량화하기 위한 미묘한 차이를 제공합니다. 사용자가 페이지와 상호작용하는 것을 차단하는 콘텐츠

또한 TBT는 필드 측정항목 첫 입력 지연과 상관관계가 높습니다. FID(Core Web Vitals),

성능 점수 업데이트

Lighthouse의 성능 점수는 페이지의 속도를 요약하기 위해 여러 측정항목의 가중치가 적용된 혼합을 사용합니다. 6.0 성능 점수 공식 있습니다.

세 가지 새로운 측정항목이 추가되었지만, 기존의 세 가지 측정항목, 즉 첫 번째 의미 있는 페인트, 첫 번째 CPU 유휴 및 최대 잠재적 FID입니다. 나머지 측정항목의 가중치가 다음과 같이 수정되었습니다. 기본 스레드 상호작용과 레이아웃 예측 가능성을 강조합니다.

비교를 위해 버전 5 점수를 소개합니다.

Lighthouse 버전 5와 6 간 점수 변경의 주요 특징은 다음과 같습니다.

• TTI의 가중치가 33% 에서 15%로 감소했습니다. 사용자에게 직접 응답했습니다. TTI 가변성에 대한 피드백뿐만 아니라, 측정항목 최적화의 불일치로 인해 사용자 환경 개선 TTI는 페이지 로드가 완료되었을 때 그러나 TBT는 변동성이 감소합니다. 이번 점수 변화를 통해 개발자들이 사용자 상호작용성입니다.
• FCP의 가중치는 23% 에서 15%로 감소했습니다. 첫 번째 픽셀이 전체 그림을 보여주지는 못했죠 사용자가 가능성 있는 시점을 측정하는 것과 결합하여 사용자가 가장 관심을 가질 만한 콘텐츠 (LCP)가 로드 경험을 더 잘 반영하는지 확인할 수 있습니다.
• 최대 잠재 FID가 지원 중단되었습니다. 더 이상 보고서에 표시되지 않지만 JSON에서 계속 사용할 수 있습니다 이제 TBT를 확인하여 상호작용을 수치화하는 것이 좋습니다. 를 사용합니다.
• 첫 번째 의미 있는 페인트가 지원 중단되었습니다. 측정항목이 너무 다양하여 실행 가능성이 없음 이는 Chrome 렌더링 내부 기능에만 해당되는 표준화 과정입니다. 동안 일부 팀은 FMP 타이밍이 사이트에 가치가 있다고 생각하지만, 측정항목은 추가적인 개선이 이루어졌습니다
• 첫 번째 CPU 유휴는 지원 중단되었습니다. TTI와 구별되지 않기 때문입니다. TBT 및 TTI 가장 중요시하는 상호작용 측정항목입니다.
• CLS의 가중치는 상대적으로 낮지만 향후 주요 버전에서 증가할 것으로 예상됩니다.

점수 변화

이러한 변경사항이 실제 사이트의 점수에 어떤 영향을 주나요? Google에서는 분석 두 가지 데이터 세트, 즉 일반적인 사이트와 정적 사이트 집합 Eleventy로 빌드되었습니다 요약하면, 약 20% 의 사이트에서 30% 정도는 변화가 거의 없었고, 50% 는 최소 5점 이상 하락했습니다.

점수 변경사항은 세 가지 기본 구성요소로 나눌 수 있습니다.

• 몸무게 변화 점수
• 기본 측정항목 구현의 버그 수정
• 개별 점수 곡선 변경사항

점수 가중치 변화와 새로운 측정항목 3가지 도입이 전체 점수의 대부분을 차지함 있습니다. 버전 6에서 개발자가 최적화하지 않은 새로운 측정항목이 큰 비중을 차지합니다. 확인할 수 있습니다 버전 5에서 테스트 자료의 평균 성능 점수는 약 50이었지만 새로운 총 차단 시간 및 최대 콘텐츠 페인트 측정항목의 평균 점수는 약 30이었습니다. 이 두 측정항목이 Lighthouse 버전 6 성능 점수의 50% 를 차지하므로 당연히 대다수의 사이트에서 감소했습니다.

기본 측정항목 계산의 버그를 수정하면 점수가 달라질 수 있습니다. 이는 비교적 적은 수의 사이트이지만 특정 상황에서는 상당한 영향을 미칠 수 있습니다. 전반적으로 전체 사이트 중 약 8% 는 측정항목 구현 변경으로 점수가 개선되었으며, 약 4% 의 사이트에서 점수가 매겨졌습니다. 측정항목 구현 변경으로 인한 감소율입니다. 사이트의 약 88% 는 이러한 수정의 영향을 받지 않았습니다.

개별 점수 곡선의 변화는 전체 점수 변동에도 아주 약간의 영향을 미쳤습니다. 점수 곡선이 HTTPArchive 데이터 세트에 포함되어 있습니다 구현 주요 변경사항의 영향을 받는 사이트 제외, 경미한 사이트 제외 개별 측정항목에 대한 점수 곡선을 조정한 결과 사이트의 점수가 약 3% 향상되었고 사이트의 점수가 약 4% 감소했습니다. 약 93% 의 사이트는 이 변경사항의 영향을 받지 않았습니다.

스코어 계산기

Google에서는 점수 계산기를 출시하여 자세히 살펴보겠습니다 계산기를 통해 Lighthouse 버전 5와 6점 Lighthouse 6.0으로 감사를 실행하면 보고서에 계산기 링크가 포함됩니다. 표시됩니다.

</ph>

새 감사

사용되지 않는 JavaScript

DevTools 코드 활용 적용 범위: Unused JavaScript를 참고하세요.

이 감사는 완전히 새로운 것은 아니며 2017년 중반이지만 성능 오버헤드로 인해 Lighthouse를 빠른 속도로 유지하기 위해 기본적으로 사용 중지되어 있었습니다. 있습니다. 이제 이러한 노출 범위 데이터를 수집하는 것이 훨씬 더 효율적이므로 안심하고 사용 설정할 수 있습니다. 기본적으로 제공합니다

접근성 감사

Lighthouse는 멋진 axe-core 라이브러리를 사용해 액세스할 수 있습니다. Lighthouse 6.0에는 다음과 같은 감사가 추가되었습니다.

• aria-hidden-body
• aria-hidden-focus
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• 제목 순서
• duplicate-id-active
• 중복 ID-아리아

마스크 가능한 아이콘

마스크 가능한 아이콘은 PWA용 아이콘을 만드는 새로운 아이콘 형식입니다. 모든 기기에서 멋지게 표시될 수 있습니다 PWA를 최대한 멋지게 보이도록 하기 위해 manifest.json에서 이 새로운 형식을 지원하는지 확인하는 새로운 감사가 추가되었습니다.

문자 집합 선언

메타 문자 집합 요소는 어떤 문자 인코딩을 사용해야 하는지 선언합니다. HTML 문서를 해석할 수 있습니다. 이 요소가 누락되었거나 문서에 설명된 대로 브라우저는 여러 휴리스틱을 사용하여 어떤 인코딩을 사용해야 할지 추측합니다. 만약 브라우저가 잘못 추측하여 늦게 제출된 메타 문자 집합 요소가 발견되면 파서는 일반적으로 일어날 수 있는 일입니다. 새로운 감사는 페이지에 유효한 문자 인코딩이 있고 해당 페이지가 미리 정의되었는지 확인합니다.

Lighthouse CI

지난 11월 CDS에서 오픈소스 노드인 Lighthouse CI가 발표되었습니다. 지속적 통합에서 커밋할 때마다 Lighthouse 결과를 추적하는 CLI 및 서버 알파 릴리스 이후 많은 발전을 이뤘습니다. 이제 Lighthouse CI가 지원됩니다. 입니다. 즉시 배포 가능 Docker 이미지를 사용하면 종합적인 대시보드 디자인으로 카테고리 및 측정항목 전반의 추세를 확인할 수 있습니다. Lighthouse에서 가져온 후 자세한 분석을 확인합니다.

다음 안내에 따라 지금 바로 프로젝트에 Lighthouse CI를 사용해 보세요. 시작 가이드

Chrome DevTools 패널 이름을 바꿨습니다.

감사 패널의 이름이 Lighthouse 패널로 변경되었습니다. 이제 그만!

DevTools 창 크기에 따라 패널이 » 버튼 뒤에 있을 수 있습니다. 드래그 앤 드롭할 수 있습니다. 탭을 클릭하여 순서를 변경합니다.

Command(명령어) 명령으로 패널을 빠르게 열려면 메뉴를 엽니다.

1. `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
2. Control+Shift+P (Mac의 경우 Command+Shift+P) 키를 눌러 다음을 수행합니다. 명령어 메뉴를 엽니다.
3. 'Lighthouse'를 입력합니다.
4. Enter 키를 누릅니다.

모바일 에뮬레이션

Lighthouse는 모바일 중심 사고방식을 따릅니다. 성능 문제는 일반적인 데이터 테스트하지 않는 경우가 많습니다. 이것이 바로 기본 모바일 에뮬레이션을 적용합니다. 에뮬레이션은 다음으로 구성됩니다.

• (이라는 시뮬레이션 엔진을 통해) 느린 네트워크 및 CPU 상태를 시뮬레이션 랜턴).
• 기기 화면 에뮬레이션 (Chrome DevTools와 동일)

Lighthouse는 처음부터 Nexus 5X를 참조 기기로 사용했습니다. 최근 몇 년 동안 성능 엔지니어들은 테스트 목적으로 Moto G4를 사용하고 있습니다. 이제 Lighthouse가 따라갑니다 참조 기기를 Moto G4로 변경했습니다. 실제로 이러한 변화는 그다지 눈에 띄지 않지만 다음은 웹페이지에서 감지할 수 있는 모든 변경사항입니다.

• 화면 크기가 412x660픽셀에서 360x640픽셀로 변경되었습니다.
• 사용자 에이전트 문자열이 이전에 Nexus 5 Build/MRA58N였던 기기 부분인 약간 변경되었습니다. 이제 Moto G (4)입니다.

Chrome 81부터 Moto G4를 Chrome DevTools 기기 에뮬레이션 목록에서도 사용할 수 있습니다.

브라우저 확장 프로그램

이 Lighthouse용 Chrome 확장 프로그램 Lighthouse를 로컬에서 실행하는 편리한 방법이었습니다 아쉽게도 지원이 복잡했습니다. Google에서는 Chrome DevTools Lighthouse 패널이 더 나은 환경이라고 생각했습니다 (보고서 다른 패널과 통합됨) Chrome 브라우저를 간소화하여 엔지니어링 간접비를 줄일 수 있었습니다. 확장자가 포함됩니다.

Lighthouse를 로컬에서 실행하는 대신 이제 확장 프로그램에서 PageSpeed Insights를 사용합니다. API를 참고하세요. 이렇게 하면 일부 사용자를 대체할 수 있는 것은 아닙니다. 주요 차이점은 다음과 같습니다.

• PageSpeed Insights는 원격으로 실행되므로 비공개 웹사이트를 감사할 수 없습니다. 로컬 Chrome 인스턴스가 아닌 서버에 연결할 수 있습니다 비공개 웹사이트를 감사해야 하는 경우 다음을 사용합니다. DevTools Lighthouse 패널 또는 노드 CLI를 사용하세요.
• PageSpeed Insights에서는 최신 Lighthouse 버전을 사용하지 않을 수도 있습니다. 노드 CLI를 사용하세요 브라우저 확장 프로그램은 출시 후 약 1~2주 내에 업데이트를 받습니다.
• PageSpeed Insights는 Google API이며, 이를 사용하면 서비스. 서비스 약관을 수락하고 싶지 않거나 동의할 수 없는 경우 DevTools Lighthouse 패널을 사용하세요. 또는 노드 CLI입니다

좋은 소식은 제품 스토리를 단순화함으로써 다른 엔지니어링에 집중할 수 있었다는 것입니다. 문제를 해결하는 데 도움이 됩니다 그 결과로 Google은 Lighthouse Firefox 확장 프로그램이 있습니다.

예산

Lighthouse 5.0에는 성능 예산이 도입되었습니다. 에 대한 기준점 추가를 지원하는 각 리소스 유형에서 얼마나 많은 양을 (예: 스크립트, 이미지, CSS 등)입니다.

Lighthouse 6.0 추가 예산 측정항목 지원 이제 FCP 같은 특정 측정항목에 대한 임계값을 설정할 수 있습니다. 현재 예산은 노드 CLI와 Lighthouse CI에 대한 액세스를 제공합니다

출처 위치 링크

Lighthouse가 페이지에 대해 발견한 몇 가지 문제는 보고서에 정확한 파일과 관련된 행이 명시됩니다. 이를 쉽게 탐색 중에 보고서에 지정된 위치를 클릭하면 관련 파일이 열립니다. (Sources(소스) 패널)에 있는 값을 볼 수 있습니다.

곧 준비됨

Lighthouse는 다음과 같은 새로운 기능을 지원하기 위해 소스 맵을 수집하는 실험을 시작했습니다.

• JavaScript 번들에서 중복 모듈 감지
• 최신 브라우저로 전송되는 코드에서 과도한 폴리필 또는 변환을 감지합니다.
• 사용하지 않는 JavaScript 감사를 증강하여 모듈 수준 세부사항을 제공합니다.
• 작업이 필요한 모듈을 강조 표시하는 트리맵 시각화
• '소스 위치'와 함께 보고서 항목의 원래 소스 코드를 표시합니다.

</ph> <ph type="x-smartling-placeholder"></ph>

이 기능은 향후 Lighthouse 버전에서 기본적으로 사용 설정될 예정입니다. 지금은 다음 CLI 플래그를 사용하는 Lighthouse의 실험용 감사

lighthouse https://web.dev --view --preset experimental

감사합니다.

Lighthouse를 사용하고 의견을 제공해 주셔서 감사합니다. 귀하의 의견은 Lighthouse를 개선하는 데 도움이 됩니다. Lighthouse 6.0이 컴퓨터의 성능을 더욱 쉽게 향상시키는 데 도움이 되기를 바랍니다. 있습니다.

다음 단계는 무엇인가요?

• Chrome Canary를 열고 Lighthouse 패널을 사용해 봅니다.
• 노드 CLI(npm install -g lighthouse && lighthouse https://yoursite.com --view)를 사용합니다.
• 다음을 사용하여 Lighthouse CI 실행 살펴보겠습니다
• Lighthouse 감사 문서 검토
• 즐거운 마음으로 웹을 개선해 보세요.

우리는 웹에 열정적이며 개발자 커뮤니티와 협력하여 웹 개선에 참여해 주세요 Lighthouse는 오픈소스 프로젝트이며 오타 수정부터 문서 리팩터링, 신규 출시에 이르는 모든 작업에 도움을 줄 수 있는 있습니다. 참여에 관심이 있으신가요? Lighthouse GitHub 저장소를 둘러보세요.