핵심 웹 생명체 : Google의 웹 성능 지표에 대한 가이드-IT산업-php.cn

Google의 핵심 웹 생명체 및 홍보 방법 이해

Core Web Vitals: A Guide to Google's Web Performance Metrics 코어 포인트 :

Core Web Vitals 는 성능 평가를 단순화하고 웹 사이트 소유자와 개발자가 가장 중요한 개선 사항에 집중하는 데 도움이되는 실제 사용자 경험을 측정하기 위해 Google에서 사용하는 주요 성능 메트릭입니다. 이 세 가지 메트릭은 각각 로딩 속도, 상호 작용 및 시각적 안정성을 평가하는 최대 컨텐츠 도면 (LCP), FID (First Input Latency) 및 누적 레이아웃 오프셋 (CLS)입니다.

lcp

fid 응답 속도 측정, 페이지와 상호 작용하는 사용자 사이의 시간을 기록하고 브라우저가 이벤트 처리기 처리를 시작합니다. CLS 시각적 안정성을 측정하고 예기치 않은 컨텐츠 움직임을 평가합니다. 일반적으로 AD 위의 이미지 또는 현재 스크롤 위치가로드 될 때 DOM이 변경 될 때.

핵심 웹 메트릭을 개선하려면 이미지 최적화, 브라우저 캐시 활용, 렌더 차단 리소스 최소화, 중요한 렌더링 경로 우선 순위를 정하는 등 웹 사이트의 측면을 최적화해야합니다. Google은 귀하의 웹 사이트의 성능 보고서를 기반으로 특정 권장 사항을 제공합니다. 이러한 메트릭을 소중히 여기는 웹 사이트는로드 시간이 더 빠르고, 상호 작용이 향상되고, 더 안정적인 시각적 경험을 갖는 경향이있어 사용자 만족도를 향상시키고 검색 엔진 순위를 향상시킬 수 있습니다.

Google은 사용자가 좋은 웹 경험을 갖기를 원하므로 검색 결과에서 더 높은 웹 사이트도 더 빠르게로드됩니다. 물론 이것은 큰 단순화이지만, 두 사이트를 비슷한 콘텐츠 및 잠재 고객과 비교한다고 가정하면 더 빠른로드 웹 사이트는 결과에서 더 높은 순위를 차지해야합니다. 그러나이 메트릭을 측정하는 Google의 방법은 항상 다소 어려웠으므로 핵심 웹 메트릭을 소개하여 웹 사이트 소유자와 개발자에게 필요한 명확성을 제공합니다. 불행히도,"Performance "는 수십 개의 메트릭을 다루는 일반적인 용어입니다 ... 첫 바이트 시간, 시작 렌더링, CPU 사용법, JavaScript 힙 크기, 첫 컨텐츠 그리기, 첫 번째 의미있는 그리기, 처음 CPU Idle, DOM 로딩, 페이지 전체 로딩, 상호 작용 시간, 초당 스타일 재 계산 등. 다른 도구는 다른 결과 세트를 반환하며 어디서부터 시작 해야할지 알기가 어렵습니다. Google의 웹 메트릭 프로그램은 성능 평가를 단순화하고 가장 중요한 개선 사항에 집중할 수 있도록 설계되었습니다. Core Web Metrics는 실제 사용자 경험을 반영하는 핵심 성과 지표입니다. 일부 메트릭은 Lighthouse 패널, Pagespeed Insights 및 Chrome Devtools의 Google 검색 콘솔에서보고합니다. Web-Vitals JavaScript Library는 웹 사이트를 방문하는 실제 사용자의보다 현실적인 지표를 측정하는 데 도움이 될 수 있습니다. 결과는 추가 분석을 위해 Google 웹 로그 분석 또는 기타 엔드 포인트에 게시 할 수 있습니다.

Google은 75 번째 백분위 수를 사용하는 것이 좋습니다. 75 번째 백분위 수는 동일한 메트릭에 대한 여러 결과를 기록하고, 최고에서 최악의 순서대로 정렬 한 다음 3/4의 값을 분석하는 것이 좋습니다. 따라서 웹 사이트 방문자의 4 분의 3이 이러한 수준의 성능을 경험할 것입니다.

현재 핵심 웹 메트릭은 최대 컨텐츠 도면, 첫 번째 입력 지연 및 누적 레이아웃 오프셋으로, 로딩, 상호 작용 및 시각적 안정성을 각각 평가합니다.

최대 컨텐츠 도면 (LCP)

LCP 측정 실

페이지로드 및 DomContentLoaded와 같은 역사적 지표는 항상 사용자 경험을 반영하지 않기 때문에 항상 문제가되었습니다. 예를 들어, 스포일러는 거의 즉시 나타날 수 있지만 AJAX 요청이 추가로로드되는 데 시간이 더 걸릴 수 있습니다. 최대 콘텐츠 도면 (LCP)은 뷰포트에서 볼 수있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을보고합니다. 2.5 초 미만의 시간은 좋은 것으로 간주되는 반면 4.0 초 이상은 나쁜 것으로 간주됩니다. LCP에서 고려 된 요소 유형은 다음과 같습니다

로고와 메뉴는 움직이지 않습니다 - 안정적인 요소입니다. 광고는 DOM에 추가되며 시작 위치는 변경되지 않으므로 안정적입니다. 그러나 영웅 이미지가 움직일 것입니다 영웅 이미지는 360 x 720 픽셀 뷰포트에서 360 x 510 픽셀입니다. 따라서 충격 점수는 (360 x 510) / (360 x 720) = 0.71 입니다. 뷰포트 높이 720 픽셀에서 수직으로 90 픽셀로 움직이므로 거리 분획은 90 / 720 = 0.125 입니다.

따라서 CLS는 0.71 x 0.125 = 0.089 입니다. 0.1 미만의 CLS 점수는 좋은 것으로 간주되는 반면 0.25 이상은 나쁜 것으로 간주됩니다. 이 경우, CLS는 영향을받는 영역이 크지 만 이동하는 거리는 상대적으로 작기 때문에 CLS는 허용 가능한 범위 내에 있습니다. 그러나 더 큰 광고는 더 많은 관심이 필요합니다.

CLS 알고리즘은 사용자 상호 작용의 500 밀리 초 이내에 레이아웃 오프셋을 기록하지 않으므로 UI 변경 또는 뷰포트 크기 조정이 발생할 수 있습니다. 따라서 햄버거 아이콘에서 전체 화면 메뉴 열기와 같이 작업에 필요한 인터페이스 업데이트, 전환 및 애니메이션에 대한 페이지가 처벌되지 않습니다.

Chrome Devtools의 렌더링 패널 (메뉴 및 GT; More Tools & GT; 렌더링)은 레이아웃 오프셋 영역 옵션을 제공합니다. 상자를 선택하고 페이지를 새로 고치십시오 - 레이아웃 오프셋은 파란색으로 강조 표시됩니다. 또한 네트워크 패널의 네트워크 속도를 수정하여로드 속도를 늦출 수도 있습니다.

fid/tbt는 :

에 의해 개선 될 수 있습니다

속성, css 특성 또는 오래된 채우기 팁을 사용하여 이미지, 비디오 및 iframe 요소를위한 공간을 예약하십시오 (케이블이 될 수 있음) 네트워크 글꼴을로드 할 때 fout (텍스트 깜박임이 없음) 및 foit (보이지 않는 텍스트 깜박임)를 피하십시오. 비슷한 크기의 대체 글꼴을 사전로드하거나 사용하면 width가 도움이됩니다. 뉴스 레터 등록 및 유사한 알림 상자와 같은 초기 페이지로드 중에 기존 콘텐츠 위에 DOM 요소를 삽입하지 마십시오. ~~비용이 적게 값 비싼 애니메이션에 css height 및 aspect-ratio를 사용하십시오.~~

핵심 웹 메트릭은 시간이 지남에 따라 개발되지만 LCP, FID 및 CLS 메트릭을 평가하면 가장 중요한 문제를 식별하는 데 도움이 될 수 있습니다. 빠르고 간단한 퍼즐을 먼저 해결하십시오 - 그들은 보통 가장 큰 ROI를 가지고 있습니다 :

서버 압축 및 http/2 또는 http/3 transform를 활성화하십시오 http 만료 헤더 를 설정하여 브라우저 캐시를 사용하십시오. 가능한 한 빨리 자원을 예압합니다 CSS 및 JavaScript를 병합하고 압축하십시오 사용하지 않은 자원을 삭제하십시오 cdn 또는 더 나은 호스팅 opacity 사용을 고려하십시오 적절한 이미지 크기와 형식을 사용하십시오 이미지 및 비디오 파일 크기 최적화 (전문 CDN은 도움이 될 수 있음)

핵심 웹 메트릭 FAQ

핵심 웹 메트릭은 무엇입니까? 핵심 웹 메트릭은 웹 페이지의 로딩 성능, 상호 작용 및 시각적 안정성을 측정하기 위해 Google에서 도입 한 일련의 사용자 중심 메트릭 세트입니다. 웹 사이트의 전반적인 사용자 경험을 평가하는 데 필수적입니다. 세 가지 핵심 웹 페이지 표시기는 무엇입니까? 세 가지 핵심 웹 메트릭은 다음과 같습니다. 최대 컨텐츠 드로우 (LCP), 첫 입력 지연 (FID) 및 누적 레이아웃 오프셋 (CLS)입니다.

웹 사이트 소유자에게 핵심 웹 메트릭이 왜 중요한가? 핵심 웹 메트릭은 사용자 경험에 직접적인 영향을 미치기 때문에 매우 중요합니다. 이러한 메트릭을 소중히 여기는 웹 사이트는로드 시간이 더 빠르고, 상호 작용이 향상되고, 더 안정적인 시각적 경험을 갖는 경향이있어 사용자 만족도를 향상시키고 검색 엔진 순위를 향상시킬 수 있습니다. 내 웹 사이트의 핵심 웹 페이지 지표를 측정하는 방법은 무엇입니까? Google의 Pagespeed Insights, Lighthouse 및 Chrome 사용자 경험 보고서를 포함하여 핵심 웹 메트릭을 측정하는 데 사용할 수있는 다양한 도구가 있습니다. 이 도구는 LCP, FID 및 CLS 메트릭을 기반으로 웹 사이트의 성능에 대한 통찰력을 제공합니다. 내 웹 사이트의 핵심 웹 페이지 메트릭을 개선하는 방법은 무엇입니까? 핵심 웹 메트릭을 개선하려면 이미지 최적화, 브라우저 캐싱 활용, 렌더 차단 리소스 최소화, 중요한 렌더링 경로 우선 순위를 정하는 등 웹 사이트의 측면을 최적화해야합니다. Google은 귀하의 웹 사이트의 성능 보고서를 기반으로 특정 권장 사항을 제공합니다.

핵심 웹 메트릭이 검색 엔진 순위에 영향을 미칩니 까? 예, Core Web Metrics는 Google 검색 알고리즘의 순위 요인입니다. Google은 2021 년 5 월부터 Page Experience Signals (Core Web Metrics 포함)가 검색 결과 순위에 포함될 것이라고 밝혔다. 이러한 메트릭에서 더 나은 사용자 경험을 반영하는 웹 사이트는 검색 순위에 유리할 수 있습니다.