프론트엔드 성능 측정

본 내용은 10분 테코톡 서니님의 강의를 토대로 작성하였습니다.

1. 성능측정의 의의

• 서비스의 지연 속도가 늘어날수록
  • 이탈률이 급격하게 증가
  • 구매 전환률 역시 감소
• 기업의 이익에 영향을 끼치게 됨
• 프론트엔드에서의 성능 측정이 필요한 이유는 사용성 개선을 통한 이익 증대를 이끌어내기 위함

2. 측정할 성능

• 로딩 속도
• 렌더링 시간
• 메모리 누수 확인

로딩 속도

• FCP(First Contentful Paint)
  • 첫 요소가 로드 될 때까지 걸리는 시간
• FMP(First Meaningful Pain)
  • 사용자에게 의미있는 첫 요소가 로드 될 때까지 걸리는 시간
• LCP(Largest Contentful Paint)
  • 주요 콘텐츠가 로드 될 때까지 걸리는 시간
• FMP의 경우 약 20%의 항목에서 정확하지 않아, 현재는 LCP를 기준으로 로딩속도 측정
• 화면에서 가장 큰 요소가 렌더되는 시점이 2.5초 미만이면 좋음
  • 2.5초 ~ 4.0 미만: 개선 필요
  • 4초 이상: 형편없음

렌더링 시간

• 60: 사람이 자연스럽다고 느끼는 초당 화면 수
  • 한 화면이 그려지는 시간이 16ms 미만이어야 우리 눈에 자연스럽게 보임
• 브라우저 렌더링 과정이 얼마나 걸리는지 측정함으로 렌더링 성능을 측정

브라우저 렌더링 과정

JavaScript > Style > Layout > Paint > Composite

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

메모리 누수

• 할당 자원이 제때 해제되지 않고 계속해서 메모리에 남아있는 현상
• 대부분은 가비지 콜렉터에 의해 해제가 되지만, 아래의 이유로 인해 해제가 되지 않는 경우가 있음
  • 전역변수
  • 해제되지 않은 타이머, 콜백
  • 돔 외부에서의 참조
  • 클로저

Web Vitals

• Google에서 제시하는 필수적인 성능 지침
• LCP, FID, CLS
• FID(First Input Delay)
  • 사용자의 행동에 대해 실제로 이벤트 핸들러가 반응하기까지 걸리는 시간을 의미
  • 100ms 이하면 좋음
  • 100ms 이상 300ms 이하라면 개선이 필요
• CLS(Cumulative Layout Shift)
  • 시각적인 안정성을 측정하는데 사용되는 기준
  • 시작위치에서 레이아웃이 얼마나 변화하는지에 대해 측정
  • 0.1 미만이면 좋음
  • 0.1 이상 0.25미만이면 개선이 필요

3. 방법

• Lighthouse: 크롬 개발자 도구에서 제공
  • 구글이 제시한 WebVitals를 이용하여 성능을 측정하고 결과를 제공
• 개발자 도구의 Performance 탭
  • 원하는 구간에 녹하하여 네트워크, 렌더링, 메모리 전반에 관한 사항을 확인
• 개발자 도구의 Memory 탭
  • 현재 메모리의 사용을 확인
  • 각 스냅샷의 차이를 알 수 있다.
  • 누수가 발생하는 항목을 찾을 수 있다.
• 개발자 도구의 Network 탭
  • 네트워크 요청이 처리되는데 얼마나 시간이 걸리는지 확인
  • 옵션을 통해 모바일 환경과 유사한 네트워크를 설정해 시뮬레이션도 가능
• 리액트 프로파일러
  • 컴포넌트별 렌더링 시간 파악 가능
  • 사용자의 인터렉션에 대한 변화를 추적
• 모니터링 도구
  • 실시간 서비스 중에 성능을 측정
  • 제니퍼 프론트, 뉴렐릭

4. 고려사항

• 제공할 서비스에 맞는 성능 개선 요소에 집중하는 것이 중요
  • 성능을 측정, 최적화하는 것이 모두 비용
  • 현재 상황과 서비스의 성격에 맞게 개선하고자하는 요소를 정하는 것이 좋다.
• 기본 환경에서 측정하기
  • 확장 프로그램과 같이 성능에 영향을 미치는 요소를 제거
  • 측정 결과의 정확도에 영향을 줄 수 있으므로 가장 기본적인 상태에서 측정하기
  • 크롬개발자 도구를 이용하는 경우 시크릿모드를 사용
• 타겟 사용자 환경에 맞춰 데이터 수집하기
  • 모바일 사용자를 대상으로 할 때 웹 환경에서의 성능측정은 소용 없음
  • 기기를 이용해 성능 측정해보기

Reference

[10분 테코톡] 서니의 프론트엔드 성능 측정