프론트 엔드, 성능측정 해야하는 이유
- 아카마이(분산컴퓨팅 및 클라우트 컴퓨팅을 전문으로 하는 미국의기업)의 이커머스 업계 성능 현황 보고서에 따르면 지연속도가 늘어날 수록 이탈률이 급격하게 증가하고, 구매전환율 역시 감소한다고 한다.
- 2초 지역시 62%의 이탈률 증거와 25%의 구매 전환률 감소를 하고있으며 이는 4명중 한명꼴로 꽤 큰 비율이다.
- 성능은 서비스 이용률 및 기업의 이익에 영향을 미친다.
⇒ 프론트엔드 성능 측정이 필요한 이유는 사용자 개선을 통해 사업의 이익 증대를 끌어내기 위해서이다.
프론트엔드에서 측정해야 하는 성능은 무엇일까?
- 로딩시간
- FCP(First Contentful Paint) : 첫 요소가 로드될 때까지 걸리는 시간
- FMP(First Meaningful Pain) : 사용자에게 의미 있는 첫 요소가 로드될 때까지 걸리는 시간
- LCP(Largest Contentful Paint) : 주요 콘텐츠가 로드될 떄까지의 시간
- 2.5 ~ 4.0 초 미만이면 개선필요(Needs Improvement)
- 구글기준 LCP에 따라 아래와 같이 분류한다.
- 렌더링시간
60이 사람이 자연스럽다고 느끼는 초당 화면수 (60fps)
한 화면이 그려지는 시간은 16ms 미만이여야 자연스럽게 보인다고 할 수 있음
브라우저 렌더링
- HTML, CSS, JS, image, font 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다.
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 Render Tree를 생성한다.
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST (Abstract Syntax Tree)를 생성하고, 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM과 CSSOM을 변경할 수 있다. 변경된 DOM은 다시 Render Tree로 결합된다.
- Render Tree를 기반으로 HTML 요소의 Layout을 계산하고 브라우저 화면에 HTML 요소를 Painting 한다
- javascript : 페이지에 DOM요소 추가 등 시각적 변화를 일으키는 작업 처리
- Style : CSS를 어떤 DOM 요소에 적용해야 할 지 계산
- Layout : 각 요소의 너비나 위치를 계산해 화면상에 배치
- Paint : 각 요소의 배경색, 글자, 색 그림자 와 같이 픽셀 채우기
- Composite : 이전 과정에서 생성된 레이어들을 병합
- 메모리 누수 확인대부분 가비지 컬렉터에 의해 해제되지만, 아래와 같은 경우로 해제가 되지 않는 경우가 있다.
- 잘못 사용한 전역변수
- 해제되지 않은 타이머, 콜백
- 돔 외부에서의 참조
- 잘못 사용한 클로저
- 메모리 누수 : 할당된 자원이 제때 해제되지 않고 메모리에 계속 남아있는 현상
Web Vitals
구글은 WebVitals 라는 필수적인 성능지침을 정의하고 성능 측정의 기준으로 이용함
- FID
- Good: ~ 100ms
- Need Improvement: 100ms ~ 300ms
- Poor: 300ms ~
- 사용자의 행동에 대해 실제로 이벤트 핸들러가 반응하기까지 걸리는 시간
- CLS
- Good: ~ 0.1
- Need Improvement: 0.1 ~ 0.25
- Poor: 0.25 ~
- 시각적인 안정성을 측정하는데 사용되는 기준, 시작위치에서 레이아웃이 얼마나 변화하는지에 대해 측정, 즉 변경전과 변경후의 변화를 측정
- LCP : 주요 콘텐츠의 로딩속도
성능 측정, 어떻게 할 수 있을까?
1. Lighthouse
- 크롬 개발자 도구의 Lighthouse, 구글이 제시한 WebVitals를 기준으로 성능을 측정하고 결과를 제공
2. 크롬 개발자 도구
퍼포먼스 탭 : 직접 원하는 구간을 녹화해서 네트워크 , 렌더링, 메모리 전반에 관해 측정 가능
메모리 탭 : 현재 메모리의 사용률을 확인할 수 있다. 스냅샷을 찍어 각 스냅샷간의 차이를 비교해 어느 항목에서 메모리 누수가 발생했는지 찾을 수 있다.
네트워크탭 : 에셋을 불러오거나 네트워크 요청이 처리되는데 시간이 얼마나 걸리는지 확인 할 수 있다 .
기타
리액트 프로파일러, 모니터링 도구(제니퍼 프론트, 뉴렐릭)
성능 측정 시 고려할 요소들
서비스에 맞는 성능 개선 요소에 집중하기
넷플릭스의 경우, 사용자와의 인터렉션이 많고 스트리밍 서비스 ⇒ 사용자 입력에 따른 반응속도와 메모리가 중요
위키피디아의 경우 , 정보를 제공하는것에 초점이 맞춰져 있기 떄문에 처음 나타나는 속도와 검색하는데 걸리는 시간이 중요
기본 환경에서 측정하기
확장 프로그램과 같이 성능에 영향을 미치는 요소를 배제하기 위해, 크롬 개발자도구의 시크릿 모드를 사용하는걸 추천
타겟 사용자 환경에 맞춰 데이터 수집하기
모바일 이라면 모바일로, 웹이라면 웹으로
요약
- 프론트엔드 성능측정 왜해야 할까?
- 사용자 개선을 통해 서비스의 이익 증대를 위함
- 프론트엔드에서 측정해야 하는 성능은 무엇일까?
- 로딩속도, 렌더링 속도, 메모리 누수
- 성능 측정 어떻게 할 수 있을까.
- 크롬의 성능측정 도구 Lighthouse, 리액트프로파일러, 실시간 모니터링 도구 등
- 성능 측정 시 고려할 것들
- 서비스 성격, 측정 환경, 서비스 타겟
reference