2023년 가장 중요한 핵심 성능 지표 지표

게시 됨: 2023-08-17

좋은 제품만으로는 더 이상 소비자 충성도를 보장할 수 없습니다.

사실은…

고객의 83%는 회사가 제공하는 경험이 제품 및 서비스만큼 중요하다고 말합니다.

그리고 몇 년 전에는 사용자 경험을 측정하는 것이 거의 불가능에 가까웠지만 오늘날에는 사이트 경험을 정량화하고 개선 기회를 식별하는 Core Web Vitals를 추적할 수 있습니다.

Core Web Vitals 통과를 목표로 해야 하는 이유와 웹사이트의 미래 경쟁력을 확보하는 방법에 대해 알아보십시오.

핵심 성능 보고서가 비즈니스에 중요한 이유는 무엇입니까?

Core Web Vitals는 로드, 상호 작용 및 시각적 안정성이라는 세 가지 기본 측면에 중점을 두어 사용자의 실제 경험을 측정합니다.

즉…

Core Web Vitals를 통과한다는 것은 Google과 사용자 모두가 좋아하는 웹사이트가 있다는 것을 의미하며 필연적으로 다음과 같은 결과를 가져옵니다.

  • 더 나은 순위;
  • 이탈률 감소;
  • 증가 전환.

자세히 설명하겠습니다.

Google은 사용자 경험이 우수한 사이트를 선호합니다.

2020년에 Google은 페이지 경험에 대한 기존 검색 신호를 결합한 이니셔티브인 페이지 경험 알고리즘 업데이트(2021년 6월 출시)를 발표했습니다.

  • Mobile Friendly : 모바일에 최적화된 페이지입니다.
  • HTTPS : 페이지가 HTTPS를 통해 제공되므로 안전합니다.
  • 거슬리는 삽입 광고 없음 : 사용자가 페이지의 콘텐츠에 쉽게 액세스할 수 있습니다.

최신 실제 사용자 중심 지표인 Core Web Vitals:

  • 가장 큰 Contetfult 페인트(LCP)  
  • 첫 번째 입력 지연(FID)
  • CLS(누적 레이아웃 이동)

페이지 경험 신호 핵심 성능 보고서

이제 스스로에게 다음과 같이 질문할 수 있습니다.

수백 가지의 순위 요소가 있습니다. 페이지 경험 신호가 내 사이트 순위에 얼마나 영향을 미칩니까?

콘텐츠 관련성은 Google이 SERP를 구축할 때 여전히 가장 중요한 요소입니다.

그러나 많은 쿼리에 대해 유용한 관련 콘텐츠가 많이 있습니다. 이러한 경우좋은 페이지 경험을 갖는 것이 검색 성공으로 이어지는 주요 차별화 요소가 될 수 있습니다 .

그리고 Google은 다음과 같이 말합니다.

“이러한 요소를 최적화하면 모든 웹 브라우저와 표면에서 사용자가 웹을 더욱 즐겁게 사용할 수 있습니다. 우리는 사용자가 더 많이 참여하고 덜 마찰적으로 거래할 수 있기 때문에 이것이 웹에서 비즈니스 성공에 기여할 것이라고 믿습니다.”

즉, Core Web Vitals를 통과하고 우수한 사용자 경험을 제공하는 이점은 다음과 같은 이유로 SERP를 넘어 확장됩니다.

사용자는 로딩이 빠른 웹사이트 방문을 좋아합니다.

뿐만 아니라 Core Web Vitals의 도입으로 사용자가 전반적으로 훌륭한 사용자 경험을 제공하는 사이트를 높이 평가한다는 것이 분명해졌습니다. 이는 다음 세 가지 특성을 가진 사이트를 의미합니다.

  1. 빠른 로딩 시간(LCP)
  2. 원활한 상호작용(FID)
  3. 시각적 안정성(CLS)

그리고 이 세 가지 구성 요소 중 하나라도 개선하면 몇 가지 놀라운 결과로 이어지는 방법을 보여주는 수많은 사례 연구가 이미 있습니다.

1. 경제신문

The Economic Times 홈페이지

월간 활성 사용자가 4,500만 명이 넘는 가장 큰 뉴스 매체 중 하나인 The Economic Times는 독자들에게 최적의 경험을 제공하기 위해 LCP(Largest Contentful Paint)와 CLS(Cumulative Layout Shift)를 최적화했습니다. 최종 결과는 CLS를 250%에서 0.09로, LCP를 80%에서 2.5초로 향상시켜 Core Web Vitals를 통과시켰고 마지막으로 가장 중요한 것은 전체 이탈률을 43%까지 줄이는 것이었습니다.

2. 농약

아그로피 홈페이지

라틴 아메리카 기업식 농업 시장을 위한 온라인 마켓플레이스인 Agrofy는 향상된 성능이 이탈률을 감소시킬 것이라는 가설을 세웠습니다. 그들은 가장 중요한 Core Web Vitals 지표 중 하나로 LCP 점수를 높이는 데 중점을 두었습니다. 그 결과LCP가 70% 증가했고, 부하 포기가 76% 감소했습니다(3.8%에서 0.9%로 감소) .

3. 야후!일본

야후! 일본 홈페이지

야후! 월간 페이지 뷰가 790억 회 이상인 일본 최대 미디어 회사 중 하나인 JAPAN은 대규모 CLS 문제를 확인했습니다. 몇 가지 최적화를 적용한 후세션당 페이지 조회수가 15.1% 증가하고 세션 시간이 13.3% 길어지고 이탈률이 1.72% 감소하는 놀라운 개선 효과를 보았습니다.

Core Web Vitals를 전달하여 비즈니스 측정항목을 개선하세요. 오늘 NitroPack을 설치하세요 →

현재 가장 중요한 핵심 성능 지표는 무엇입니까?

2023년 현재 가장 중요한 Core Web Vitals는 LCP(Largest Contentful Paint), FID(First Input Delay) 및 CLS(Cumulative Layout Shift)입니다. 이 세 가지 측정항목은 페이지의 전반적인 사용자 경험을 가장 잘 나타내는 것으로 Google에서 명시적으로 강조합니다 .

이것이 기본 핵심 성능 지표이지만 TTFB(Time to First Byte), TBT(Total Blocking Time), FCP(First Contentful Paint)와 같은 기타 성능 메트릭은 여전히 ​​웹사이트의 성능을 포괄적으로 이해하는 데 중요합니다. 성능:

  • TTFB는 클라이언트(일반적으로 웹 브라우저)가 서버에 HTTP 요청을 할 때부터 응답의 첫 번째 바이트가 수신될 때까지 걸리는 시간을 측정합니다.
  • TBT는 FCP(First Contentful Paint)와 TTI(Time to Interactive) 사이의 시간을 측정합니다. 이 시간 동안 기본 스레드는 입력 응답을 방지할 만큼 충분히 오랫동안 차단되었습니다.
  • FCP는 페이지가 로드되기 시작할 때부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정합니다.

따라서 다음에 성능 감사를 실행할 때 더 많은 주의를 기울이십시오.

하지만 지금은 Core Web Vitals로 돌아가 보겠습니다.

최대 콘텐츠 페인트(LCP)

LCP는 웹 페이지에서 볼 수 있는 가장 큰 콘텐츠 요소가 뷰포트에 완전히 표시되는 데 걸리는 시간을 측정합니다. 이것은 이미지, 비디오 또는 텍스트 블록일 수 있습니다.

세 가지 Core Web Vitals를 모두 통과하는 것이 중요하지만 LCP는 사용자가 가장 중요한 콘텐츠를 보기 위해 대기하는 시간을 나타내므로 가장 중요한 것으로 간주됩니다.

NitroPack 홈 페이지 가장 큰 콘텐츠가 있는 페인트 요소

LCP 점수가 좋으면 사용자가 과도한 지연 없이 주요 콘텐츠를 볼 수 있으므로 페이지가 빠르게 로드되는 것으로 인식할 수 있습니다. 이상적으로 LCP는 좋은 사용자 경험을 제공하기 위해 페이지 로드가 시작된 후 2.5초 이내에 발생해야 합니다 .

최대 콘텐츠 페인트(LCP) 임계값

결과적으로 LCP는 웹 사이트에서 가장 어려움을 겪는 메트릭입니다. CrUX 보고서에 따르면LCP가 좋은 사이트는 57.8%에 불과합니다 .

LCP가 그렇게 어려운 메트릭인 이유는 최적화와 관련하여 움직이는 부분이 많기 때문입니다. 우수 임계값에 도달하려면 다음이 필요합니다.

  1. LCP 자원이 가능한 빨리 로드되기 시작하는지 확인하십시오.
  2. 리소스 로드가 완료되는 즉시 LCP 요소가 렌더링될 수 있는지 확인합니다.
  3. 품질 저하 없이 가능한 한 LCP 리소스의 로드 시간을 줄입니다.
  4. 가능한 한 빨리 초기 HTML 문서를 전달하십시오.

많은 작업이 필요하지만 이 기사의 끝에서 이를 수행하는 데 도움이 되는 몇 가지 최적화 기술을 공유합니다.

또한 Philip Walton의 동영상을 확인하여 메트릭과 다양한 최적화 방법을 더 깊이 이해할 수 있습니다.

양호한 LCP 임계값에 자동으로 도달합니다. 지금 NitroPack 받기 →

첫 번째 입력 지연(FID)

FID는 페이지 로드의 초기 단계에서 웹 사이트의 응답성에 중점을 둡니다. 보다 전문적인 용어로, 사용자가 웹사이트와 처음 상호작용(예: 링크 클릭 또는 버튼 누르기)하는 시점과 브라우저가 해당 상호작용에 응답할 수 있는 시점 사이의 시간 간격을 측정합니다.

좋은 FID 점수를 목표로 하는 것이 중요한 이유는 다음과 같습니다.

1. 사용자는 웹페이지를 방문할 때 대화형 및 반응형을 기대합니다. 사용자의 상호 작용과 웹 사이트의 응답 사이에 눈에 띄는 지연이 있는 경우 불만이 생길 수 있으며 사용자가 세션을 계속하거나 나중에 사이트를 다시 방문하지 못하게 할 수 있습니다.

2. 일부 메트릭은 콘텐츠가 화면에 나타나는 시기 또는 콘텐츠가 완전히 로드되는 시기를 측정하지만 FID는 초기 상호 작용에 중점을 둡니다. 이는 페이지가 시각적으로 빠르게 렌더링될 수 있지만 기본 스레드가 사용 중인 경우 여전히 사용자 입력에 응답하지 않기 때문에 독특하고 필수적입니다.

3. 낮은 FID 점수는 종종 무거운 작업이나 메인 스레드에서 긴 JavaScript 실행으로 인해 발생합니다. 이러한 작업은 기본 스레드를 차단하여 사용자 입력에 응답하지 않도록 할 수 있습니다. FID를 모니터링함으로써 개발자는 이러한 문제가 있는 작업을 식별하고 최적화하여 사이트의 응답성을 향상시킬 수 있습니다.

우수한 사용자 환경을 제공하기 위해 Google은 100밀리초 미만의 FID를 목표로 할 것을 권장합니다 .이렇게 하면 사용자가 처음 상호 작용할 때 웹 페이지가 빠르고 반응적으로 느껴집니다.

FID(첫 번째 입력 지연) 임계값

다행히대부분의 웹사이트는 95.7%가 좋은 점수를 받아 FID를 통과하기 쉽습니다 .

누적 레이아웃 이동(CLS)

CLS(Cumulative Layout Shift)는 웹 페이지의 시각적 안정성을 측정합니다. 브라우징 경험 중에 발생하는 예기치 않은 레이아웃 변화의 양을 정량화합니다. 레이아웃 이동은 표시되는 요소가 렌더링된 프레임 사이에서 위치를 변경하여 콘텐츠가 페이지에서 "이동"할 때 발생합니다.

몇 가지 요소는 종종 예기치 않은 레이아웃 변경을 유발하고 CLS 점수를 악화시킬 수 있습니다.

  • 치수가 없는 이미지 및 동영상(너비 및 높이 속성)
  • 예약된 공간이 없는 광고, 삽입 및 iFrame
  • 스타일이 지정되지 않았거나 보이지 않는 텍스트가 깜박이는 웹 글꼴 - FOUT 및 FOIT
  • 기존 콘텐츠 위에 콘텐츠 삽입

좋은 CLS 점수는 0.1 이하로 예상치 못한 변화가 최소화되었음을 나타냅니다.이보다 높은 점수는 페이지에 시각적 불안정을 유발하는 요소가 있을 수 있으므로 조사하고 해결해야 함을 나타냅니다.

CLS(누적 레이아웃 이동) 임계값

2024년 핵심 성능 보고서: FID의 퇴장

2020년에 처음 발표된 이후 Core Web Vitals에 대해 확실한 한 가지가 있다면 시간이 지남에 따라 진화할 것이라는 점입니다.

"웹 바이탈 및 코어 웹 바이탈은 오늘날 개발자가 웹에서 경험의 품질을 측정하기 위해 사용할 수 있는 최상의 신호를 나타내지만 이러한 신호는 완벽하지 않으며 향후 개선 또는 추가가 예상되어야 합니다."

2022년을 앞두고 Google은 FID를 대체할 것으로 예상되는 INP(Interaction to Next Paint)라는 실험 측정항목을 작업 중이라고 발표했습니다.

효능에 대한 수많은 테스트를 거친 후 INP는 올해 초 공식적으로 " 보류 중" 상태로 전환되었습니다.

하지만 우리가 어떻게 여기까지 왔는지 보자…

다음 페인트에 대한 상호 작용과 첫 번째 입력 지연의 차이점은 무엇입니까?

Interaction to Next Paint와 First Input Delay의 차이는 측정 범위에 있습니다. FID는 첫 번째 상호 작용의 반응성을 측정하는 반면 INP는 사용자의 전체 세션에서 모든 상호 작용을 평가합니다.

간단히 말해서 좋은 FID 점수는 좋은 첫인상을 나타냅니다. 그러나 INP는 페이지가 로드되기 시작할 때부터 사용자가 페이지를 종료할 때까지의 사용자 경험을 캡처하여 더 깊이 파고듭니다.

전문 용어:

FID는 첫 번째 상호작용의 입력 지연만 측정하며 이벤트 핸들러를 실행하는 데 걸리는 시간이나 다음 프레임 표시 지연은 측정하지 않습니다.

다음 페인트에 대한 상호 작용이 응답성을 측정하는 방법

반면에 INP는 다음을 포함한 전체 스펙트럼을 측정합니다.

  • 입력 지연 - 페이지와 사용자의 첫 번째 상호 작용과 이벤트 핸들러가 실행될 때 사이의 시간
  • 처리 지연 - 연결된 이벤트 핸들러에서 코드를 실행하는 데 걸리는 총 시간입니다.
  • 프리젠테이션 지연 - 이벤트 핸들러가 실행을 완료한 시점과 브라우저가 다음 프레임을 제시하는 시점 사이의 시간입니다.

그런 다음 상호 작용 내에서 지속 시간이 가장 긴 이벤트가 상호 작용의 대기 시간으로 선택됩니다.

이러한 구현 세부 정보를 통해 INP는 FID보다 훨씬 더 포괄적인 사용자 인식 응답성 척도가 됩니다.

이제 예정된 변경 사항을 고려하여 향후 사이트의 핵심 성능 보고서의 성공을 보장할 수 있는 방법을 살펴보겠습니다.

웹 사이트의 미래를 보장하는 최고의 핵심 웹 바이탈 사례

LCP 최적화 전략

LCP 점수에 영향을 미치는 주요 원인은 다음과 같습니다.

  • 느린 서버 응답 시간
  • 무겁고 최적화되지 않은 리소스(예: 이미지, 글꼴 및 기타 중요한 자산)
  • 렌더링 차단 JavaScript 및 CSS

다음 최적화 전략을 사용하여 가능한 문제를 수정하고 LCP를 강화하십시오.

  1. 이미지 압축 적용
  2. 이미지를 차세대 형식(예: WebP)으로 변환
  3. 링크 rel=preload를 사용하여 LCP 요소 로드의 우선 순위 지정
  4. 코드 파일 축소 및 압축
  5. 중요한 CSS 구현
  6. 렌더링 차단 리소스 제거
  7. 서버 인프라 업그레이드
  8. 콘텐츠 전송 네트워크(CDN) 사용
  9. 캐싱을 최대한 활용

CLS 최적화 전략

이미 언급했듯이 주요 CLS 범인은 다음과 같습니다.

  • 치수가 없는 이미지 및 동영상(너비 및 높이 속성)
  • 예약된 공간이 없는 광고, 삽입 및 iFrame
  • 스타일이 지정되지 않았거나 보이지 않는 텍스트가 깜박이는 웹 글꼴 - FOUT 및 FOIT
  • 기존 콘텐츠 위에 콘텐츠 삽입

모두 처리하는 방법은 다음과 같습니다.

  1. 기존 콘텐츠 위에 페이지 상단에 새 콘텐츠를 삽입하지 마세요.
  2. 레이아웃 이동을 방지하기 위해 너비 및 높이 속성을 추가합니다.
  3. 광고, 내장 및 iFrame을 로드하려는 경우 충분한 공간을 확보하십시오.
  4. @font-face CSS에서 font-display: 옵션을 사용하여 글꼴 렌더링 동작을 제어합니다.
  5. rel=preload 주요 웹 글꼴을 연결하여 최대한 빨리 사용할 수 있도록 합니다.

FID 최적화 전략

FID는 12개월도 안 되어 쓸모 없게 되고 대부분의 웹사이트에서 쉽게 최적화할 수 있지만 무엇이 최적이 아닌 점수로 이어질 수 있는지 아는 것은 여전히 ​​중요합니다.

  • 메인 스레드를 차단하는 긴 작업을 유발하는 과도한 JavaScript 실행
  • 최적화되지 않은 JavaScirpt 및 CSS 파일
  • 웹 작업자를 활용하지 않음
  • 무거운 타사 스크립트로 사이트 부풀리기

FID를 최적화하려면 다음을 수행해야 합니다.

  1. 중요하지 않은 타사 스크립트 지연 또는 제거
  2. 웹 작업자를 사용하여 기본 스레드에 영향을 주지 않고 백그라운드에서 스크립트 실행
  3. 코드 압축 및 축소 적용
  4. 사용하지 않는 CSS 줄이기

INP 최적화 전략

INP가 FID를 기반으로 한다는 점을 고려하면 현재 응답성 지표와 주범이 겹칠 것으로 예상됩니다. INP 불량의 원인은 다음과 같습니다.

  • 긴 작업으로 메인 스레드 부풀리기
  • DOM 크기가 큰 경우
  • 클라이언트 측 렌더링 HTML

좋은 INP 점수와 응답성을 보장하려면 다음 최적화를 사용하십시오.

  1. 메인 스레드를 과도하게 사용하는 반복 타이머를 피하십시오.
  2. 긴 작업을 나누어 메인 스레드를 확보하십시오.
  3. 상호작용 중복 방지
  4. 불필요한 콜백 제거 고려
  5. 비렌더링 작업 연기
  6. DOM 크기 줄이기
  7. requestAnimationFrame 콜백에서 과도하거나 불필요한 작업을 피하십시오.
  8. ResizeObserver 콜백 연기

마무리

Core Web Vitals가 앞으로 몇 년 동안 중요한 역할을 할 것이라고 해도 무방합니다.

2020년 이후 Google의 조치는 사용자 경험에 점점 더 많은 관심을 기울이고 좋은 서비스를 제공할 수 있는 웹사이트를 강화할 것임을 강력하게 시사합니다.

그럼에도 불구하고 낮은 콘텐츠 품질을 대가로 우수한 Core Web Vitals를 달성하는 것은 실패할 수밖에 없는 전략이라는 점을 기억하는 것이 중요합니다. Google의 임무는 검색 쿼리에 최대한 응답할 수 있는 SERP를 구축하는 것입니다.

따라서 고품질의 유용한 콘텐츠를 지속적으로 게시하고 우수한 사용자 경험으로 레벨을 올리십시오.

이것이 Google과 사용자 모두가 좋아하는 웹사이트를 만드는 공식입니다.

매력적인 콘텐츠를 만드는 것은 귀하의 책임이지만 사이트의 웹 성능 및 핵심 성능 보고서를 쉽게 관리할 수 있습니다.

NitroPack을 설치하기만 하면 LCP, CLS, FID 및 INP 점수가 자동으로 높아집니다.

무료로 NitroPack 테스트하기 →