GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
Google Lighthouse는 많은 웹 사이트가 Lighthouse 성능 점수(Lighthouse Performance Score)로 성능을 측정할 수 있는 사실상의 도구가 되었습니다. 새로운 버전인 Lighthouse 6.0은 이제 Chrome Canary, PageSpeed Insights 및 GSC 콘솔의 NPM에서 사용할 수 있습니다. 7월 중순까지 Lighthouse 6.0은 크롬 84의 크롬 사용자에게 완전히 출시될 예정입니다. 지금이 Lighthouse 6.0 점수 감사를 통해 귀하의 사이트가 새 버전에 대한 준비가 되었는지 확인할 때입니다.
Lighthouse 6.0에는 성능 점수를 계산하기 위한 새로운 가중치 공식을 비롯하여 새로운 평가 기준과 감가상각 지표가 함께 제공됩니다. 이 새로운 버전은 Google 페이지 경험 업데이트에서 Google의 순위 알고리즘에 코어 웹 메트릭이 추가된다는 발표와 함께 검색 거인이 인식 속도, 즉 사용자가 페이지를 로드한 것으로 인식하는 속도를 강조하고 있다는 분명한 신호입니다. 사용자가 사이트의 로드를 더 빨리 감지할수록 순위가 높아지고 전환율이 높아집니다.
최적화하는 데 필요한 6가지 Lighthouse 지표
구글은 사용자가 웹을 어떻게 경험하는지에 관심이 있다. 두 개의 웹 사이트가 동시에 로딩을 완료할 수 있지만 페이지에 콘텐츠가 표시되는 방식에 따라 한 웹 사이트가 더 빨리 로딩되는 것처럼 보일 수 있습니다. 두 사이트가 동시에 로딩을 완료하는 동안 Google은 후자, 즉 더 빠른 성능을 가진 사이트를 선호할 것입니다.
Lighthouse 6.0 점수는 6개의 사용자 중심 속도 메트릭 가중 평균을 기준으로 합니다. FCP(First Contentful Paint), SI(Speed Index), LCP(Largest Contentful Paint)는 감지된 하중 속도를 측정하고 버전 6의 웹 사이트 Lighthouse 점수에서 총 가중치 55%를 유지합니다. 점수의 40%는 응답성을 측정하는 지표를 기반으로 하며, 이는 사용자의 속도 인식에 영향을 주는 또 다른 측면입니다. 여기에는 총 차단 시간(TBT)과 대화형 시간(TTI)이 포함됩니다. 점수의 마지막 5%는 CLS(Cumulative Layout Shift)라는 시각적 안정성을 측정하는 지표를 기반으로 합니다.
Lighthouse 5.7 점수의 첫 번째 의미 있는 페인트(FMP)와 첫 번째 CPU 유휴(FCI)가 사용자 중심 관점에서 속도를 측정하기 위한 더 나은 메트릭으로 대체되었습니다. Lighthouse 6.0에서 가장 큰 Contentful Paint (LCP) 및 총 차단 시간 (TBT)입니다.
| 등대 5.7 | 무게 | 등대 6.0 | 무게 |
|---|---|---|---|
| 첫 번째 내용 페인트(FCP) | 20% | 첫 번째 내용 페인트(FCP) | 15% |
| 속도 지수(SI) | 27% | 속도 지수(SI) | 15% |
| 첫 번째 의미 있는 페인트(FMP) | 7% | LCP(Largest Contentful Paint) | 25% |
| 첫 번째 CPU 유휴(FCI) | 13% | 총 차단 시간(TBT) | 25% |
| 대화식 시간(TTI) | 33% | 대화식 시간(TTI) | 15% |
| - | - | CLS(Cumulative Layout Shift) | 5% |
다음은 Lighthouse 6.0을 준비하는 동안 웹 사이트를 감사할 때 중점을 두어야 할 6가지 속도 지표입니다. 메트릭은 페이지가 로드될 때 측정되는 순서대로 배치됩니다.
이 문서의 하단에 제공해야 하는 속도와 메트릭당 최적화 기법을 설명하는 간단한 체크리스트가 나와 있습니다.
첫 번째 내용 페인트
FCP는 사용자가 화면에서 페이지 콘텐츠를 볼 수 있는 첫 번째 지점을 표시합니다. 이 콘텐츠에는 텍스트, 이미지, 그래픽 또는 SVG 파일이 포함됩니다. FCP는 Lighthouse 5.7에서 20%의 가중치를 가졌지만 Lighthouse 6.0 점수보다 15%만 가중치를 유지했습니다.
위의 필름 스트립에서 첫 페이지 로드에 대한 FCP는 0.6초로 측정됩니다. TheTieBar.com 의 홈페이지에 콘텐츠가 처음 나타날 때이지만 모든 콘텐츠가 표시되는 것은 아닙니다. 이것은 첫 번째와 가장 큰 만족스러운 페인트 사이의 중요한 차이입니다. LCP는 접기 위 내용이 표시될 때 0.9초에서 측정됩니다.
Lighthouse 6.0 점수 감사를 진행할 때 페이지의 평균 FCPS가 2초 이하인지 확인하십시오. 이 값은 75번째 백분위수에 대한 메트릭의 임계값이며 Google에서 빠른 것으로 간주됩니다. 2초에서 4초 사이의 FCPS는 보통 속도로 간주되며, 4초를 초과하는 FCPS는 50 백분위수 아래로 떨어지고 느리게 분류됩니다.
FCPS 로딩 속도가 너무 느린 경우 다음 중 하나 이상이 원인일 수 있습니다.
- 렌더링 차단 리소스가 너무 많음
- 대용량 CSS 파일
- 타사 오리진에 대한 보안 연결 부족
- 긴 서버 응답 시간
- 여러 페이지 리디렉션
- 캐시되지 않은 정적 리소스
- 과도한 DOM 크기
FCP를 최적화하려면 다음 사항을 고려하십시오.
- 중요한 리소스를 인라인으로 지정하고 중요하지 않은 리소스를 연기하며 사용하지 않는 모든 리소스를 제거하여 렌더링 차단 URL의 영향을 줄입니다.
- CSS에서 불필요한 문자를 모두 제거하여 파일 크기를 줄입니다.
- 사전 연결을 사용하여 중요한 타사 오리진에 대한 초기 연결을 설정합니다.
- 서버의 응용 프로그램 논리를 최적화하거나 서버 하드웨어를 업그레이드하여 더 많은 메모리를 확보하여 서버 응답 시간을 단축합니다.
- 1페이지 이상의 리디렉션을 피하십시오.
- HTTP 캐싱을 사용하여 정적 리소스를 캐시합니다.
- DOM 크기를 줄이기 위해 총 1,500개 미만의 노드, 32개 미만의 노드, 60개 미만의 자식 노드를 가진 부모 노드를 포함해야 합니다.
속도 지수
SI는 페이지 로드의 시각적 진행률을 측정하고 콘텐츠가 페인트되는 속도에 대한 전체 점수를 계산합니다. Lighthouse 5.7에서 SI는 웹사이트 성능 점수보다 27%의 가중치를 보였습니다. Lighthouse 6.0에서는 이 수치가 약간 감소하여 페이지 성능 점수의 15%에 영향을 미칩니다. 구글은 여전히 이것을 핵심 지각 지표로 간주하고 있으며, 느린 이미지 디스플레이가있는 페이지는 janky로 인식 될 수 있습니다.
Lighthouse는 브라우저에 로드되는 페이지의 필름 스트립을 캡처하고 프레임별로 시각적 진행을 분석하여 SI를 측정합니다. 페이지의 보이는 부분이 표시되는 평균 시간에 따라 SI가 결정됩니다. 이 메트릭은 장치 화면 크기에 따라 달라집니다.
Lighthouse 6.0 점수 감사를 진행할 때 4.3초 이하의 SI를 목표로 삼으십시오. 이 속도는 75번째 백분위수에 속하며 구글에 의해 빠른 것으로 간주됩니다. SI가 4.3초에서 5.8초 사이인 페이지는 보통이며, 5.8초 미만인 SI는 50 백분위수 미만으로 떨어지고 느린 것으로 간주됩니다.
느린 SI 시간은 다음과 같은 원인에서 비롯됩니다.
- 메인 스레드의 로드 시간이 4초를 초과합니다.
- JavaScript 실행 시간이 3.5초를 초과합니다.
- 큰 폰트 파일은 보이지 않는 텍스트(FOIT)의 플래시를 유발합니다.
SI 시간을 줄이려면 다음 사항을 고려하십시오.
- 코드 분할을 구현하고, 사용하지 않는 코드를 제거하고, 코드를 압축하여 메인 스레드의 부하와 JavaScript 실행 시간을 줄입니다.
- FOIT를 방지하기 위해 Webfont를 로드하는 동안 텍스트가 계속 표시되도록 합니다.
가장 큰 내용 페인트
LCP는 Lighthouse 6.0에 추가된 새로운 메트릭으로, 사이트의 성능 점수에서 25%의 가중치를 받습니다. LCP는 Lighthouse 5.7의 첫 번째 의미있는 페인트 (FMP)를 대체합니다. 두 메트릭 모두 가장 큰 콘텐츠 요소가 표시되는 시간을 측정하지만 FMP는 일관성이 없는 결과를 생성하는 것으로 악명이 높으며 특정 웹 브라우저에서만 표준화할 수 있습니다.
LCP는 가장 큰 컨텐츠 요소가 화면에 완전히 보이는 시점을 측정합니다. 측정된 콘텐츠 요소에는 블록 수준 요소, 이미지(SVG 파일 내 이미지 포함) 및 비디오가 포함됩니다. 이는 대부분의 사용자가 페이지를 완전히 로드한 것으로 인식하고 구매할 가능성이 높은 시점을 표시하기 때문에 전자 상거래 웹 사이트에 매우 중요한 지표입니다.
위의 예에서 LCP는 0.9초이며, 기본 이미지가 완전히 그려집니다. 이 메트릭은 사용자가 페이지가 완전히 로드된 것을 감지하지만 콘텐츠가 여전히 폴드 아래에 로드되는 것을 감지하는 뚜렷한 순간을 포착합니다.
Layer0(현재 Edgio)의 웹사이트와 같이 최고 성과를 기록하는 웹사이트는 1초 이내에 LCP를 제공합니다. 최대 2.5초의 LCP는 빠른 것으로 간주되며 이 지표에서 75번째 백분위수로 순위가 매겨집니다. 2.5초에서 4초 사이의 LCP는 보통으로 간주되어 개선이 필요하며, 4초를 초과하는 LCP는 50번째 백분위수 이하로 떨어지며 Google에 의해 느린 것으로 간주됩니다.
느린 LCP는 일반적으로 다음 중 하나 이상에서 발생합니다.
- 느린 서브 응답 시간
- 렌더링을 차단하는 JavaScript 및 CSS
- 긴 리소스 로드 시간
- 클라이언트 측 렌더링 문제
Lighthouse 6.0 점수 감사 중에 원하는 LCP보다 느린 경우 다음 사항을 고려하십시오.
- 가장 가까운 CDN으로 트래픽을 라우팅하고, 자산을 캐싱하고, HTML 페이지를 캐시 우선 처리하고, 서드파티 연결을 조기에 설정하여 서버 응답 시간을 최적화합니다.
- 불필요한 CSS를 제거하여 CSS를 줄이고, 중요하지 않은 CSS를 연기하며, 인라인 중요 CSS를 사용합니다. JavaScript 파일을 압축하여 JavaScript 차단 시간을 줄입니다.
- 리소스 로드 시간을 줄이려면 이미지 및 텍스트 파일을 최적화 및 압축하고 중요한 리소스를 미리 로드합니다.
- 서버측 렌더링 및 사전 렌더링을 사용하여 클라이언트측 렌더링을 최적화합니다.
총 차단 시간
TBT는 13%의 무게를 지탱하던 Lighthouse 5.7의 FCI를 대체합니다. Lighthouse 6.0에서 TBT는 페이지 응답성을 측정하며 성능 점수의 25%를 차지합니다. TBT는 페이지가 안정적으로 대화형이 되기 전의 비대화형 페이지의 심각도를 측정합니다.
당신은 이러한 고통스러운 경우를 알고: 당신은 페이지가 로드 될 때까지 기다리는, 그리고 마지막으로-그것은 준비가 보인다. 보려는 제품을 탭했지만 아무 일도 일어나지 않습니다. 다시 누르시겠습니까? 이 대기 기간은 말 그대로 소비자에게 스트레스를 유발하는 것으로 알려져 있습니다. 본질적으로 TBT는 소비자가 페이지의 비 상호 작용으로 인해 스트레스를 느끼는 시간입니다.
출처: web.dev
이 메트릭은 표시된 첫 번째 콘텐츠 요소(FCP)와 사용자가 페이지와 완전히 상호 작용할 수 있는 시간(TTI) 사이의 총 “차단” 시간(50ms 이상 걸리는 작업)을 계산하여 측정됩니다. 예를 들어, 위의 이미지에서 메인 스레드에서 발생하는 다섯 가지 작업이 있지만 그 중 세 가지가 50ms를 초과합니다. 첫 번째는 200ms, 두 번째는 40ms, 세 번째는 105ms입니다. TBT는 (200+40+105) 345ms입니다.
50ms보다 오래 걸리는 작업은 사용자가 페이지를 느리거나 더 나쁘거나 비활성 상태로 인식하고 떠날 수 있을 정도로 충분히 길어집니다. 이를 방지하려면 300ms 미만의 TBT를 빠른 속도로 간주하는 것을 목표로 합니다. 300ms에서 600ms의 TBT는 중간 속도로 간주되며 개선이 필요합니다. 600ms보다 느린 TBT는 50 백분위수 이하로 떨어지며 느린 것으로 간주됩니다.
긴 작업은 일반적으로 다음 중 하나 이상으로 인해 발생합니다.
- 250ms 이상 주 스레드를 차단하는 타사 코드
- JavaScript 실행 시간이 3.5초 이상 걸림
- 로드 중에 주 스레드가 4초 이상 사용 중입니다.
- 대량의 네트워크 요청 및 대용량 전송
이 메트릭을 개선하려면 다음을 고려하십시오.
- 비동기식 또는 스크립트 태그의 지연 속성을 사용하여 타사 JavaScript를 효율적으로 로드하고, 중요한 타사 오리진에 초기 연결을 설정하고, 지연 로딩을 사용합니다.
- JavaScript 실행 속도를 높이고 메인 스레드의 부하를 줄이려면 코드 분할을 구현하고 사용하지 않는 코드를 제거하고 코드를 압축하십시오.
- CSS 및 JavaScript를 최적화하여 리소스 수와 전송 크기를 줄입니다.
대화식 시간
TTI는 라이트하우스 5.7에서 이월된 세 번째 메트릭이지만 구글은 라이트하우스 6.0에서 33%에서 15%로 무게를 줄였다. TTI는 TBT와 동반되는 지표로, 페이지가 안정적으로 또는 완전한 대화형으로 전환되는 데 걸리는 시간을 측정합니다. Lighthouse는 첫 번째 콘텐츠 요소가 표시되고 초기 스크립트(있는 경우)가 로드되어 50ms 이내에 사용자 입력에 응답할 수 있을 때 페이지를 안정적으로 상호 작용하는 것으로 간주합니다.
사용자에게 느린 TTI는 페이지가 비활성 상태이거나 깨진 것처럼 느껴질 수 있습니다. 페이지가 상호 작용하는 것처럼 보이지만 실제로는 메인 스레드가 차단되었기 때문이 아닙니다(TBT로 측정). Lighthouse 6.0에 대한 웹 사이트를 감사할 때 TTI를 5.2초 이하로 빠르게 고려하십시오. 5.2초에서 7.3초 사이의 TTI는 보통 속도로 간주되며, 7.3초보다 느린 TTI는 느린 것으로 간주되어 소비자의 사이트 이용 의사에 영향을 미칩니다.
Lighthouse 6.0 점수 감사에서 TTI 속도가 불량한 것으로 나타나면 다음 중 하나 이상이 원인일 수 있습니다.
- 큰 페이로드 크기 및 긴 스크립트 구문 분석 시간
- 긴 리소스 로드 시간
- 타사 코드가 250ms 이상 주 스레드를 차단합니다.
- 중요 요청 체인
- 느린 주 스레드 속도 및 JavaScript 실행 시간
- 높은 리소스 수 또는 큰 전송 크기
JavaScript를 최적화하면 TTI 시간을 줄일 수 있습니다. 여기에는 다음이 포함됩니다.
- JavaScript 파일을 줄이고 압축하여 페이로드 크기와 스크립트 구문 분석 시간을 줄입니다.
- 요청 사전 로드 및/또는 사전 연결을 추가하여 로드 시간을 단축할 수 있습니다.
- 스크립트 태그의 async 또는 defer 속성을 사용하고 lazy-loading을 사용하여 타사 JavaScript를 효율적으로 로드합니다.
- 중요한 리소스의 수를 줄이고 나머지 리소스가 로드되는 순서를 최적화하여 중요한 요청 체인이 성능에 미치는 영향을 줄입니다.
- 코드 분할을 구현하고, 사용하지 않는 코드를 제거하고, 코드를 압축하여 메인 스레드의 부하와 JavaScript 실행 시간을 줄입니다.
- CSS 및 JavaScript를 최적화하여 리소스 수와 전송 크기를 줄입니다.
누적 레이아웃 이동
CLS는 Lighthouse 6.0에 도입된 세 번째 새로운 메트릭으로, Lighthouse 5.7의 메트릭을 대체하지 않는 유일한 메트릭입니다. CLS는 Lighthouse 6.0 점수의 마지막 5%를 차지하며 시각적 안정성을 측정합니다.
이 메트릭은 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 측정합니다. 전에도 이런 경험을 하셨을 겁니다. 제품을 누르려고 하는데 갑자기 페이지에서 다른 것을 누르는 겁니다. 요소가 바뀌었기 때문이죠. 이러한 경험은 매우 짜증나고 사용자에게는 janky로 보일 수 있습니다.
CLS는 페이지의 전체 수명 동안 발생하는 각 예기치 않은 레이아웃 이동에 대한 모든 개별 레이아웃 이동 점수의 합계로 측정됩니다. 좋은 CLS는 0.1보다 낮으며 75번째 성능 백분위수에 속합니다. 0.1에서 0.25 사이의 CLS는 보통으로 간주되며 0.25보다 큰 측정값은 50 백분위수 이하로 떨어지며 Google에서 느린 것으로 간주됩니다.
Lighthouse 6.0 점수 감사 중에 CLS가 불량한 경우 다음 중 한 가지 원인이 있을 수 있습니다.
- 저절로 크기가 바뀌는 이미지나 동영상
- 늦게 로드되어 의도한 것보다 크거나 작게 표시되는 글꼴
이 메트릭을 개선하려면 다음을 고려하십시오.
- 이미지 및 비디오 요소에 정확한 크기 포함
- 팝업 광고 또는 배너 금지
- FOIT/FOUT를 유발하는 글꼴 방지
등대 점수는 Google이 귀하의 사이트에 대해 어떻게 생각하는지 보여줍니다.
페이지의 Lighthouse Performance Score는 Google이 페이지를 속도 측면에서 인식하는 방식을 나타냅니다. Lighthouse 6.0의 각 메트릭은 사용자가 속도를 인식하는 방식을 측정하기 위한 Google의 최선의 시도를 반영합니다. 점수가 기준 이하로 떨어지면 사용자뿐만 아니라 검색 거대 기업에 의해 느린 것으로 인식되어 매출 및 SEO에 부정적인 영향을 미칩니다.
구글은 검색 엔진 결과 페이지에서 더 빠르고 높은 순위를 매긴다. SEO 외에도 사이트 속도는 전환율과 수익에 큰 영향을 미치는 것으로 밝혀졌습니다. 예를 들어, 아마존은 페이지 로딩 시간이 1초로 지연되면 회사가 연간 60억 달러의 손실을 입을 수 있다는 사실을 발견했습니다.
결론
이 최신 버전의 Lighthouse는 지각 속도 지표에 대한 검색 거인의 강조를 보여줍니다. Lighthouse 6.0의 점수 측정 지표는 방문자가 페이지를 완전히 로드한 것으로 인식하는 속도를 측정합니다(백그라운드에서 프로세스를 실행 중이더라도).
첫 번째 Contentful Paint, 속도 지수 및 최대 Contentful Paint의 세 가지 지표는 감지된 부하 속도를 측정하며 성과 점수의 55%를 차지합니다. FCPS 2초, LCP 2.5초, SI 4.3초 이하를 목표로 합니다.
성능 점수의 또 다른 40%는 페이지의 응답성을 측정하는 지각 지표를 기반으로 합니다. 여기에는 총 차단 시간 및 대화형 시간 이 포함됩니다. 빠른 Lighthouse 6.0 점수 감사는 TBT가 300ms 미만이고 TTI가 5.2초 미만인 경우 또는 사용자가 사이트를 난폭한 것으로 인식할 수 있습니다.
마지막으로, 아무도 텍스트 나 이미지가 화면 안팎으로 뛰어 오르는 것을 좋아하지 않습니다. 누적 레이아웃 이동은 Lighthouse 6.0 감사에서 고려해야 할 여섯 번째 지표입니다. CLS 측정이 0.1 미만인 것을 목표로 하면, 성과 점수에 포함되는 체중의 5%를 모두 받게 됩니다.
Lighthouse 6.0 점수 감사에서 제공해야 하는 속도를 다루는 간단한 체크리스트와 메트릭당 최적화 기법을 받으시려면 아래 양식을 작성해 주십시오.
