[Next.js] Web vitals와 성능 측정 도구에 대해 알아보자

Web Vitals

구글은 어떻게 페이지의 품질을 평가할까요? SEO 전략을 세우는 데 중요한 구글의 품질 평가 요소 중 한 축을 담당하는 코어 웹 바이탈에 대해 알아보려고 합니다.

 

Core Web Vitals

코어 웹 바이탈(Core Web Vitals)은 웹 페이지 로딩 속도, 모바일 친화성, 세이프 브라우징, 암호화(HTTPS 적용 여부), 방해요소 여부 등과 같은 웹 콘텐츠 이용자의 사용 경험에 영향을 미치는 다양한 측정 가능한 값들 중에서 구글이 중요하다 강조하는 아래의 3가지 매트릭스는 다음과 같습니다.

웹 바이탈의 3가지 핵심 매트릭스

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

• 사용자가 화면에 렌더링된 콘텐츠를 보는데 걸리는 시간
• LCP는 웹 페이지의 로딩 속도에 대한 지표
• 웹사이트가 사용자에게 화면에서 완전하고 상호작용할 준비가 된 가장 큰 콘텐츠를 표시하는 데 걸리는 시간을 측정
• 다음과 같이 사용자 경험과 관련된 로드 시간만 계산
  • 이미지
  • 비디오 썸네일
  • CSS를 사용한 배경 이미지
  • 단락, 제목 및 목록과 같은 텍스트 요소

 

좋은 LCP 점수

우수한 사용자 경험을 제공하려면 2.5초 이하로 권장

 

LCP에 악영향을 미치는 원인

• 느린 서버 응답 시간
  브라우저가 서버에서 콘텐츠를 받는 데 걸리는 시간이 올래 걸릴수록 화면에 렌더링하는 데 시간이 더 오래 걸린다. 서버가 콘텐츠를 처리하는 방법과 위치를 개선해야 한다. 자원을 캐시하거나, HTML 페이지를 우선 캐시되도록 하는 등을 방법으로 서버 응답 시간을 단축할 수 있다.
  
  
• 자바스크립트와 CSS의 렌더 블로킹
  브라우저가 콘텐츠를 렌더링하려면, HTML 마크업을 파싱해서 DOM 트리로 만들어야 한다. HTML 파서는 외부 스타일시트(<link rel="stylesheet">)나 동기적인 자바스크립트(<script src="main.js">)를 만나면 중단될 것이다.
  스크립트와 스타일시트는 모두 LCP를 지연시키는 렌더 블로킹 리소스이다. 웹 페이지의 주요 컨텐츠를 빠르게 로딩하기 위해서 중요하지 않는 자바스크립트와 CSS는 지연시켜야 한다.
  
  
• 느린 리소스 로딩 시간
  LCP에 영향을 주는 엘리먼트의 타입들은 <img>, <svg> 엘리먼트 내부의 <image>, <video>, CSS 그라데이션과 다르게 url() 함수를 통해 로드된 배경 이미지들이다.
  상단부가 렌더링된 경우 이런 엘리먼트를 로드하는 데 걸리는 시간은 LCP에 직접적인 영향을 미친다. 이런 파일이 가능한 빠르게 로드될 수 있도록 하는 방법에는 이미지 최적화 및 압축, 중요한 리소스를 미리 로드, 텍스트 파일 압축 등이 있다.
  
  
• Client-side 렌더링
  클라이언트에서 주로 렌더링되는 사이트를 만들고 있다면, 용량이 큰 자바스크립트 번들의 사용이 LCP에 미칠 수 있는 영향을 조심해야 한다.
  클라이언트 측에서 렌더링되는 사이트를 만들 때 핵심 자바스크립트를 최소화, 서버 측 렌더링을 사용, 사전 렌더링한다 등과 같은 최적화 방법을 고려해야 한다.

 

2. FID(First Input Delay, 최소 입력 지연)

• 브라우저가 첫 번째 클라이언트 요청에 응답하는 데 걸리는 시간을 계산
• 콘텐츠가 그려진 시점과 사이트가 이벤트 핸들러를 실행하고 처리할 준비가 된 시점 사이의 시간
• 이 지연은 JS를 다운로드하고 실행해야 하는 양, 이미지 크기, 사용자 정의 글꼴 등에 따라 사이트마다 다를 수 있다.
• FID가 높을수록 사용자에게 더 답답

 

좋은 FID 점수

우수한 사용자 경험을 제공하려면 100ms 이하

 

FID에 악영향을 미치는 원인

• JavaScript 실행
  브라우저가 다음 단계를 결정하기 위해 기다리는 동안 웹 사이트가 응답하지 않은 것처럼 느끼게 하여 입력 지연 시간이 길어질 수 있다. 비동기 작업을 작은 단위로 나누어 처리하거나 서버 측에서 콘텐츠를 생성하여 클라이언트 측에서 후처리해야 하는 양을 최소화하거나, 사용하지 않는 JS를 delay하거나 해서 최적화 방법을 고려할 수 있습니다.

 

3. CLS(Cumulative Layout Shife, 누적 레이아웃 시프트)

• 방문자에게 콘텐츠가 얼마나 불안정한 지 측정하는 사용자 경험 측정 항목
• 뉴스 기사를 보려고 들어간 웹 사이트에서 기사 링크를 클릭한 순간 레이아웃이 이동해서 광고가 나타나 기사가 아닌 광고를 클릭한 경험이 있을텐데... 
• 이렇게 페이지에 들어갔을 때 갑작스럽게 발생하는 레이아웃 이동의 정도를 합산한 이동 거리 개념을 도입
• 안정적인 레이아웃이냐를 따진다.

 

좋은 CLS 점수

우수한 사용자 경험을 제공하려면 0.1 이하

 

CLS에 악영향을 미치는 원인

• 치수가 없는 이미지
  이미지 및 비디오 요소에 `width`와 `height` 속성을 항상 포함하거나 또는 CSS를 사용하여 필요한 공간을 잡는다. 이 방법을 사용하면 이미지가 로드되는 동안 브라우저가 문서의 공간을 올바르게 할당할 수 있다. 영역을 미리 확보게 두는 것이 중요한데, 이럴 때 `aspect-ratio` 속성을 사용하거나 반응형 이미지를 처리하거나 하는 방법으로 최적화를 할 수 있다.
  
  
• 크기가 없는 광고, 삽입 및 iframe
  광고는 웹에서 레이아웃 이동에 가장 큰 영향을 주는 요소 중 하나이다. 동적인 광고 크기는 형재 보고 있는 콘텐츠를 페이지 아래로 밀어버릴 수 있어 사용자 환경에 최적화되지 않을 수 있다. 광고 슬롯을 위한 정적 공간을 확보하거나, 뷰포트 상단 근처에 광고 배치하지 않는 방법 등으로 개선할 수 있겠다.
  
  
• 동적으로 삽입된 콘텐츠
  사용자 상호 작용에 대한 응답이 없는 경우 기존 콘텐츠 위에 새 콘텐츠를 삽입하지 않도록 한다. 사이트를 로드하려고 할 때 뷰포트의 맨 위/아래에 나타나는 ,UI로 인해 레이아웃 이동을 경험했을텐데, 이는 광고와 마찬가지로 페이지의 나머지 콘텐츠를 이동시키는 배너 및 폼에서 종종 발생한다.
  미리 뷰포트에 충분한 공간을 확보하여(placeholder 또는 Skeleton UI 사용) 로드할 때 페이지의 콘텐츠가 이동하지 않도록 해야 한다.
  
  
• FOIT/FOUT을 유발하는 웹 글꼴
  FOIT : 웹 폰트가 적용되지 않은 텍스트가 보이지 않는 상태. 폰트가 바뀌면서 텐스트 번쩍임이 일어난다.
  FOUT: : 웹 폰트가 적용되지 않는 Fallback 폰트 상태(unstyled)에서 폰트가 바뀌면서 텍스트 번쩍임이 일어난다
  이럴 때는 `font-display`를 사용하여 사용자 정의 폰트의 렌더링 동작을 수정할 수 있다.

Google을 활용한 성능 측정

• https://developers.google.com/speed?hl=ko
• https://pagespeed.web.dev/

위 링크를 통해 성능을 측정할 수도 있고, 상세하게 여러 요인들을 알려주기도 합니다. 해당 내용들을 참고해 웹 성능 최적화를 수행을 할 수 있습니다.

Chrome을 활용한 성능 측정

• Performance
• Lighthouse
• React debug tool profiler

그래서 Next.js에서 Web vitals를 어떻게 추적?

위 방법으로 측정하는 것은 어떤 기능이 어떤 속도로 동작했는지는 볼 수 있지만, 사용자의 상황에서는 어떤 경험을 하고 있는지는 알 수 없었습니다. 그 부분들은 사용자에게 제공된 우리 웹에서 이 vital들을 tracking할 수 있는 로그들을 심어서 볼 수가 있습니다.

공식문서

`_app.js`파일에 아래 내용을 추가해주면 쉽게 report를 얻을 수 있다고 하고 있습니다.

export function reportWebVitals(metric) {
  console.log(metric)
}

보면 CLS, LCP, FCP 등이 남았습니다. 해당하는 값은 `value`를 보면 됩니다. 해당 내용을 fetch로 서버에 올린다면 그 값이 우리에게 축적이 되면서 우리의 서비스를 접근하는 사용자가 어떠한 환경에서 어느정도의 퍼포먼스를 경험하고 있는지를 분석할 수 있습니다.

---

이번 포스팅에서는 Web vitals와 성능 측정 방식에 대해서도 간단히 알아보았습니다.

 

1. web.dev

LCP(2.5s) / FID(100ms) / CLS(0.1)

 

2. Google

web url 입력시 점수 측정 가능

 

3. Chrome

Performance / Lighthouse

 

4. reportWebvitals

웹서비스에 접근한 사용자의 로그 수집

---

참고 문서

• Google Devloper - Web vitals
• 코어 웹 바이탈(Core web Vitals)이란 무엇인가?
• LCP(Largest Contentful Paint) 최적화하기
• What is Largest Contentful Paint?
• First Input Delay: A Complete Guide to Optimizing FID
• 새로운 웹페이지 성능 측정 지표 CLS(Cumulative Layout Shift)