웹사이트 성능 측정할 때 어떤 부분을 측정하는걸까? ( with 측정 가능 사이트 )

사이트 방문자를 늘리기 위해서는 빠른 웹사이트 로드가 필수인 세상이다. 

최적화된 웹 사이트를 통해 더 나은 사용자 경험을 제공하기 위해 내가 만든 웹 사이트의 성능이 어느 정도인지 판단하고 성능 최적화 작업 후 비교하고 확인할 데이터가 필요할 것이다. 

 

 

Google의 Web Vitals 메트릭을 가이드라인으로 웹 사이트의 성능을 어느정도 정량적으로 측정할 수 있다. Web Vitals는 사용자가 체감할 수 있는 성능을 수치화 한것이다. 성능 측정 부분을 크게 3가지로 나누어 보자면 1. 로딩  2. 상호작용/반응성  3. 시각적 안정성 이다. 

 

# 로딩 

1. TTFB : Time To First Byte

브라우저가 웹 페이지 리소스 요청의 응답에 대해 첫 번째 바이트를 수신하기까지 소요된 시간 

사용자가 페이지에 진입하는 시점이 빠른지, 느린지를 알 수 있다. 일반적으로 0.6 ~ 0.8초 이내의 시간타임이 권장되며 이부분은 사용자 입장에서 인식하기 쉬운 영역이기 때문에 과도하게 지연된다면 개선이 필요한 부분이다. 

 

특히 SSR 을 채택할 때 문제가 될 가능성이 높은 부분인데 서버에서 데이터를 fetch 하고 document를 완성하는데 소요된 시간이 그대로 반영 되기 때문이다. 

 

TTFB는  SSR에서 대체로 불리하게 측정됨 
LCP 메트릭은 CSR 에서 열악하게 측정됨

 

>> 개선 방법 

1. 다중 리디렉션 회피

2. 필수 외부 리소스에 사전 연결하기

3. HTTP-To-HTTPS 리디렉션 대기 시간을 제거하기 위해 HSTS preload 설정하기

4. HTTP/2, HTTP/3 사용하기

5. Predictive Prefetching 사용하기

 

 

2. FCP : First Contentful Paint

페이지가 로드되기 시작한 시점부터 화면에 처음으로 콘텐츠(텍스트, 이미지, svg ..etc)가 렌더링 될 때까지의 시간을 측정한 수치

+ 로딩 인디케이터/스피너 같은 요소가 노출되는 순간도 FCP 시점으로 측정될 수 있다. 보통 1.8초 이내 일때 UX 측에서 우수하다고 흰 화면이 아닌 뭐라도 보이기 시작한 시점부터 사용자는 로딩의 시작을 인지한다. 

 

FCP는 초기 DOM 콘텐츠가 렌더링되는데 걸리는 시간을 측정하지만 페이지에서 가장 크고 일반적으로 가장 의미 있는 메인 콘텐츠를 렌더링하는데 걸린 시간은 포착하지 않는다. 이 부분을 측정하는 것이 아래 설명할 LCP 메트릭이다. 

 

 

>> 개선 방법 

1. 렌더링 차단 리소스 제거하기

2. CSS 축소 및 사용하지 않는 CSS 제거하기

3. 대규모 네트워크 페이로드 방지하기

4. 정적 에셋 리소스에 적절한 캐시정책 적용하기

5. 과도한 DOM 크기 / 깊이 지양하기

6. Critical Rendering Path 연결에 의한 영향 최소화하기

7. 웹폰트 로드 중에도 텍스트가 표시되도록 하기 

8. 리소스 요청 수를 최소화하고 전송 크기를 작게 하기

 

 

3.  ✰✰ LCP : Largest Contentful Paint ✰✰ 

사용자가 인식하는 로딩 성능을 측정하며 메인 콘텐츠가 로드되었을 가능성이 높은 시점을 나타낸다. 

페이지가 로드가 시작된 시점부터 뷰포트 내에서 가장 큰 콘텐츠(텍스트, 이미지, 비디오..)가 렌더링 된 시점까지 소요된 시간을 측정한 메트릭이다. 보통 2.5초 내를 우수하다고 판단한다. LCP는 실질적인 로딩 완료 시점을 나타내는 핵심 메트릭이다. 보통 TTFB, FCP가 양호해야 LCP도 우수할 수 있다. 

 

열악한 LCP 발생 원인은 크게 ,,아래와 같은 요소들이 있다. 

* 느린 서버 응답 시간 

* 렌더링 차단 JS 및 CSS

* 느린 리소스 로드 시간

* 클라이언트 측 렌더링

 

>> 개선 방법

최대 콘텐츠풀 페인트 최적화 -> 링크 클릭 

 

 

# 상호작용/ 반응성( Interactivity)

1. TBT : Total Blocking Time

브라우저의 메인 스레드가 사용자의 입력에 대한 응답을 오래 차단했을 때 FCP 시점부터 TTI 시점까지의 시간을 측정한 메트릭

"Blocking(차단)"은 메인 스레드에서 긴 작업이 발생한 경우를 의미하는데, 이때 기준은 50ms 이다. 어떤 작업이 실행 중일 때 사용자가 페이지와 상호작용하려 했다면 브라우저는 일단 처리중이던 작업이 완료되어야 응답할 수 있다. 이것을 "blocking"이라고 표현하는데 50ms를 넘어가면 사용자는 답답한 느낌을 받게 된다고 한다. 

 

모든 작업이 차단된 시간을 TBT라고 하는 것이다. TBT같은 상호작용 관련 메트릭은 자바스크립트와 관계가 깊다. 페이지 요소들이 거의 눈에 보이는 시점이지만 무언가 너무 많고 비대한 코드로 인해 빠릿하게 동작은 하지 않는 문제를 파악할 수 있다.

 

 

>> 개선 방법

1. 제 3자 (Third-Party) 스크립트 코드의 영향 줄이기

2. JavaScript 실행 시간 단축

3. 메인 스레드 작업 최소화

4. 리소스 요청 수를 최소화하고 전송 크기를 작게 하기 

 

 

 

2. TTI : Time To Interactive

페이지가 완전히 상호작용이 가능하기까지의 소요 시간을 측정한 것.

마지막 Long Task 가 완료된 후 5초 동안 네트워크 및 메인 스레드가 유휴(idle) 상태에 진입한 시점을 체크하는 식으로 측정된다. 완전한 상호작용이 가능한 시점이란 다음을 의미한다. 

 

* 페이지에 FCP 로 측정되는 콘텐츠가 표시되었다. 

* 가장 많이 노출되는 요소에 이벤트 헨들러가 등록되었다. 

* 페이지가 50ms 내에 사용자의 상호작용에 대해 응답한다. 

 

보통 3.8초 이내가 빠른 것으로 판단하며 자바스크립트를 최대한 경량화 하는 것이 TTI 를 최적화 할 수 있는 방법이다. 자바스크립트 코드를 분할하고 불필요한 코드는 제거하기 위해 Tree Shaking 하는 행위 등이 적절한 개선 방법이 될 수 있다. 

 

 

 

3. ✰✰ FID : First Input Delay ✰✰ 

사용자가 페이지와 처음 상호작용하려 했을 때의 경험을 정량화한다. 

버튼을 클릭하는 등 사용자가 처음으로 사이트의 특정 요소와 상호작용을 할 때, 브라우저가 해당 상호작용에 대한 응답으로 이벤트 헨들러를 실행하기 시작하는 순간까지의 시간이다. 100ms 이하여야 우수하다고 볼 수 있다. 

 

 

 

# 시각적 안전성(Visual Stability)

1.  ✰✰ CLS : Cumulative Layout Shift ✰✰ 

사용자가 예상하지 못한 레이아웃의 변화를 정량화하여 시각적 안정성을 측정한다. 

사용자가 예상치 못한 레이아웃의 이동이 발생했을 때, 이동 전/후 렌더링된 각각의 두 프레임 사이에서 뷰포트의 크기와 뷰포트 내에서 이동한 요소의 이동 거리 및 크기의 비율을 계산하여 수치화한 것이다. 무언가 비동기식으로 로드되어 동적으로 DOM요소가 기존 콘텐츠 위에 추가되면서 발생하는 것으로 주로 이미지, 동영상, 폰트 , 광고 등으로 인한 경우가 많다. 사용자 경험에서 핵심적인 메트릭으로 작용한다. 모통 0.1 이하를 우수하다고 본다. 

 

>> 개선 방법

1. 이미지, 비디오 요소에 항상 크기 또는 종횡비(aspect-ratio)속성을 명시하여 미리 필요한 공간을 확보하기

2. 사용자의 상호작용에 대한 응답이 아니면 기존 콘텐츠 위에 동적으로 콘텐츠를 삽입하지 않기

3. 레이아웃 이동을 유발하는 애니메이션 보다 transform 속성을 사용한 애니메이션 사용하기 

 

 

 

---

 

웹사이트 성능 측정하는데 사용하기 좋은 도구들 중 3가지를 다음과 같이 정리해보았다. 

 

1. Chrome DevTools

- CLS를 상세하게 디버깅해볼 수 있다. 

 

 

2. PageSpeed Insights

- *Lighthouse를 이용해서 사이트를 프로파리일링해볼 수 있다.

* Lighthouse : 구글에서 개발한 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구. 

 

 

 

 

3. web-vitals library

- 실제 필드 데이터를 측정하고자 할 때 유용하게 사용될 수 있는 JS 라이브러리 이다. Google Analytics와도 연동된다. 

 

 

 

---

참조 블로그 : 웹사이트 성능 측정, Web Vitals

웹 사이트 성능 측정, Web Vitals