Core Web Vitals (웹 핵심 성능 지표)

1. Web Vitals?

Web Vitals는 웹에서 우수한 사용자 환경을 제공하기 위해 필수적인 품질 지표들의 통합 가이드를 제공하기 위한 Google의 이니셔티브(전략, 계획)입니다.

Google의 검색 엔진은 다양한 웹 사이트의 성능을 측정하여, 이를 검색 엔진 순위 시스템에 반영합니다. 만약 성능을 측정하는 표준이 없으면, Google의 검색 엔진은 어떤 웹 사이트가 우수한 성능을 가지고 있는지 파악하기 어렵고, 개발자 또한 자신의 웹 사이트의 성능을 검색 엔진에 제공하기 어려워집니다. Web Vitals는 이러한 문제를 해결하기 위해, 개발자가 웹사이트의 성능을 체계적으로 측정하고 개선할 수 있도록 명확한 기준을 제시합니다. 이를 통해 웹사이트의 사용자 경험을 최적화할 수 있으며, 구글 검색 엔진이 성능을 정확하게 평가해 검색 순위에 반영할 수 있습니다. 결과적으로 Web Vitals는 웹사이트 성능 개선과 SEO 향상에 중요한 역할을 합니다.

 

간단히 말해 Web Vitals는

웹의 UX 성능을 측정하고, 측정된 지수를 최적화하기 편리하게 구글에서 제공하는 통합 가이드

라고 정의할 수 있습니다.

 

2. Core Web Vitals?

Web Vitals는 여러 가지 지표를 가지고 있는데, Core Web Vitals는 Web Vitals의 하위 집합으로 가장 핵심적인 성능 지표 세 가지를 말합니다.

 

1. LCP (Largest Contentful Paint, 최대 콘텐츠 페인트)

LCP는 사용자가 처음 페이지로 이동했을 때를 기준으로 표시 영역에 표시되는 가장 큰 이미지, 텍스트 블록, 동영상의 렌더링 시간을 보고합니다. 사용자가 페이지의 주요 콘텐츠를 볼 수 있을 때까지 걸리는 시간을 평가하는 지표로, 페이지 로딩 속도를 판단하는 데 중요한 기준입니다.

만족스러운 사용자 환경을 제공하기 위해 사이트의 LCP는 2.5초 이하가 되도록 노력해야 합니다.

 

LCP 최적화

LCP는 페이지에 표시 될 가장 큰 리소스 덩어리이기 때문에 최적화하는 법은 직관적입니다.

 

1. 리소스 로드 지연 해결: LCP 리소스가 최대한 빨리 로드되도록 합니다. 일반적으로 LCP 리소스는 해당 페이지에서 로드하는 첫 번째 리소스와 동시에 로드되기 시작해야 합니다. 달리 말하면, LCP 리소스가 첫 번째 리로스 보다 늦게 로드되기 시작하면 개선의 여지가 있습니다.

 

2. 리소스 로드 시간 단축: 사용자 기기로 리소스 바이트를 전송하는 데 소요되는 시간을 줄입니다. 

• 리소스 크기 줄이기: 이미지 크기를 최적화, 최신 이미지 형식 사용, 이미지 압축, 웹 글꼴 크기 줄이기
• 리소스가 이동해야 하는 거리 줄이기: 서버를 가능한 지리적으로 가깝게 배치, CDN 사용

 

2. INP (Interaction to Next Paint, 다음 페인트에 대한 상호작용)

 

INP는 사용자가 페이지에서 상호작용(예: 클릭, 터치, 키보드 입력등)을 시도한 후, 페이지가 해당 상호작용을 처리하고, 시각적 피드백을 주는 데 걸리는 시간을 측정하는 지표입니다. 기존의 FID가 첫 번째 상호작용의 지연 시간만을 측정하는 데 반해, INP는 페이지의 로딩 이후에도 발생하는 모든 상호작용을 고려하여 더 정확한 상호작용 성능을 측정합니다

만족스러운 사용자 환경을 제공하기 위해서는 INP는 0.2초 이하가 되도록 노력해야 합니다.

 

INP 최적화

1. 입력 지연 식별 및 줄이기: 사용자가 페이지와 상호작용할 때 해당 상호작용의 첫 번째 부분은 입력 지연입니다. 페이지의 다른 활동에 따라 입력으로 인한 지연이 상당히 길어질 수 있습니다. 이는 기본 스레드에서 발생하는 활동(스크립트 로드, 파싱, 컴파일), 가져오기 처리, 타이머 함수 또는 빠르게 연속해서 서로 겹치는 다른 상호작용으로 인해 발생할 수 있습니다.

 

2. 이벤트 콜백 최적화: 입력 지연은 INP에서 측정하는 항목의 첫 번째 부분일 뿐입니다. 이어서, 사용자 상호작용에 대한 응답으로 이벤트 콜백이 최대한 빨리 완료될 수 있도록 해야 합니다.

• 기본 스레드에 자주 양보: 하나의 이벤트 콜백의 작업을 여러 가지 별도의 작업으로 나누어 보는 것이 좋습니다. 이렇게 하면 리소스가 큰 작업이 기본 스레드를 차단하는 긴 작업이 되는 것을 방지하므로 기본 스레드에서 대기 중인 다른 상호작용이 더 빨리 실행될 수 있습니다.
• 렌더링 작업이 더 빨리 발생하도록 양보: 렌더링에 필요하지 않은 작업 로직은 시각적 업데이트를 적용한 이후에 동작하도록 이벤트 콜백을 분리합니다. 이렇게 하면 콜백을 가볍고 민첩하게 유지할 수 있으며, 렌더링 시간도 개선됩니다. 

3. 레이아웃 스래싱 피하기: 레이아웃 스래싱이란 웹 페이지의 DOM 업데이트와 스타일 변경이 반복되면서 브라우저가 과도하게 레이아웃 재계산과 리페인트를 수행하는 현상입니다. 이 현상은 성능 저하를 유발하며, 페이지가 느리게 반응하게 만듭니다. 

 

4. 표시 지연 최소화: 상호작용 이후 시각적 변화가 나타나는 시간을 줄이기 위해 DOM  크기를 최소화하고, DOM이 크면 렌더링 비용이 커져 응답성이 저하될 수 있습니다.

• content-visibillity: CSS 속성을 사용해 화면 밖의 요소를 지연 렌더링하면 성능을 개선할 수 있습니다.
• JavaScript 성능 관리: JS로 많은 HTML을 렌더링하면 성능 저하가 발생할 수 있으므로 주의해야 합니다.

 

 

3. CLS (Cumlative Layout Shift, 레이아웃 변경 횟수)

CLS는 웹페이지의 시각적 안정성을 측정하는 지수입니다. 사용자가 페이지를 보는 동안 예기치 않게 요소들이 이동하거나 재배치되는 빈도를 측정합니다. 예를 들어, 이미지를 불러오는 도중 버튼이 이동하거나 텍스트가 갑작스럽게 재배치되면 사용자가 불편함을 느낄 수 있습니다. CLS는 이러한 불안정한 움직임을 최소화하는 것이 목표입니다.

 

일반적으로 리소스가 비동기식으로 로드되거나 DOM 요소가 기존 컨텐츠보다 먼저 페이지에 동적으로 추가되는 경우 페이지 콘텐츠가 예기치 않게 이동합니다. 레이아웃 변경의 원인으로는 크기를 알 수 없는 이미지나 동영상, 초기 대체 값보다 크거나 작게 렌더링되는 글꼴, 자동으로 크기가 조절되는 서드 파티 광고 또는 위젯이 될 수 있습니다.

 

만족스러운 사용자 환경을 위해서 CLS는 0.1 이하가 되도록 노력해야 합니다.

 

CLS 최적화

1. 이미지 및 비디오 크기 명시: 크기 속성을 하드하게 지정하여 로드 중 요소 이동을 방지합니다.

 

2. 동적 콘텐츠 공간 예약: 광고, 팝업과 같은 서드 파티 위젯이 동적으로 추가되는 콘텐츠에 미리 자리를 확보합니다.

 

3. 웹 폰트 최적화: 플래시 오브 언스타일드 텍스트, 웹 페이지가 로드되는 동안 웹 폰트가 로드되지 않아, 기본 시스템 폰트로 텍스트가 먼저 표시되었다가 나중에 웹 폰트로 바뀌는 현상을 말합니다. 이 현상을 방지하기 위해 웹 폰트 로드 전략을 최적화해야 합니다.

 

4. 애니메이션 및 전환 최적화: transform과 opacity를 사용하여 레이아웃이 변경되지 않는 애니메이션을 적용합니다.

 

---

 

이제까지 설명한 LCP, INP, CLS와 같은 지수들은 웹 성능을 개선하고 사용자 경험을 최적화하는 데 중요한 지표들입니다. 이 외에도 FCP(First Contentful Paint), TTFB(Time to First Byte), TBT(Total Blocking Time), Speed Index와 같은 다양한 성능 지표들이 있습니다. 이러한 지표들을 종합적으로 고려해 웹 성능을 최적화하면, 페이지 로딩 속도와 반응성이 개선되고, 결과적으로 사용자 만족도와 SEO 순위가 향상될 수 있습니다.