코어 웹 바이탈: 속도 및 사용자 경험 개선

과거에 "속도"는 모호한 개념이었습니다. 사이트가 빨리 로드되었나요? 오늘날 Google은 사용자에게 "빠르고" "부드러운" 느낌이 정확히 무엇인지 정량화했습니다. 이러한 지표를 코어 웹 바이탈(Core Web Vitals - CWV)이라고 합니다.

순위 신호가 된 이후, CWV는 초점을 원시 서버 속도에서 인지된 사용자 경험으로 전환했습니다. 코드가 얼마나 빨리 로드되는지가 중요한 것이 아닙니다. 사용자가 실제로 페이지를 얼마나 빨리 사용할 수 있는지가 중요합니다.

세 가지 구체적인 지표가 코어 웹 바이탈을 구성합니다. 평가를 통과하려면 페이지가 세 가지 모두에서 "좋음" 점수를 받아야 합니다.

1. LCP (Largest Contentful Paint) – 로딩 성능

"주요 콘텐츠가 얼마나 빨리 나타납니까?"

LCP는 가장 큰 가시적 요소(일반적으로 히어로 이미지, 비디오 또는 주요 헤드라인)가 완전히 로드되어 화면에 나타나는 데 걸리는 시간을 측정합니다. 사용자에게 "이 페이지가 실제로 작동하고 있다"는 것을 알려줍니다.

임계값

• 좋음: ≤ 2.5초
• 개선 필요: ≤ 4.0초
• 나쁨: > 4.0초

나쁜 LCP의 일반적인 원인

• 느린 서버 응답 시간: 호스팅이 저렴하거나 과부하가 걸리면 브라우저가 데이터를 받는 데 너무 오래 기다립니다.
• 리소스 로드 지연: 히어로 이미지가 최적화되지 않았거나 지연 로딩(lazy-loading)을 통해 로드됩니다(상단 이미지에는 피해야 함).
• 렌더링 차단 JavaScript: 브라우저가 스크립트 파일을 읽기 위해 페이지 구축을 일시 중지합니다.

개선 방법

• 이미지 최적화: 이미지를 압축(WebP 형식)하고 히어로 이미지가 지연 로드되지 않도록 하세요.
• CDN 사용: 콘텐츠 전송 네트워크(CDN)는 물리적으로 사용자에게 더 가까운 서버에서 이미지를 제공합니다.

2. INP (Interaction to Next Paint) – 상호작용성

"클릭할 때 페이지가 멈추나요?"

참고: INP는 2024년 3월에 핵심 지표로서 First Input Delay(FID)를 공식적으로 대체했습니다.

INP는 사용자가 페이지를 방문하는 동안 수행하는 모든 상호작용(클릭, 탭, 키 누름)의 지연 시간을 관찰합니다. 사용자의 행동과 브라우저가 결과를 보여주는 다음 프레임을 그릴 수 있는 능력(예: 메뉴 열기 또는 아코디언 확장) 사이의 시간을 측정합니다.

임계값

• 좋음: ≤ 200밀리초
• 개선 필요: ≤ 500밀리초
• 나쁨: > 500밀리초

나쁜 INP의 일반적인 원인

• 무거운 JavaScript 실행: 브라우저의 "메인 스레드"가 사용자의 클릭에 응답하기 위해 코드를 처리하느라 너무 바쁩니다.
• 복잡한 레이아웃: 상호작용 후 브라우저가 페이지를 다시 그리는 데 너무 오래 걸립니다.

개선 방법

• 긴 작업 분할: 개발자는 브라우저가 숨을 쉴 수 있도록 큰 JavaScript 덩어리를 더 작은 조각으로 나눌 수 있습니다.
• 이벤트 핸들러 최적화: 클릭으로 트리거되는 코드가 가볍고 빠른지 확인하세요.

3. CLS (Cumulative Layout Shift) – 시각적 안정성

"콘텐츠가 예기치 않게 점프하나요?"

우리 모두 경험해 보았습니다. 버튼을 클릭하려는데 갑자기 광고가 그 위에 로드되어 콘텐츠를 아래로 밀어내고 실수로 잘못된 것을 클릭하게 됩니다. 이것이 레이아웃 이동입니다. CLS는 페이지 수명 동안 발생하는 모든 예기치 않은 레이아웃 이동의 합계를 측정합니다.

임계값

• 좋음: ≤ 0.1
• 개선 필요: ≤ 0.25
• 나쁨: > 0.25

나쁜 CLS의 일반적인 원인

• 치수가 없는 이미지: 브라우저에 width="800" 및 height="600"을 알려주지 않으면 공간을 얼마나 예약해야 할지 모릅니다.
• 광고 및 임베드: 동적으로 크기가 조정되는 광고 배너는 종종 콘텐츠를 아래로 밀어냅니다.
• 웹 폰트: 때때로 사용자 정의 폰트가 다운로드될 때까지(FOIT) 또는 스타일이 바뀔 때까지(FOUT) 텍스트가 숨겨져 줄 높이가 변경될 수 있습니다.

개선 방법

• 치수 설정: 이미지 및 비디오 요소에 항상 너비와 높이 속성을 포함하세요.
• 공간 예약: 동적 광고 슬롯이 있는 경우 광고가 로드될 때 콘텐츠가 이동하지 않도록 CSS에서 특정 박스 크기를 예약하세요.

요약 표: 한눈에 보는 지표

점수 측정 방법

추측할 필요가 없습니다. Google은 이러한 표준에 대해 사이트를 테스트할 수 있는 무료 도구를 제공합니다.

• PageSpeed Insights: 빠른 스냅샷을 위한 최고의 도구입니다. "실험실 데이터"(시뮬레이션)와 "현장 데이터"(실제 사용자 데이터)를 모두 제공합니다.
• Google Search Console: "코어 웹 바이탈" 보고서는 사이트의 어떤 URL이 실패했는지 보여주고 문제 유형별로 그룹화합니다.
• Lighthouse: 로컬 테스트를 위해 Chrome 브라우저에 내장된 개발자 도구(마우스 오른쪽 버튼 클릭 > 검사 > Lighthouse)입니다.