[모던 리액트 딥다이브] 13장 웹페이지의 성능을 측정하는 다양한 방법

애플리케이션에서 확인하기

• create-react-app을 통해 만들어지는 reportWebVitals파일
  • web-vitals라이브러리로 누적 레이아웃 이동, 최초 입력 지연, 최초 콘텐츠풀 페인트, 최대 콘텐츠풀 페인트, 첫 바이트까지의 시간 측정 가능
• create-next-app을 통해 만들어지는 앱의 성능 측정 메서드 NextWebVitalsMetric
  • 핵시 지표 외에도 Next.js에 특화된 사용자 지표 제공
  • Next.js-hydration : 페이지가 서버 사이드에서 렌더링되어 하이드레이션하는 데 걸리는 시간
  • Next.js-route-change-to-render : 페이지가 경로를 변경한 후 페이지를 렌더링을 시작하는 데 걸리는 시간
  • Next.js-render : 경로 변경이 완료된 후 페이지를 렌더링하는 데 걸리는 시간

 

 

구글 라이트하우스

• 구글에서 제공하는 웹 페이지 성능 측정 도구
• 오픈소스로 운영됨
• 핵심 웹 지표뿐만 아니라 접근성, PWA, SEO 등 웹페이지를 둘러싼 다양한 요소들을 측정하고 점검할 수 있음
• 탐색모드
  • 페이지에 접속했을 때부터 페이지 로딩이 완료될 때까지의 성능을 측정하는 모드
  • 페이지를 처음부터 다시 불러와서 페이지 로딩이 끝날 때까지 각각의 지표를 수집함
  • 지표
    • 성능
      • 웹페이지의 성능과 관련된 지표를 확인할 수 있음
      • 핵심 웹 지표인 최초 콘텐츠풀 페인트, 최대 콘텐츠풀 페인트, 누적 레이아웃 이동
      • Time to interactive : 페이지에서 사용자가 완전히 상호작용할 수 있을 때까지 걸리는 시간 측정
      • Speend index : 페이지가 로드되는 동안 콘텐츠가 얼마나 빨리 시각적으로 표시되는지 계산
      • Toatl Blocking Time : 메인 스레드에서 특정 시간 이상 실행되는 작업. 실행되는 긴 작업을 모아서 총 차단 시간을 구함
    • 접근성
      • 웹 접근성 : 장애인 및 고령자 등 신체적으로 불편한 사람들이 일반적인 사용자와 동등하게 웹페이지를 이용할 수 있도록 보장하는 것
    • 권장사항
      • 웹사이트를 개발할 때 고려해야 할 요소들을 얼마나 지키고 있는지 확인
      • 보안, 표준 모드, 최신 라이브러리, 소스 맵 등
      • CSP가 XSS 공격에 효과적인지 확인 (CSP : Content Security Policy, 웹 사이트에서 호출할 수 있는 컨텐츠를 제한하는 정책)
      • 감지된 JavaScript 라이브러리
      • HTTPS 사용
      • 페이지 로드 시 위치정보 권한 요청 방지하기
      • 페이지 로드 시 알림 권한 요청 방지하기
      • 알려진 보안 취약점이 있는 프런트엔드 자바스크립트 라이브러리를 사용하지 않음
      • 사용자가 비밀번호 입력란에 붙여넣을 수 있도록 허용
      • 이미지를 올바른 가로세로 비율로 표시
      • 이미지가 적절한 해상도로 제공됨
      • 페이지에 HTML Doctype 있음
      • 문서 집합을 제대로 정의함
      • 지원 중단 API 사용하지 않기
      • 콘솔에 로그된 브라우저 오류 없음
      • Chrome Devtools의 Issuses 패널에 문제없음
      • 페이지에 유효한 소스 맵이 있음
      • font-display : optional을 사용하는 폰트가 미리 로드됨
    • 검색 엔진 최적화
      • 구글과 같은 검색엔진이 쉽게 웹페이지 정보를 가져가서 공개할 수 있도록 최적화돼 있는지를 확인
  • 기간 모드
    • 실제 웹페이지를 탐색하는 동안 지표 측정
    • 흔적
      • 웹 성능을 추적한 기간을 성능 탭에서 보여줌
      • 상세하게 시간의 흐름에 따라 어떻게 웹페이지가 로딩됐는지 보여줌
    • 트리맵
      • 페이지를 불러올 때 함께 로딩한 모든 리소스를 함께 모아서 볼 수 있는 곳
      • 웹페이지의 전체 자바스크립트 리소스 중 어떠한 파일이 전체 데이터 로딩 중 어느 정도를 차지했는지를 비율로 확인할 수 있음
      • 실제 불러온 데이터의 크기를 확인할 수 있음
      • 로딩한 리소스에서 사용하지 않은 바이트의 크기를 확인할 수 있음
  • 스냅샷
    • 특정 페이지 특정 상태에서 성능 분석할 수 있음

 

 

 

WebPageTest

• 웹사이트 성능을 분석하는 도구로 가장 널리 알려진 도구
• Site Performance : 웹사이트의 성능 분석을 위한 도구
• Core Web Vitals : 웹사이트의 핵심 지표를 확인하기 위한 도구
• Lighthouse : 구글 라이트하우스 도구
• Visual Comparison : 2개 이상의 사이트를 동시에 실행해 시간의 흐름에 따른 로딩 과정을 비교하는 도구
• Traceroute : 네트워크 경로를 확인하는 도구

 

 

 

 

크롬 개발자 도구

• 문제를 더 자세하게 들여다 보기 위해 사용함
• 시크릿 창으로 웹사이트를 여는 것이 좋음
• 성능 통계
  • Insights
    • 성능을 측정한 기간 동안 발생한 이벤트 중 눈여겨봐야 할 내용을 시간의 흐름에 따라 모아서 보여줌
    • 핵심 웹 지표 : FCP, LCP, Dom Content Loaded가 언제 일어났는지 보여줌
    • Performance Measure : User Timing API로 측정한 지표들 확인 가능
    • Long Task
    • Rendering blocking CSS : 렌더링을 막는 CSS 확인 가능
      • 중요하지 않은 스타일이라면 link rel="preload" as "style"로 스타일을 비동기적으로 요청하기
      • 미디어 쿼리를 활용해 디바이스에 필요한 스타일만 불러옴
      • CSS 내부의 띄어쓰기, 줄바꿈 등을 압축해 최대한 크기를 줄임
    • Forced Style recalculation : 스타일 재계산
  • 메인메뉴
    • 성능을 측정한 기간 동안 무슨 일이 일어나는지 확인할 수 있는 다양한 기능 제공
• 성능
  • 메뉴
    • 성능 탭에서 사용할 수 있는 메뉴 확인
  • 요약
    • 측정 기간의 CPU, 네트워크 요청, 스크린숏, 메모리 점유율 등
  • 네트워크
    • 성능 측정 기간 동안에 발생한 모든 네트워크 요청 확인 가능
  • Web vitals
    • 핵심 웹 지표 시점 확인
  • 소요 시간과 기본
    • 시간의 흐름에 따라 메인 스레드의 작업은 어떻게 변화했는지, 자바스크립트 힙 영역은 어떻게 변화하는지 확인