웹 바이탈은 웹에서 훌륭한 사용자 경험을 조성하는 데 필수적인 요소를 통합적으로 안내해 주는 Google의 이니셔티브입니다.

코어 웹 바이탈은 웹 바이탈의 세 가지 측정항목을 가리킵니다. 연구에 따르면 사이트가 코어 웹 바이탈을 충족할 경우 사용자가 페이지를 떠날 가능성이 24% 감소한다고 합니다.

코어 웹 바이탈의 중점 영역

• 로드 중
• 상호작용
• 시각적 안정성

코어 웹 바이탈을 개선하는 첫 걸음은 데이터 수집입니다.

• PageSpeed Insights는 모바일과 데스크톱 기기 모두에서 페이지의 사용자 경험을 측정하고 보고하며, 페이지 개선 방법에 관한 제안사항을 제공해 줍니다.
  
  
• Search Console은 사용자가 사이트를 이용하는 방식을 바탕으로 페이지가 코어 웹 바이탈을 충족하는 방식을 측정하고 보고합니다.
  
  
• 웹 바이탈 Chrome 확장 프로그램은 모든 페이지의 코어 웹 바이탈 실적을 실시간으로 측정해 보고하므로 개발자에게 가장 적합합니다.

💡권장사항: 이러한 도구가 제안하는 내용을 개발자와 공유하세요.

로드 시간이 빠르면 사용자는 페이지가 유용하다고 안심하게 됩니다.

• 로드에 3초 이상 걸릴 경우 사용자의 50%가 사이트를 떠납니다
• 47%는 웹페이지가 2초 이내에 로드되길 바랍니다
• 52%는 브랜드 충성도에 로드 시간이 영향을 미친다고 응답했습니다

로딩은 최대 콘텐츠 렌더링 시간(LCP)으로 측정하며, 이는 최대 이미지 또는 텍스트 블록이 표시되는 데 걸리는 시간을 의미합니다.

코어 웹 바이탈을 충족하려면 페이지의 75%가 2.5초 이내에 로드되어야 합니다.

💡권장사항

• 지연 로드 사용 설정하기
• 대용량 GIF 대신 동영상 사용하기
• 사용하지 않는 코드 삭제하기

로딩이 사이트가 콘텐츠를 표시하는 속도를 측정한다면 상호작용은 사용자가 기사를 선택하거나 다른 동작을 수행하려고 할 때 사이트가 어떻게 반응하는지를 측정합니다.

상호작용은 최초 입력 반응 시간(FID)으로 측정되며, 이는 사용자가 링크 또는 버튼을 클릭한 시점부터 사이트가 해당 동작을 처리하기 시작하는 시점까지 걸리는 시간을 의미합니다.

코어 웹 바이탈을 충족하려면 페이지의 75%가 0.1초 이내에 클릭 처리를 시작해야 합니다.

💡권장사항

• 코드를 더 작은 작업을 나눠주는 지연 로드 사용 설정하기
• 페이지에 필요한 코드 먼저 로드하기
• 데이터를 가져오는 코드 줄이기

기사를 읽기 시작했는데 문장을 마치기 전에 텍스트가 움직여서 읽던 내용을 놓친 적이 있나요?

대부분의 경우 짜증이 날 뿐이지만 때로는 실질적인 피해를 유발할 수도 있습니다.

시각적 안정성은 레이아웃 변경 횟수(CLS)로 측정되며, 한 번에 이루어지는 콘텐츠 변동의 최대 횟수를 의미합니다.

코어 웹 바이탈을 충족하려면 페이지의 75%가 0.1점 미만을 기록해야 합니다.

💡권장사항

• 이미지 및 동영상의 가로세로 비율 또는 크기 설정하기
• 이전 광고를 기준으로 가장 적절한 광고 크기 선택하기

페이지의 최상단에 광고 표시 자제하기