코어 웹 바이탈의 정의와 중요한 이유 그리고 개선하는 방법

 

 

 

코어 웹 바이탈(Core Web Vitals)

어느 날 갑자기 서치 콘솔의 코어 웹 바이탈에 문제가 생겼다고 나왔습니다.

개선 필요라는 항목에 39개의 URL이 영향을 받았다는 내용이었습니다.

뭘 잘못한 건지 무척이나 당황스러웠습니다.

생각해 보니 며칠 전에 블로그의 스킨을 변경했던 것이 기억이 났습니다. 아마도 원인은 스킨변경 때문이 아닐까 생각됩니다. 그런데 코어 웹 바이탈이란 것을 전혀 모르기에 대처법 역시 알지 못한다는 것이었습니다.

오늘은 코어 웹 바이탈이 무엇이고, 페이지 성능의 중요한 이유와 이에 대한 페이지의 성능을 개선하는 방법에 대해 이야기해 보겠습니다.

코어웹바이탈 개선필요

코어웹 바이탈 개선필요

URL이 문제가 있는 이유

CLS문제

코어 웹 바이탈(Core Web Vitals)이란?

구글 서치 콘솔의 코어 웹 바이탈(Core Web Vitals)은 웹 페이지의 사용자 경험을 측정하는 지표 중 하나입니다. 이는 웹 페이지의 로딩 시간, 상호 작용 가능한 여부, 레이아웃의 안정성을 평가하여 사용자가 웹 페이지를 얼마나 효과적으로 이용할 수 있는지를 나타냅니다.

세 가지 주요 지표는 Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS)입니다. 이 지표들을 최적화하여 웹 페이지의 성능을 향상하는 것이 중요합니다.

 

코어 웹 바이탈은 사용자 경험을 평가하는 세 가지 주요 지표로 구성되어 있습니다.

1. Largest Contentful Paint (LCP): 이는 사용자가 웹 페이지의 주요 콘텐츠 중 가장 큰 요소를 볼 때까지 걸리는 시간을 측정합니다. 빠른 LCP는 페이지가 빠르게 로딩되어 사용자가 중요한 콘텐츠에 빠르게 액세스 할 수 있도록 합니다.

2. First Input Delay (FID): FID는 사용자가 페이지와 상호 작용하려고 할 때 브라우저가 응답하는 데 걸리는 시간을 측정합니다. 짧은 FID는 사용자가 웹 페이지와 즉각적으로 상호 작용할 수 있도록 합니다.

3. Cumulative Layout Shift (CLS): 이는 웹 페이지의 레이아웃 안정성을 나타냅니다. 페이지가 로딩되는 동안 요소들이 얼마나 불안정하게 이동하는지를 측정합니다. 낮은 CLS는 사용자가 예기치 않게 클릭이나 스크롤을 하는 동안 페이지 레이아웃이 변하는 것을 최소화합니다.

4. Input Timing (INP): 2024년 3월에 Core Web Vitals의 일환으로 FID가 INP로 대체됩니다. INP는 사용자 입력에 대한 웹페이지의 반응 시간을 측정하는 지표입니다. 이는 사용자가 웹페이지와 상호 작용할 때 브라우저가 얼마나 빠르게 응답하는지를 나타내며, 주로 '측정된 시간 내에 사용자 입력에 대한 응답'이라는 관점에서 평가됩니다.

사용자 경험을 향상하기 위해 이 지표를 최적화하는 것이 중요합니다. 이 지표를 최적화하여 웹 페이지의 성능을 향상하면 사용자들이 페이지를 빠르게 로딩하고 쉽게 상호 작용할 수 있게 됩니다.

 

 

 

페이지 성능이 중요한 이유

연구에 따르면 Core Web Vital이 향상되면 사용자 참여와 비즈니스 지표가 향상되는 것으로 나타났습니다.

예를 들어:

①연구에 따르면 사이트가 핵심 웹 바이탈 기준을 충족하면 사용자가 페이지 로드를 포기할 가능성이 24% 더 낮은 것으로 나타났습니다.

②LCP(Largest Contentful Paint)가 100ms 감소할 때마다 Farfetch의 웹 전환율은 1.3% 증가했습니다.

③CLS(누적 레이아웃 변경)를 0.2로 줄이는 Yahoo! JAPAN에서는 세션당 페이지 조회수가 15% 증가하고 세션 시간이 13% 길어졌으며 이탈률이 1.72% 포인트 감소했습니다.

④Netzwelt는 핵심 웹 바이탈을 개선하여 광고 수익이 18%, 페이지 조회수가 27% 증가했습니다.

⑤CLS를 1.65에서 0으로 줄이면 redBus의 전 세계 도메인 순위가 크게 향상됩니다.

 

그룹 상태: 나쁨, 개선 필요, 좋음

나쁨 , 개선 필요 및 좋음 라벨은 해당 특정 장치 유형의 URL 그룹에 적용됩니다. LCP 및 CLS 모두에 대한 임계값 데이터가 없는 URL 그룹은 보고서에 표시되지 않습니다. 예를 들어 URL에 LCP에 대한 임계값 데이터만 있고 CLS가 없는 경우 표시되지 않습니다.

URL 그룹의 상태는 기본적으로 해당 장치 유형에 할당된 가장 느린 상태로 설정됩니다.

예를 들어,

 - CLS가 불량하지만 LCP 개선이 필요한 모바일 URL은 모바일에서 불량으로 표시됩니다.

 - 모바일의 URL에는 LCP 개선 필요가 있지만 Good CLS 라벨이 모바일에서 개선 필요로 표시되어 있습니다.

 - 모바일에서 FID, LCP, INP, CLS가 양호하고 데스크톱에서 FID, LCP, INP, CLS가 양호한 URL은 모바일에서는 양호하고 데스크톱에서는 개선이 필요합니다.

 

상태 정의

각 상태에 대한 성과 범위는 다음과 같습니다.

	좋은	개선이 필요함	가난한(느림)
LCP	<=2.5초	<=4초	>4초
FID	<=100ms	<=300ms	>300ms
INP	<=200ms	<=500ms	>500ms
CLS	<=0.1	<=0.25	>0.25

 

페이지의 성능을 개선하는 방법

1. 이미지 최적화: 이미지를 압축하고 최적화하여 로딩 시간을 단축합니다.

2. 브라우저 캐싱 활용: 정적 자산들을 브라우저에 캐싱하여 반복된 방문자가 자원을 다시 다운로드하지 않도록 합니다.

3. CSS 및 JavaScript 최적화: 불필요한 CSS 및 JavaScript 코드를 제거하거나 최소화하여 페이지 로딩을 빠르게 만듭니다.

4. 서버 응답 시간 최적화: 서버 응답 시간을 줄이기 위해 서버 성능을 향상하거나 CDN(Content Delivery Network)을 사용합니다.

5. 비동기 로딩 사용: 페이지가 로드될 때 필요한 자원들을 비동기적으로 로딩하여 초기 페이지 로딩을 최적화합니다.

6. 레이지 로딩 적용: 페이지 스크롤 시에 필요한 이미지 등을 레이지 로딩을 통해 지연 로딩하여 초기 페이지 로딩 시간을 단축합니다.

7. 캐시 정책 설정: 정적 파일에 대한 적절한 캐시 정책을 설정하여 브라우저에서 자주 변경되지 않는 자원을 재사용할 수 있도록 합니다.

8. 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 사용: SSR 또는 SSG를 통해 초기 로딩 성능을 향상할 수 있습니다.

이러한 최적화 작업을 통해 웹 페이지의 성능을 향상하고, 따라서 코어 웹 바이탈의 지표를 개선할 수 있습니다.

 

이렇게 코어 웹 바이탈에 대해 알아보았는데요, 페이지의 성능이라는 것이 방문자들에게 많은 영향을 끼친다는 것을 알게 되었습니다. 아직 낯설고 모르는 것이 많은 서치콘솔이지만 앞으로 하나씩 배우고 알아가면서 알게 되는 새로운 정보들을 함께 공유하겠습니다.

핵심 웹 바이탈 보고서 페이지 바로가기

Core Web Vitals report - Search Console Help