이전 포스트에서 프론트엔드의 성능 측정 기준과 방법에 대해 알아봤습니다. 이를 통해 현재 최적화를 진행할 React 프로젝트의 전/후 성능 비교를 진행해보겠습니다. 이전 포스트에서 언급했듯이, useMemo, React.memo, useCallback을 사용해 React Component의 불필요한 리렌더링을 방지하는 작업을 통해 성능 최적화를 진행합니다.
최적화 前
PageSpeed Insights
모바일: https://pagespeed.web.dev/analysis/http-ourdepartmentis-site/w8mzfpesb7?form_factor=mobile
데스크탑: https://pagespeed.web.dev/analysis/http-ourdepartmentis-site/w8mzfpesb7?form_factor=desktop
chrome 개발자도구 - Performance
홈 화면에서 녹화를 시작해 특정 포스트를 클릭한 후 다시 홈 화면으로 돌아왔을 때까지 기록 중 그래프가 가장 활성화 된 부분의 성능을 분석했습니다.
최적화 後
임은상