프론트엔드 성능 측정
프론트엔드 성능 측정
REF: 우아한테크 테코톡
성능을 측정하는 이유
페이지 지연 시간이 미치는 영향
- 페이지 이탈률
- 구매 전환률
측정 목적: 페이지 이탈률을 낮추고 구매 전환율을 높여 사용성 개선으로 인한 이익 증대
측정해야 하는 성능의 종류
로딩 시간
FCP ( First Contentful Paint )
첫 요소가 로드 될 때까지 걸리는 시간
사용자에게는 지연 시간에 포함되는 것처럼 느껴지므로 측정에서 제외
FMP ( First Meaningful Paint )
사용자에게 의미있는 첫 요소가 로드 될 때까지 걸리는 시간
LCP ( Largest Contentful Paint )
주요 콘텐츠가 로드 될 때까지 걸리는 시간
LCP를 기준으로 측정하는 것이 명확함
렌더링 시간
초당 화면수 60, 약 16ms내에 한 화면이 그려져야 사용자의 눈에 자연스러움
브라우저 렌더링 과정
- Javascript 코드 처리: 페이지에 DOM 요소 추가 등 시각적 변화를 일으키는 작업 처리
- Style(CSS)처리: CSS를 어떤 DOM 요소에 적용해야 할지 계산
- Layout: 각 요소의 너비나 위치를 계산 해 화면 상에 배치
- Paint: 각 요소에 배경색, 글자 색, 그림자 등과 같이 픽셀을 채움
- Composite (병합): 이전 과정에서 생성된 레이어를 병합
메모리 누수
할당된 자원이 제때 해제되지 않고 메모리에 남아있는 현상
원인
- 전역변수
- 해제되지 않는 타이머, 콜백
- 돔 외부에서의 참조
- 클로저
Web Vitals
Web Vitals라는 이름으로 구글에서 성능측정 지표를 소개함
- LCP: Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP): 로딩 성능을 측정. 우수한 사용자 경험을 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 함.
- FID: First Input Delay(최초 입력 지연, FID): 사용자의 이벤트를 받고, 실제로 처리할 수 있는 시간. 상호 작용을 측정. 우수한 사용자 경험을 제공하려면 페이지의 FID가 100밀리초 이하여야 함.
- CLS: Cumulative Layout Shift(누적 레이아웃 시프트, CLS): 시각적 안정성을 측정. 우수한 사용자 경험을 제공하려면 페이지에서 0.1 이하의 CLS를 유지해야 함.
측정하는 방법
- 크롬 개발자 도구에서 제공하는 Lighthouse: WebVitals 확인 가능
- 개발자 도구의 퍼포먼스 탭: 직접 원하는 구간 녹화
- 개발자 도구의 네트워크 탭: 현재 메모리 사용률 확인, 스냅샷 간의 차이 확인 가능
- 개발자 도구의 메모리 탭: 에셋 로딩, 요청 처리에 걸리는 시간 확인 가능
- 리액트 프로파일러: 컴포넌트별 렌더링 시간확인 가능, 사용자의 인터렉션에 대한 변화를 추적
- 실시간 서비스 - 모니터링 도구: 제니퍼 프론트, 뉴렐릭
측정할 때 고려할 사항
- 서비스에 맞는 성능 개선요소 정의
- 기본 환경에서 측정, 크롬 익스텐션 등이 영향을 미침. - 시크릿 모드 권장
- 타겟 사용자 환경(모바일, 데스크톱)에 맞춰 데이터 수집