성능 측정 및 최적화 공부

리소스 관련

성능 개선 과정

• 렌더링 최적화 : 리소스 로딩 이후 주요 렌더링 경로 분석, React Profiler를 통해 개선
• 메모리 관리 : 사용자의 텍스트 입력, 마우스 클릭과 같은 상호 작용 간에 발생하는 메모리 누수를 찾아 개선

속도의 기준

1. 네트워크 환경

• 네트워크 환경에 따라 달라 질 수 있다.
• 답답함을 느낄 환경
  • 모바일, 해외 로밍(제한된 네트워크 대역폭)
  • 최초 방문자(브라우저나 서버의 캐시를 제공받을 수 없는 환경)

2. 상호 작용 가능 시점(TTI : Time to Interactive)

• 상호작용이 원활 하지 않는 경우 : 콘텐츠가 눈에 보이지만 클릭이 되지 않거나 스크롤이 더디게 움직이는 경우
• TTI(Time to Interactive) : 레이아웃이 안정되고, 주요 웹 글꼴이 보이고, 메인 스레드가 사용자 입력을 처리하기에 충분한 시점
• TTI를 앞당겨야 사용자 경험이 좋아짐

3. 콘텐츠의 우선 순위(Hero element)

• 웹 페이지마다 방문 목적을 당성하기 위한 영역을 먼저 표시

측정 방법

• 크롬 개발자 도구
  • Network, Performance 탭

1. 네트워크 대역폭 제한 : 3G(Fast 3G)

2. 캐시 비활성화(Disable cache)

3. 타임라인 측정

• 시간의 흐름에 따른 리소스 로딩 정보를 분석할 수 있음

4. 프로파일링

• 크롬 개발자도구 Performance 탭
• 네트워크 탭은 리소스 기준인 반면 퍼포먼스 탭에선 브라우저가 시간의 흐름에 따라 수행한 작업에 초점을 맞춰짐
  • 특정 시점에 브라우저가 어떤 일을 했는지 자세히 들여다 볼 수 있음

고찰

라이브러리나 번들링, 코드 스플리팅, 레이지 로딩 등 신경써야 될 부분이 많았는데
이런 부분을 전혀 고려하지 않고 개발하고 있었다.
하지만 지금 이것 까지 고려하면서 공부하기엔 속도가 나지 않을 것이고 과연 꼭 필요한 최적화인지 우리의 사용자는 누구인지도 고민해볼 필요가 있을 것 같다.

렌더링 관련

• 렌더링 : 브라우저가 HTML 문서로 부터 사용자가 인지하고 상호작용할 수 있는 화면을 만들어내는 과정

속도의 기준

• 프레임 속도

  • 60fps, 프레임당 16.7ms 이하이면 버벅임을 느낌

• 렌더링 과정
  

  • 자바스크립트로 스타일을 변경하는 구문이 있는지 확인 하고 있다면 DOM요소에 반영 후 CSS 스타일 적용

측정 방법

Profiling

크롬 브라우저의 Performance 탭

• 버튼 따위를 클릭해서 다시 렌더링 되는 시점과 그 시간을 찾기에 React Profiler처럼 정리되어서 나오진 않았다.

크롬 브라우저의 React Profiler 탭

• 리액트의 컴포넌트 단위로 나와서 보기 더 보기 좋았다.

참고 문헌

• 마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩
• 마이리얼트립 웹사이트 성능 측정 및 최적화 Part 2. 렌더링