Google 크롬의 개발 팀은 최근 개발자와 사용자가 다양한 웹사이트의 성능 지표를 추적할 수 있도록 HUD(헤드업 디스플레이)를 추가했습니다. HUD는 LCP(Large Contentful Paint), FID(First Input Delay) 및 CLS(Cumulative Layout Shift)와 같은 Google의 핵심 성능 향상 플랫폼의 일부인 측정항목을 추적합니다. 오늘 우리는 Chrome에서 이 HUD를 활성화하는 방법, 이러한 측정항목이 실제로 의미하는 바, 웹사이트에 미치는 영향에 대해 자세히 알아볼 것입니다.
Chrome의 벤치마크 HUD 사용
Chrome의 벤치마크를 헤드업 디스플레이로 보는 두 가지 방법이 있습니다. Chrome 내의 새로운 기능 플래그를 사용하여 HUD를 활성화하거나 공식 Chrome 확장 프로그램을 사용할 수 있습니다.
기능 플래그를 사용하여 Chrome의 벤치마크 HUD 활성화
Google의 실험적 벤치마크 HUD는 현재 최신 Chrome Canary의 기능 플래그 뒤에 있습니다. 이 기사에서는 데모용으로 Chrome Canary 89.0.4349.3을 사용했습니다. 다음 단계에 따라 Mac, Windows, Linux, Chrome OS 및 Android의 Chrome에서 HUD를 활성화할 수 있습니다.
1. 열기 구글 크롬 카나리아 chrome://flags를 방문하세요. 이 페이지에서 사용할 수 있는 검색 상자에서 ‘HUD로 퍼포먼스 메트릭 표시’ 검색, ‘활성화됨’을 선택합니다. 또는 아래에 제공된 URL을 브라우저의 주소 표시줄에 붙여넣을 수 있습니다.
chrome://flags/#show-performance-metrics-hud
2. 플래그를 활성화한 후 브라우저를 다시 시작합니다. 당신은 지금 오른쪽 상단 모서리에 있는 Chrome의 새로운 벤치마크 HUD를 확인하세요. 브라우저의. 불행히도 HUD는 현재 위치 변경을 위한 끌어서 놓기를 지원하지 않으므로 같은 위치에서 볼 수 있습니다.
Chrome 확장 프로그램을 사용하여 Chrome의 벤치마크 HUD 활성화
Chrome Canary로 최첨단에 살고 싶지 않다면 Google에서 출시한 Chrome 확장 프로그램을 설치하여 유사한 HUD를 얻을 수 있습니다. 방법은 다음과 같습니다.
1. Google 크롬을 열고 방문하십시오. 크롬 웹 스토어. 검색 상자에 ‘Web Vitals’를 입력하고 addyosmani에서 제공하는 것을 설치합니다. 또는 다음을 수행할 수 있습니다. 이 링크를 사용 확장 프로그램의 페이지를 직접 엽니다.
2. 확장 프로그램을 설치하면 기능 플래그와 함께 제공되는 동일한 메트릭이 표시됩니다. 사용자의 편의와 선호도에 따라 둘 중 하나를 사용할 수 있습니다. 지금은 기능 플래그 버전을 빠르게 비활성화할 수 있는 옵션이 없으므로 Chrome 확장 프로그램을 사용하는 것이 좋습니다.
Chrome의 벤치마크 HUD의 기능
Chrome의 벤치마크 HUD는 현재 다음 기능을 제공합니다.
- 최대 함량 페인트(LCP)
- 첫 번째 입력 지연(FID)
- 누적 레이아웃 시프트(CLS)
- 평균 드롭 프레임(ADF)
최대 함량 페인트(LCP)
LCP(Large Contentful Paint)는 웹 페이지의 볼 수 있는 부분에서 가장 큰 이미지 또는 텍스트 블록을 렌더링하는 데 걸리는 시간. Google은 다음과 같은 웹사이트를 권장합니다. 처음 2.5초 이내에 LCP 보유 이상적인 사용자 경험을 위해 약 2.5초에서 4초 정도의 LCP는 평균으로 간주되고 그 이상의 지속 시간은 불량으로 간주되어 불량한 UX를 초래할 수 있습니다.
LCP를 2.5초 이내로 유지하기 위해 회사는 개발자들에게 모바일 및 데스크톱 버전에서 페이지 로드의 75번째 백분위수 측정. 간단히 말해서 페이지 보기의 75% 이상이 필요한 양호한 임계값(이 경우 2.5초)을 충족하는지 확인하기만 하면 됩니다.
첫 번째 입력 지연(FID)
LCP가 로딩 속도에 관한 것이라면 FID(First Input Delay)는 웹 페이지의 응답성을 나타냅니다. 사용자가 페이지와 상호 작용할 때부터 페이지가 작업에 응답하기 위해 처리를 시작할 때까지의 시간을 측정합니다. 주목할 가치가 있습니다. FID에는 전체 처리 시간이 포함되지 않습니다..
이상적인 시나리오에서는 웹사이트의 FID 값은 100밀리초 미만이어야 합니다.. 100밀리초에서 300밀리초 사이의 범위는 개선이 필요합니다. 시간이 300밀리초를 초과하면 웹페이지의 FID가 불량한 것으로 간주됩니다. 위에서 설명한 것과 동일한 75번째 백분위수 페이지 로드 접근 방식을 따라 좋은 FID 점수를 유지할 수 있습니다.
누적 레이아웃 시프트(CLS)
CLS(Cumulative Layout Shift)는 웹 사이트의 콘텐츠가 경고 없이 갑자기 위아래로 이동할 때 발생하는 모든 성가신 시간을 추적합니다. 즉, CLS는 웹사이트의 시각적 안정성을 측정합니다.
Google에 따르면 레이아웃 전환은 주로 페이지의 리소스가 비동기식으로 로드되거나 DOM 요소가 웹 페이지에 동적으로 추가될 때 발생합니다. 좋은 CLS 점수는 0.1 미만입니다. 0.25 이상의 점수는 불량으로 처리됩니다. CLS 점수 계산 방법에 대해 자세히 알아볼 수 있습니다. 바로 여기에.
평균 드롭 프레임(ADF)
ADF(Average Dropped Frame)는 이름에서 알 수 있듯이 사용자가 웹 페이지와 상호 작용할 때 드롭된 프레임의 비율을 보여줍니다. ADF 비율이 낮을수록 성능이 향상되지만 프레임 손실이 많으면 지연 및 기타 성능 문제가 발생할 수 있습니다. 이 글을 쓰는 시점에서 ADF는 HUD의 기능 플래그 버전에서만 사용할 수 있습니다.
Chrome의 벤치마크 HUD를 사용하여 웹사이트 성능 추적
지난 달 블로그 게시물에서 Google은 다음과 같은 계획을 발표했습니다. Core Web Vitals – LCP, FID 및 CLS를 순위 신호로 고려 2021년 5월부터. 웹사이트 소유자 또는 개발자라면 Chrome의 벤치마크 HUD를 사용하여 웹사이트의 사용자 경험을 최적화하여 다가오는 업데이트로 인해 부정적인 영향을 받지 않도록 하는 것이 좋습니다. 이러한 팁을 더 보려면 Google Chrome 팁 및 트릭 문서를 확인하는 것을 잊지 마십시오.
우리의 활동을 지원해주세요 ❤️
이 글이 마음에 드셨다면, 앞으로도 좋은 콘텐츠를 계속 발행할 수 있도록 팁을 남겨주세요.
