성능 최적화가 필요한 이유?

성능이 저하되면 사용자가 떠나고 매출이 감소한다.

• 구글의 조사에 따르면 페이지 로딩 시간이 1초에서 3초로 증가 시 사용자의 이탈율이 32% 증가한다고 한다.

⇒ 반대로 생각하면 페이지 로딩 시간을 3초에서 1초로 줄이면 132 ⇒ 100으로 사용자의 이탈율을 25% 감소시키는 효과가 있다.

성능 최적화는 어떻게 이루어지는가?

• 웹 성능은 크게 두 가지 성능으로 나뉜다.

1. 로딩 성능
   1. 서버에 있는 웹 페이지와 페이지에 필요한 기타 리소스를 다운로드 할 때의 성능
2. 렌더링 성능
   1. 다운로드한 리소스로 화면을 그릴 때의 성능

Tools

• Chorme DevTool

  • Network 패널

    

  리소스 로딩을 확인할 수 있다.

  Throttling 테스트 가능

  • Fast 3G - Down 1500kbps, Up 750kbps
  • Slow 3G - Down 780kbps, Up 330kbps
  • Throttling 환경에서 Latency는 대략 20 정도

  

  • 패널의 리소스 클릭 시 주소, 헤더, 응답 등의 자세한 정보 확인 가능

• Performance 패널

  

  • 리소스 로드 뿐 아니라 실행중인 JS 파일들의 스택을 보여주며, 어떤 코드들이 성능을 저하시킬 수 있는지 확인 가능
  • CPU 작업량, 작업 종류
  • 프레임 변화 시 렌더링 결과
  • JS 컴포넌트들의 timings 플레임 차트(React 17 버전 이상은 React DevTools 설치 필요)
  • 작업 당 소모시간 summary

• Lighthouse 패널

구글에서 제공하는 성능 측정 도구, 그 결과를 Web Vitals 라 칭함

• 성능 지표
  • Performance : 성능 총점
  • FCP(First Contentful Paint): Dom 콘텐츠의 첫번째 부분을 렌더링하는데 걸리는 시간 - 10%
  • LCP(Largest Contentful Paint): 가장 큰 이미지 혹은 텍스트가 렌더링될 때의 시간 - 25%
  • TTI(Time to Interactive): 사용자와 상호작용이 가능해지는 시점까지의 시간 - 10%
  • Total Blocking Time(TBT): 사용자의 클릭, 키보드 등의 인풋을 차단하는 시간, FCP와 TTI 사이의 시간을 의미한다. 30%의 가중치
  • Cumulative Layout Shift(CLS): 예기치 못한 레이아웃 이동 등을 측정한 지표. 가령 이미지가 로딩되면서 레이아웃이 이동되는 등 - 15%의 가중치
• 성능 분석 결과
  • 하단에 성능 저하의 문제점과 해결방안을 제시해준다.

React Developer Tools