React Deep Dive 13강

RookieAND·2024년 4월 20일

React Deep Dive

목록 보기

8/8

✒️ 웹 페이지의 성능을 측정하는 다양한 방법

✏️ create-react-app

create-react-app 로 프로젝트 생성 시 reportWebVital.js 에 정의된 reportWebVital 함수도 추가된다.
web-vitals 라이브러리에서 제공하는 각종 지표 측정 함수를 통해 웹 성능을 측정한다.
web-vitals 는 PerformanceObserver API 를 기반으로 웹페이지의 성능을 측정한다.
console.log 메서드로 브라우저 내 콘솔 창에 Vital 측정 지표를 표기하거나, navigator.sendBeacon 같은 API 를 활용하여 서버로 성능 지표를 보낼 수도 있다.

useReportWebVitals((metric) => {
  const body = JSON.stringify(metric)
  const url = 'https://example.com/analytics'
 
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body)
  } else {
    fetch(url, { body, method: 'POST', keepalive: true })
  }
})

만약 navigator.sendBeacon API 를 지원하지 않는다면 fetch API 에서 지원하는 keepalive 옵션을 true 로 변경하여 사용자가 페이지를 이탈할 때 데이터가 정상적으로 전송되도록 수정하자.

PerformanceObserver 는 어떤 친구인지 간략하게 알아보자.

PerformanceObserver 는 성능 측정 이벤트를 관측하고, 브라우저의 성능 관측 타임라인을 기반으로 성능 Entries 를 반환하는 Callback 함수를 호출하는 Observer 이다.

function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.entryType === "mark") {
      console.log(`${entry.name}'s startTime: ${entry.startTime}`);
    }
    if (entry.entryType === "measure") {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ supportedEntryTypes: ["measure", "mark"] });

Observer 옵션에 들어가는 Property supportedEntryTypes 는 측정하려는 성능 측정 기준을 배열로 받습니다.
- element : Element 를 로드하는데 걸리는 시간을 측정합니다.
- events : 이벤트 발생 성능을 기록하여 발동된 시간을 측정합니다.
- first-input : FID (First Input Delay) 성능 지표를 측정합니다.
- largest-contentful-paint : LCP (Largest Contentful Paint) 성능 지표를 측정합니다.
- layout-shift : CLS (Cumulative Layout Shift) 성능 지표를 측정합니다.
- long-animation-frame : 애니메이션 렌더링이 50ms 이상 소요되는 작업 (Long Animation Frames - LoAFs) 목록을 제공합니다.
- longtask : 메인 스레드를 50ms 이상 차단하는 Task 목록을 제공합니다. (PerformanceLongTaskTiming)
그 외 나머지 옵션에 대해서는 https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/entryType 를 참고해주세요.
https://web.dev/articles/custom-metrics?hl=ko 에서 Performance Observer 를 사용하는 방법을 추가로 기술했습니다.
https://w3c.github.io/performance-timeline/#dfn-performance-timeline 으로 W3C 스펙 열람이 가능합니다.

✏️ create-next-app

NextJS 에서도 내부적으로 Web Vital 을 사용하여 사이트 내 성능 지표를 측정하도록 하는 모듈을 구축해두었다.
여기에 추가로 NextJS 에서는 해당 프레임워크에 특화된 사용자 지표를 지원한다.

Next.js-hydration : 페이지가 SSR 된 이후 Hydration 까지 걸리는 시간
Next.js-route-change-to-render : 페이지가 경로를 변경한 후 새로운 페이지를 렌더링하기까지 걸린 시간
Next.js-render : 경로 변경이 완료된 후 페이지 렌더링까지 걸린 시간

✏️ Google Lighthouse

Google Lighthouse 는 웹 페이지 성능 도구 중 하나로, 핵심 웹 지표 (Web Vital) 뿐만 아니라 PWA, SERO, Web Accessability 같은 여러 주요 지표를 점검하도록 돕는다.

구글 Chrome 에는 기본적으로 Lighthouse 가 있으며, npm 에 등록된 라이브러리를 사용하여 CLI 기반의 지표 수집이 가능하다.

Lighthouse 에서 제공하는 모드는 세 가지가 있는데, 각 항목 별 설명은 아래와 같다.

✏️ Lighthouse - 탐색 모드

페이지에 접속했을 때부터 페이지 로딩이 완료되는 사이에 성능을 측정하는 모드다. (페이지 로드가 완료될때까지 측정)

측정 완료 시 총 5개의 옵션에 대한 지표가 1 ~ 100 점 사이로 측정되는데, 각 항목 별 부가 설명은 아래와 같다.

성능

웹페이지의 성능 지표와 관련된 스코어다.
주로 FCP, LCP, CLS 와 같은 핵심 지표를 측정한다.
그 외 TTI (Time To Interactive), Speed Index, TBT (Total Blocking Time) 도 계산하여 Score 에 합산한다.

접근성

장애인, 고령자와 같이 신체적으로 불편한 사람들도 일반 사용자와 동등하게 웹페이지를 이용하도록 보장하는 것을 의미한다.

권장 사항

웹사이트 개발 시 고려할 요소들이 얼마나 잘 지켜지고 있는지를 확인한다.
- CSP 가 XSS 공격에 효과적인지를 확인
- 사용 중인 Javascript 라이브러리 체크
- HTTPS 사용 여부
- 페이지 로드 시 위지 정보 권한 요청 방지
- 페이지 로드 시 알림 권한 요청 방지
- 보안 취약점이 존재하는 라이브러리 사용 여부
- 사용자가 비밀번호 입력란에 붙여넣기가 가능한지
- 이미지가 올바른 width, height 비율로 표기되었는지
- 페이지에 HTML Doctype 이 존재하는지
- 지원이 중단된 API 를 사용하고 있는지

구글 및 타 포털 사이트에서 사용하는 검색 엔진이 웹페이지에서 쉽게 정보를 가져와 공개할 수 있는지를 페크한다.
Semantic 태그를 적절히 사용했는지, 페이지의 정보를 빠르게 확인할 수 있는지, canonical 태그를 사용했는지 등 SEO 최적화와 관련된 요소를 점검해준다.

TTI, Speed Index, TBT 에 대해서 알아보자

TTI (Time To Interactive)

페이지에서 사용자가 상호작용이 가능하기까지 걸리는 시간을 TTI 라고 한다.
TTI 의 경우 3.8 내외라면 좋고, 7.3초 이후부터는 개선이 필요하다고 판단된다.
DOM 에 이벤트 핸들러가 빠르게 부착되어야 하므로 메인 쓰레드를 막는 작업을 최소화하고, 번들링된 파일의 양을 줄이면 좋다.

Speed Index

페이지가 로드되는 동안 컨텐츠가 얼마나 빠르게 시각적으로 표시되는지를 걸리는 시간이다.
Lighthouse 에서는 페이지가 로드되는 모습을 실시간으로 캡쳐하고, Speedline 라이브러리를 기반으로 이미지 분석을 통해 지표를 계산한다.
Speed Index 의 경우 3.4초 이내면 좋고, 5.8초 이상이면 개선이 필요하다고 판단된다.

Total Blocking Time

메인 스레드를 50ms 이상 차단시키는 큰 작업을 모아 최종적으로 쓰레드가 Blocking 된 시간의 합을 TBT (Total Blocking Time) 라고 한다.
TBT 의 계산 방식은 Long Task 의 진행 시간에서 50ms 를 뺀 나머지를 모두 합산한다. 또한 FCP 와 TTI 사이에 진행된 Task 를 대상으로만 측정한다.
FCP 와 TTI 사이는 사용자가 시각적으로 페이지가 로드되었음을 인지하지만, 상호작용이 불가하기에 "작업이 진행되지 않음" 을 깨달을 수 있는 시점이기 때문이다.

✏️ Lighthouse - 기간 모드

실제 사용자가 웹페이지를 탐색하는 과정을 측정하여 그 사이에 대한 성능 지표를 측정하는 방식이다.
기간 모드 시작 버튼을 눌러 성능 측정을 시작하고, 이후 사용자가 원하는 타이밍에 종료하여 웹 성능 지표를 확인할 수 있다.

View Trace

웹 성능 지표를 추적한 기간을 나타내는 데이터다.
측정을 시도한 타임라인 내부에서 웹 페이지의 로딩 순서 및 세부 지표의 변화량을 관측할 수 있다.

Tree Map

alt text

페이지를 불러올 때 함께 Load 한 리소스를 모아서 보여주는 View 이다.
페이지를 로드하기 위해 사용한 Javascript 리소스들 중에서 어떤 파일이 전체 데이터 로드 시간 중 어느 정도를 차지했는지 알 수 있다.
번들링된 JS 파일이 클 경우 Tree - shaking 이 잘 되었는지 체크하고, 불필요한 리소스에 대해서는 Lazy 하게 가져오도록 수정이 필요하다.

✏️ Lighthouse - 스냅샷 모드

스냅샷 모드의 경우 현재 페이지 상태를 기준으로 단일 분석을 시행한다.
현재 페이지 상태를 기반으로 SEO, 접근성, 웹 성능 등을 분석하는 모드다.

✏️ WebPageTest

https://www.webpagetest.org/result/240421_BiDcXS_P3/

✏️ 크롬 개발자 도구

성능 통계

Lighthouse 와 비슷하게 Page Load 를 선택해 사이트 로딩이 끝날때까지의 순간을 측정하거나 Start Recoding 버튼을 통해 원하는 시점에 대해서 측정이 가능하다.

Throttling 기능을 활용하여 고의로 네트워크 혹은 CPU 성능을 저하시켜 열악한 환경의 사용자들에 대한 모의 테스트도 간접적으로 지원한다.
사용자가 바라보는 Viewport 에 맞게 설정한 후 측정을 진행해야 한다. 잘린 화면은 성능 측정의 대상이 되지 않는다.

1-1. Insights

성능을 측정하는 기간에 발생한 이벤트 중 "눈여겨봐야 할 지표" 를 시간 순서대로 나열한다.
핵심 웹 지표, Performance Measure, Long Task 와 같은 항목을 시간 순대로 나열하여 그래프 형식으로 제공한다.
또한 렌더링을 차단하는 CSS와 스타일 강제 재계산 (Forced Style Recalculation) 태스크에 대해서도 제공한다.

1-2. 메인 메뉴

성능 측정 기간 동안 페이지 내에서 변화한 성능 지표 및 Network 등 여러 데이터를 제공하는 곳이다.

Layout Shift 영역에서는 레이아웃 이동이 일어날 경우 기록된다.
Network 에서는 성능 측정 기간동안 발생한 모든 네트워크 요청을 보여준다.
Renderer 에서는 브라우저 Renderer 가 어떤 작업을 수행했는지를 확인한다. Long Task 가 존재하는지를 이 단계에서 체크하면 좋다.

1-3. 성능

Performance Insight 보다 자세한 성능 지표를 열람하는 페이지이며, 측정 기간 내 CPU, 네트워크, 메모리 점유율과 같은 여러 성능 지표를 제공한다.

Network 에서는 성능 측정 기간동안 발생한 모든 네트워크 요청을 보여준다.
Web Vitals 는 핵심 웹 지표 시점을 체크하는 영역이다.
소요 시간과 기본 탭은 시간에 흐름에 따라 Javascript 에서 점유하는 Heap 영역과 Main Thread 내 작업 흐름을 도식화하여 보여준다.

RookieAND

항상 왜 이걸 써야하는지가 궁금한 사람

이전 포스트