기본 콘텐츠로 건너뛰기
대시보드로 이동
어떻게 시작해야 할지 막막하세요? 짧은 퀴즈를 풀면 맞춤 추천이 제공됩니다.
강의 5개 중 3번째
코어 웹 바이탈을 통해 방문자 참여 유지하기
5분 완료를 위해

코어 웹 바이탈을 통해 방문자 참여 유지하기

webdev

뉴스 사이트에서 양질의 사용자 경험 구축하기

webdev

코어 웹 바이탈이란 무엇인가요?

GNI_Data_Presentation (1)

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

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

코어 웹 바이탈의 중점 영역

  • 로드 중
  • 상호작용
  • 시각적 안정성
GNI_Data_Presentation (1)

코어 웹 바이탈 측정 시작하기

GNI_Data_Analytics

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

  • PageSpeed Insights는 모바일과 데스크톱 기기 모두에서 페이지의 사용자 경험을 측정하고 보고하며, 페이지 개선 방법에 관한 제안사항을 제공해 줍니다.

  • Search Console은 사용자가 사이트를 이용하는 방식을 바탕으로 페이지가 코어 웹 바이탈을 충족하는 방식을 측정하고 보고합니다.

  • 웹 바이탈 Chrome 확장 프로그램은 모든 페이지의 코어 웹 바이탈 실적을 실시간으로 측정해 보고하므로 개발자에게 가장 적합합니다.

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

GNI_Data_Analytics

로드 중

GNI_Audience_engagement_Blank

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

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

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

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

💡권장사항

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

상호작용

screenshot-2023-02-23-at-54241-pm

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

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

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

💡권장사항

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

시각적 안정성

blue-data-screen

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

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

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

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

💡권장사항

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

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

blue-data-screen
이 강의가 얼마나 만족스러우셨나요?
의견을 보내주시면 Google 뉴스 이니셔티브 강의를 지속적으로 개선하는 데 도움이 됩니다.
강의를 완료하려면 이 질문에 답하세요.
코어 웹 바이탈은 어디에 초점을 맞추나요?
제출
checklist (8)
퀴즈 완료
축하합니다. 수강을 완료하셨습니다 Keep visitors engaged with Core Web Vitals
강의 내용을 검토하고 다시 도전해 보세요
예, 진행 중입니다
추천 서비스
페이지를 나가고 진행 상황 삭제하기
이 페이지를 나가면 현재 듣는 강의의 진행 상황이 모두 삭제됩니다. 그대로 나가고 진행 상황을 삭제하시겠습니까?