[모던 리액트 Deep Dive 스터디] 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

단순히 버그 없이 웹 서비스를 운영하는 것도 중요하지만 사용자가 쾌적하게 이용하는 것도 중요하다. 이러한 웹 서비스의 성능을 객관적으로 평가할 수 있는 지표인 핵심 웹 지표에 대해 알아보자.

웹사이트의 성능

---

사용자가 웹사이트 접속 시 공통적으로 기대하는 사항

1. 웹사이트를 방문한 목적을 손쉽게 달성하기
2. 방문 목적을 달성하는데 걸리는 시간 최소화 하기
3. 웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저하기

또한 웹사이트의 성능은 다음과 같은 요소에 영향을 미친다.

• 사이트의 로딩 속도는 전자 상거래 전환율에 막대한 영향을 미친다.
• 소비자의 70%는 페이지 속도가 사이트 방문에 영향을 미친다고 말했다.
• 절반에 가까운 사람들은 빠른 로딩속도가 보장되어 있으면 애니메이션과 동영상은 필요없다고 밝혔다.

이처럼 많은 사용자들은 웹사이트가 빠르길 기대한다. 웹사이트의 성능 또한 개발자의 책임이며 웹사이트의 성능은 조직이 이루고자 하는 목표와 직결된다고 봐도 무방하기 때문에 웹사이트의 성능을 향상 시키는 것은 중요하다.

구글은 웹사이트의 우수한 사용자 경험을 제공하는 데 필요한 몇가지 핵심적인 요소를 꼽는 지표를 제시한다. 이를 핵심 웹 지표(Core Web Vital)라고 한다.

핵심 웹 지표란?

---

구글에서 핵심 웹 지표로 꼽는 지표

• 최대 콘텐츠풀 페인트 (LCP: Largest Contentful Paint)
• 최초 입력 지연 (FID: First Input Delay)
• 누적 레이아웃 이동 (CLS: Cumulative Layout Shift)

핵심 지표는 아니지만 특정 문제를 진단하는 데 사용될 수 있는 지표

• 최초 바이트까지의 시간(TTFB: Time To First Byte)
• 최초 콘텐츠풀 시간 (FCP: First Contentful Paint)

최대 콘텐츠풀 페인트(LCP)

정의

• 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간

큰 이미지 또는 텍스트의 정의

• <img>
• <svg> 내부의 <image>
• poster 속성을 사용하는 <video>
• url()을 통해 불러온 배경 이미지가 있는 요소
• 텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소
  • <p>, <div>등이 포함된다.

즉, 각 엘리먼트가 등장한 시점부터 텍스트 또는 이미지가 완전히 로딩되는 시점으로 사용자의 기기가 노출하는 뷰포트 내부에서 가장 큰 영역을 차지하는 요소가 렌더링 되는 데 얼마나 걸리는지를 측정하는 지표이다.

예제

1. 최초에 헤더가 가장 먼저 노출됐다. (최대 콘텐츠 풀 페인트 - 헤더)
2. 다음 바둑판 메뉴가 노출됐다. 헤더보다 큰 영역이기 때문에 LCP 변경 (최대 콘텐츠 풀 페인트 - 메뉴)
3. 콘텐츠가 로딩 되면서 LCP 변경 (최대 콘텐츠 풀 페인트 - 사진)
4. 최대 콘텐츠 풀 페인트 영역 내부의 이미지 로딩이 끝나면서 최대 콘텐츠풀 페인트 지표가 기록된다.

이처럼 최대 콘텐츠풀 페인트는 페이지 로딩에 따라 변화하는 지표이다. 사용자가 이용하는 디바이스 크기에 따라, 그리고 그것이 이미지와 같이 비교적 크기가 큰 리소스라면 실제 로딩에 필요한 시간에 따라 LCP의 지표 값이 달라질 수 있다.

기준 점수

좋은 점수 : 2.5초 내로 응답

보통 : 4초 내로 응답

나쁨 : 그 이상

최대 콘텐츠 풀 페인트 점수 개선 방안

1. 텍스트는 언제나 옳다.
2. 이미지보다 텍스트 노출이 훨씬 빠르기 때문에, 최대 콘텐츠풀 페인트 예상 영역에 이미지가 아닌 문자열을 넣는 방법이다.
3. 이미지를 불러오는 방식

// 1. img
<img src="lcp.jpg"/>

// 2.svg
<svg xmls="http://www.w3.org/1000/svg">
	<image href="lcp.jpg"/>
</svg>

// video.poster
<video poster="lcp.jpg"></video>

// background-image:url()
<div style="background-image: url(lcp.jpg)"></div>

 

로딩 속도 : img < video.poster < background-image< svg

 

로딩 속도의 차이가 나는 이유

• <img> : 이미지는 브라우저의 프리로드 스캐너에 의해 먼저 발견되어 빠르게 요청이 일어난다.
• <svg> 내부의 <img> : 프리로드 스캐너에 의해 발견되지 않아 js 리소스와 병렬적으로 다운받아지지 않는다
• <video>의 poster : poster도 프리로드 스캐너에 의해 조기에 발견되어 <img>와 같은 성능을 나타낸다. video가 최대 콘텐츠풀 페인트에 영향을 받을 것 같다면 poster를 반드시 넣어주는 것이 좋다.

background-image : css에 있는 리소스는 브라우저가 해당 리소스를 필요로 하는 DOM을 그릴 준비가 될 때까지 리소스 요청을 뒤로 미루기 때문에 항상 느리다. 중요한 리소스에는 사용하지 않는 것이 좋다

💡 프리로드 스캐너? HTML을 파싱하는 단계를 차단하지 않고 이미지와 같이 빠르게 미리 로딩하면 좋은 리소스를 먼저 찾아 로딩하는 브라우저의 기능

그 밖에 주의사항

• 서비스 할 이미지는 가능한 한 무손실 형식으로 압축해 최소한의 용량으로 서비스 할 것
• 최대 콘텐츠 풀 콘텐츠의 이미지는 loading=lazy 사용을 지양할 것
• fadein과 같은 각종 애니메이션 사용 주의
• 클라이언트에서 빌드하지 말 것
• 최대 콘텐츠풀 리소스는 같은 도메인에서 직접 호스팅 할 것 (새로운 출처는 네트워크 커넥션부터 다시 수행해야 하기 때문)

최초 입력 지연(FID)

정의

• 사용자가 페이지와 처음 상호작용 할 때 (예: 링크를 클릭허가너 버튼을 탭하거나 사용자 지정 Javascript 기반 컨트롤을 사용할 때)부터 해당 상호 작용에 대한 응답으로 브라우저가 실제로 이벤트 핸들러 처리를 시작하기까지의 시간을 측정한다.
• 이벤트가 처리되는 것이 얼마나 지연되는지만 판단하고 이벤트 발생으로부터 해당 이벤트의 핸들러가 실행되는 순간까지 사이의 기간만 측정한다.
• 이벤트 핸들러가 완료되는 데 걸리는 시간은 측정하지 않는다.

구글이 분류한 사용자 경험 정의

• Response: 사용자의 입력에 대한 반응 속도
• Animation: 애니메이션의 각 프레임을 10ms 이하로 생성할 것
• Idle: 유휴 시간을 극대화해 페이지가 50ms 이내에 사용자 입력에 응답하도록 할 것
• Load: 5초 이내에 콘텐츠를 전달하고 인터랙션을 준비할 것

기준 점수

 

좋은 점수 : 100ms 이내 응답

보통 : 300ms 이내인 경우

나쁨 : 그 이후

최초 입력 지연 점수 개선 방안

메인 스레드에 이벤트를 실행할 여유를 줘야 한다.

1. 꼭 웹페이지에서 해야하는 작업인지 판단 하에 실행에 오래 걸리는 긴 작업을 분리
2. 자바스크립트 코드 최소화
3. 타사 자바스크립트 코드 실행의 지연

누적 레이아웃 이동(CLS)

정의

• 페이지의 생명 주기동안 발생하는 모든 예기치 않은 이동에 대한 지표를 계산하는 것이 바로 누적 레이아웃 이동(CLS: Cumulative Layout Shift)
• 이 지표가 낮을수록, 사용자가 겪는 예상치 못한 레이아웃 이동이 적을수록 더 좋은 웹사이트이다.

의미

• 최초 렌더링 이후 실행되는 useEffect가 많을수록, 그리고 이 useEffect가 렌더링에 영향을 미칠수록 이 누적 레이아웃 이동에 좋지 못한 점수를 받을 가능성이 커진다.
• 뷰포트 내부의 요소에 대해서만 측정하며, 뷰포트 밖의 요소에 대해서는 측정하지 않는다.
• 요소가 추가되었다 하더라도 다른 요소의 시작 위치에 영향을 미치지 않았다면 레이아웃 이동으로 간주되지 않는다.

기준점수

좋은 점수 : 0.1 이하

보통 : 0.25 이하

나쁨 : 그 외에

누적 레이아웃 이동 개선 방안

1. 삽입이 예상되는 요소를 위한 추가적인 공간 확보
2. 폰트 로딩 최적화
3. 적절한 이미지 크기 설정

핵심 웹 지표는 아니지만 성능 확인에 중요한 지표들

• 최초 바이트까지의 시간(Timte To First Byte, TTFB)
  • 브라우저가 웹페이지의 첫번째 바이트를 수신하는 데 걸리는 시간을 의미
• 최초 콘텐츠풀 페인트(First Contentful Paint, FCP)
  • 웹사이트에 접속한 순간부터 페이지에 뭐라도 뜨기 시작한 시점까지의 시간을 의미

•