웹사이트 성능, 무엇으로 분석할까?

1. 크롬 개발자 도구

1. Network 패널 : 네트워크 트래픽을 통해, 리소스의 크기와 로드 시점 등을 확인
2. Performance 패널  : 웹페이지 로드 시 실행되는 모든 작업을 차트로 제공
3. Lighthouse 패널  : 성능 측정 및 개선 방향 제시
4. Coverage 패널  : 렌더링 과정에서 어떤 코드가 실행되었는지 보여준다.
   (특정 파일에서 극히 일부만 코드가 실행되었다면, 불필요한 코드가 많이 포함되었다고 판단한다)

2. webpack-bundle-analyzer
: webpack을 통해 번들링된 파일이 어떤 lib를 담고 있는지 보여주며, 불필요한 코드 위치와 전체에서 어느 정도의 비중을 차지하는지 알려준다.

 

3. React Developer Tool 의 Profiler 패널

: 렌더링 발생 횟수, 렌더링된 컴포넌트, 소요 시간을 플레임 차트로 제공

 

 

참고) 분석 후, 개선을 위해 사용한 것
- Squoosh : 이미지 압축 도구 (fotmat, size를 변경할 수 있음)
- PurgeCSS : 사용하지 않는 CSS를 제거함