1 minute read

프론트엔드 성능 측정

REF: 우아한테크 테코톡

성능을 측정하는 이유

페이지 지연 시간이 미치는 영향

  1. 페이지 이탈률
  2. 구매 전환률

측정 목적: 페이지 이탈률을 낮추고 구매 전환율을 높여 사용성 개선으로 인한 이익 증대

측정해야 하는 성능의 종류

로딩 시간

FCP ( First Contentful Paint )

첫 요소가 로드 될 때까지 걸리는 시간
사용자에게는 지연 시간에 포함되는 것처럼 느껴지므로 측정에서 제외

FMP ( First Meaningful Paint )

사용자에게 의미있는 첫 요소가 로드 될 때까지 걸리는 시간

LCP ( Largest Contentful Paint )

주요 콘텐츠가 로드 될 때까지 걸리는 시간
LCP를 기준으로 측정하는 것이 명확함

렌더링 시간

초당 화면수 60, 약 16ms내에 한 화면이 그려져야 사용자의 눈에 자연스러움

브라우저 렌더링 과정

  1. Javascript 코드 처리: 페이지에 DOM 요소 추가 등 시각적 변화를 일으키는 작업 처리
  2. Style(CSS)처리: CSS를 어떤 DOM 요소에 적용해야 할지 계산
  3. Layout: 각 요소의 너비나 위치를 계산 해 화면 상에 배치
  4. Paint: 각 요소에 배경색, 글자 색, 그림자 등과 같이 픽셀을 채움
  5. Composite (병합): 이전 과정에서 생성된 레이어를 병합

메모리 누수

할당된 자원이 제때 해제되지 않고 메모리에 남아있는 현상
원인

  1. 전역변수
  2. 해제되지 않는 타이머, 콜백
  3. 돔 외부에서의 참조
  4. 클로저

Web Vitals

Web Vitals라는 이름으로 구글에서 성능측정 지표를 소개함

  1. LCP: Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP): 로딩 성능을 측정. 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 함.
  2. FID: First Input Delay(최초 입력 지연, FID): 사용자의 이벤트를 받고, 실제로 처리할 수 있는 시간. 상호 작용을 측정. 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 함.
  3. CLS: Cumulative Layout Shift(누적 레이아웃 시프트, CLS): 시각적 안정성을 측정. 우수한 사용자 경험을 제공하려면 페이지에서 0.1 이하의 CLS를 유지해야 함.

측정하는 방법

  1. 크롬 개발자 도구에서 제공하는 Lighthouse: WebVitals 확인 가능
  2. 개발자 도구의 퍼포먼스 탭: 직접 원하는 구간 녹화
  3. 개발자 도구의 네트워크 탭: 현재 메모리 사용률 확인, 스냅샷 간의 차이 확인 가능
  4. 개발자 도구의 메모리 탭: 에셋 로딩, 요청 처리에 걸리는 시간 확인 가능
  5. 리액트 프로파일러: 컴포넌트별 렌더링 시간확인 가능, 사용자의 인터렉션에 대한 변화를 추적
  6. 실시간 서비스 - 모니터링 도구: 제니퍼 프론트, 뉴렐릭

측정할 때 고려할 사항

  1. 서비스에 맞는 성능 개선요소 정의
  2. 기본 환경에서 측정, 크롬 익스텐션 등이 영향을 미침. - 시크릿 모드 권장
  3. 타겟 사용자 환경(모바일, 데스크톱)에 맞춰 데이터 수집