--- title: '13장 웹페이지의 성능을 측정하는 다양한 방법' created: 2024-05-28 12:00 updated: 2024-05-28 12:00 tags: - 'Frontend' - 'Study' - 'Book' --- # 중요한 부분 정리 ## 애플리케이션에서 확인하기 - create-react-app - reportWebVitals 함수를 통해 웹에서 성능을 측정할 수 있다. - PerformanceObserver라는 API를 사용하므로 이를 지원하지 않는 브라우저에서는 web-vitals의 도움을 받아 성능을 측정하기 어렵다 - create-next-app - NextWebVitalsMetric을 통해 웹에서 성능을 측정할 수 있다. - Next.js에 특화된 지표를 제공하는데, 하이드레션에 걸린 시간 그리고 페이지 경로를 변경한 후 렌더링에 걸린 시간 마지막으로 경로 변경이 완료된 후 페이지를 렌더링하는 데 걸린 시간이다 ## 구글 라이트하우스 구글 라이트하우스는 구글에서 제공하는 웹 페이지 성능 측정 도구로, 오픈소스로 운영되고 있다. - 브라우저 확장 프로그램 설치 - 크롬 개발자 도구 - CLI 등을 통해 구글 라이트하우스를 사용할 수 있다. ### 탐색모드 일반적으로 페이지에 접속했을 때부터 페이지 로딩이 완료될 때까지 성능을 측정하는 모드이다. 이 모드로 측정을 시작하면 페이지를 처음부터 다시 불러와 페이지 로딩이 끝날 때까지 각각의 지표를 수집한다. ### 스냅샷 스냅샷 모드는 탐색 모드와 매우 유사하지만 현재 페이지 상태를 기준으로 분석하는 점이 다르다. 즉, 현재 상태에서 검색엔진의 최적화, 접근성, 성능 등을 분석할 수 있다. ## WebPageTest - WebPageTest는 웹사이트 성능을 분석하는 도구로 가장 널리 알려진 도구다. 무료 기능도 있지만 유료로 제공하는 분석도 있을 만큼 웹사이트 성능을 분석할 수 있는 심도 있는 기능이 많다. - WebPageTest에서 제공하는 분석 도구는 크게 다섯 가지로 나뉜다. - Site Performance: 웹사이트의 성능 분석을 위한 도구 - Core Web Vitals: 웹사이트의 핵심 웹 지표를 확인하기 위한 도구 - Lighthouse: 구글 라이트하우스 도구 - Visual Comparison: 2개 이상의 사이트를 동시에 실행해 시간의 흐름에 따른 로딩 과정을 비교하는 도구 - Traceroute: 네트워크 경로를 확인하는 도구 ## 크롬 개발자 도구 - 개발된 지 오래된 웹사이트이거나, 혹은 개발자와 운영자가 다른 경우, 혹은 번들만으로는 정확한 문제가 짐작이 되지 않을 경우 문제를 더 자세하게 들여다 볼 필요가 있다. 이때 사용할 수 있는 도구가 바로 크롬 개발자 도구다. ## 정리 - 성능을 개선하고 애플리케이션에서 병목 지점을 찾는 것은 개발하는 것 이상으로 어려운 일이며, 반복적으로 꾸준히 탐색해야만 할 수 있는 업무다. - 여러 연구 결과가 증명하듯 단순히 성능을 0.1초 개선한 것만으로도 사용자에게는 긍정적인 사용자 경험을 안겨줄 수 있다는 사실을 상기하면서 스스로 개발한 웹사이트에 좀 더 큰 책임감을 가지고 연구해 보기를 권한다. ## 참고자료 - https://github.com/GoogleChrome/lighthouse-ci