13. 웹페이지의 성능을 측정하는 다양한 방법

영근·2024년 4월 20일
0

[월간CS] 모던 리액트 Deep Dive

목록 보기
12/12

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

create-react-app

// reportWebVitals.ts
import { ReportHandler } from "web-vitals";

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

reportWebVitals();
  • 웹에서 성능을 측정하기 위한 함수
  • 각각 누적 레이아웃 이동(CLS), 최초 입력 지연(FID), 최초 콘텐트풀 페인트(FCP), 첫 바이트까지의 시간(TTFB)을 측정하는 용도로 사용된다.
  • web-vitals 라이브러리는 PerformanceObserver 라는 API를 사용한다.
  • 결과를 기록하고 싶다면 sendBeacon API(소량의 분석용 데이터 전송)나 fetch API 등을 활용해 서버 혹은 GA로 보낼 수 있다.

create-next-app

  • 성능 측정을 할 수 있는 NextWebVitalsMetric을 제공한다.
  • _app 페이지에 코드를 추가해 사용할 수 있다.
import { AppProps, NextWebVitalsMetric } from "next/app";

export function reportWebVitals(metric: NextWebVitalMetric) {
  // 예약어로 지정된 함수
  console.log(metric);
}

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;
  • Next.js에 특화된 사용자 지표도 제공한다.
    • Next.js-hydration : 페이지가 서버 사이드에서 렌더링되어 하이드레이션하는 데 걸린 시간
    • Next.js-route-change-to-render : 페이지가 경로를 변경한 후 페이지를 렌더링 시작하는 데 걸리는 시간
    • Next.js-render : 경로 변경이 완료된 후 페이지를 렌더링하는 데 걸린 시간

13.2 구글 라이트하우스

탐색 모드

  • 성능
    • FCP, LCP, CLS 외에도 3가지의 추가적인 지표가 있다.
    • Time to Interactive
      • 페이지에서 사용자가 완전히 상호작용할 수 있을 때까지 걸리는 시간 측정
      • 메인 스레드가 하는 JS 작업을 최소화하고, 전체적인 JS 실행 속도를 높여야 한다.
    • Speed Index
      • 페이지가 로드되는 동안 콘텐츠가 얼마나 빨리 시각적으로 표시되는 지를 계산
      • 브라우저에서 로드되는 페이지를 실시간 캡처 -> Speedline 라이브러리를 사용해 캡쳐된 이미지 분석해 계산
    • Total Blocking Time
      • 메인 스레드에서 특정 시간 이상 실행되는 작업이 수행될 때마다 메인 스레드가 차단된 것으로 간주
      • 50ms 이상이 소요되는 긴 작업을 모아 total blocking time이라 한다.
      • FCP 부터 상호작용까지 걸리는 시간(TTI) 사이의 작업만 대상이 된다.
  • 접근성
    • 웹 접근성. 즉 신체적으로 불편한 사람들이 일반적인 사용자와 동등하게 웹페이지를 이용할 수 있도록 보정하는 것
  • 권장사항
    • 개발할 때 고려헤야 할 요소를 얼마나 지키고 있는지 확인할 수 있다.
    • CSP가 XSS 공격에 효과적인지 확인
      • XSS(Cross Site Scripting) : 개발자가 아닌 제3자가 삽입한 스크립트를 통해 공격하는 기법
      • CSP(Content Security Policy) : 웹 사이트에서 호출할 수 있는 콘텐츠를 제한하는 정책
    • 감지된 JS 라이브러리 : 페이지에서 감지되는 JS 라이브러리
    • HTTPS 사용 : HTTP 대신 보안이 더 강력한 HTTPS를 사용하는 지 확인
    • 페이지 로드 시 위치정보 권한 요청 방지하기
      • 사용자 동의 없이 window.navigator.geolocation.getCurrentPosition(), window.navigator.geolocation.watchPosition()을 실행하는 지 확인한다.
      • 반드시 사용자의 액션 이후에 실행되어야 한다.
    • 페이지 로드 시 알림 권한 요청 방지하기
      • 사용자 동의 없이 Notification.requestPermission()을 실행하는지 확인한다.
      • 반드시 사용자 액션이 있을 때만 호출해야 한다.
    • 알려진 보안 취약점이 있는 FE JS 라이브러리를 사용하지 않음
    • 사용자가 비밀번호 입력란에 붙여넣을 수 있도록 허용
    • 이미지를 올바른 가로세로 비율로 표시
    • 이미지가 적절한 해상도로 제공됨
    • 페이지에 HTML Doctype이 있음 : 없으면 호환 모드로 렌더링되어 불필요한 작업이 일어남
    • 문자 집합을 제대로 정의함 : 문자가 어떻게 인코딩되어 있는지 지정(meta charset="utf-8")
    • 지원 중단 API 사용하지 않기
    • 콘솔에 로그된 브라우저 오류 없음
    • Chrome Devtools의 issues 패널에 문제 없음
    • 페이지에 유효한 소스 맵이 있음
    • font-display: optional을 사용하는 폰트가 미리 로드됨
  • 검색엔진 최적화
    • 검색엔진이 쉽게 웹페이지 정보를 가져가 공개할 수 있도록 최적화되어 있는가
    • 크롤링하기 쉬운 문서, 유효한 robots.txt, 이미지에 링크와 설명 문자 존재, <meta>, <title> 등

기간 모드

실제 웹페이지를 탐색하는 동안 지표를 측정하는 것

  • 흔적(View Trace)
    • 웹 성능을 추적한 기간을 성능 탭에서 보여준다.
  • 트리맵
    • 페이지를 불러올 때 함께 로딩한 모든 리소스를 함께 모아서 보는 곳
    • 웹 페이지 전체의 자바스크립트 리소스 중 어떤 파일이 전체 데이터 로딩 중 어느 정도를 차지했는지를 비율로 확인할 수 있다.
    • 로딩한 리소스에서 사용하지 않은 바이트의 크기를 확인할 수 있다.

스냅샷

  • 탐색 모드와 유사하나 현재 페이지 상태를 기준으로 분석한다.

13.3 WebPageTest

웹사이트 성능을 분석하는 도구

  • 어느 정도 거리가 먼 서버를 기준으로 테스트하기 떄문에 크롬 개발자 도구에서 테스트 했을 때보다 성능 지표가 좋지 않을 가능성이 높다

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

Performance Summary

  • 테스트 완료 시 전체적인 결과를 요약해서 볼 수 있다.
  • 총 3번 이뤄지므로 3개의 서로 다른 결과를 확인할 수 있다.
  • 구성
    • Opportunities & Experiments
      • Is it Quick
      • Is it Usable
      • Is it Resilient
    • Observed Metrics : 최초 바이트까징의 시간, 최초 콘텐츠풀 페인트 등 측정할 수 있는 다양한 시간 지표
    • Individual Runs : 3번의 각 실행별로 어떤 결과를 보여주는지 확인

Opportunities & Experiments

  • 최초 바이트까지의 시간(TTFB) 점검
  • 렌더링을 블로킹하는 자바스크립트가 있는지 확인한다.
  • 렌더링을 블로킹하는 CSS가 있는지 확인한다.
  • 최초 콘텐츠풀 페인트가 2.5초 이내인지 확인한다.
  • 주요 영역 내에 게으른 로딩이 되는 이미지가 있는지 확인한다. : 주요영역 내에서는 빠른 로딩이 좋다.
  • 주요 영역 외에 게으른 로딩 이미지를 확인한다. : 뷰포트 이외라면 지연 로딩하는 것이 좋다.
  • 문자 노출을 지연시키는 커스텀 폰트를 확인한다.
  • 제3자 호스트에서 폰트를 불러오는지 확인한다.
  • HTTP 리다이렉트되는 리소스가 없어야한다.
  • 최초로 다운로드받은 HTML과 최종 결과물 HTML 사이에 크기 차이가 적어야 한다.

  • Is it Usable
    • 이미지 비율 부재로 인한 레이아웃 이동 가능성 여부를 확인한다.
    • 메인 스레드가 장시간 막혀있는지 확인한다.
    • meta : viewport가 적절하게 삽입되어 있어야 한다.(<meta name="viewport" content="width=device-width, initial-scale=1"/>)
    • 접근성 이슈가 있는지 확인한다.
    • 최초로 다운로드 받은 HTML과 최종 결과물 HTML 사이에 크기 차이가 적어야 한다.
  • Is it Resilient
    • 렌더링을 막는 제3자 라이브러리 요청이 없어야 한다.
    • Snyk에서 검출된 보안 위협이 없어야 한다.
    • 모든 요청은 HTTPS를 거쳐야 한다.
    • 최초로 다운로드한 HTML과 최종 결과물 HTML 사이에 크기 차이가 적어야 한다.(JS에 의존성이 크면 안된다)

### Filmstrip 웹사이트를 필름을 보는 것처럼 시간의 흐름에 따라 어떻게 웹사이트가 그려졌는지, 이 때 어떤 리소스가 불러와졌는지 볼 수 있다.

Details

Filmstrip에서 보여준 내용을 자세하게 보여주는 영역


Web Vitals

최대 콘텐츠풀 페인트(LCP), 누적 레이아웃 이동(CLS), 총 블로킹 시간(TBT)에 대한 자세한 내용을 확인할 수 있다.


Optimizations

리소스들이 얼마나 최적화돼 있는지 나타낸다.

  • Keep-Alive 설정으로 서버와의 연결을 계속 유지하고 있는지
  • Gzip으로 리소스를 압축하고 있는지
  • 이미지를 적절히 압축했는지
  • Progressive JPEG로 JPEG를 렌더링하고 있는지(progressive JPEG : 완벽한 픽셀로 위->아래 로딩이 나닌, 전체 이미지를 블러처리 했다가 서서히 또렷해지는 기법)
  • 리소스 캐시 정책이 올바르게 수집돼 있는지
  • 리소스가 CDN(Content Delivery Network)를 거치고 있는지

Content

웹사이트에서 제공하는 콘텐츠, 에셋을 종류별로 묶어 통게를 보여준다.


Domains

Content 메뉴에서 보여준 애셋들이 어느 도메인에서 왔는지를 도메인별로 묶어서 확인할 수 있고, 크기도 확인할 수 있다.


Console.log

사용자가 웹페이지에 접속했을 때 console.log로 무엇이 기록됐는지 확인할 수 있다.


Detected Technologies

개발하는 데 사용된 기술을 확인할 수 있다.


Main-thread Processing

메인 스레드가 어떤 작업을 처리했는지 확인할 수 있다.


Lighthouse Report

구글 라이트하우스 리포트를 확인할 수 있다.


기타

WebPageTest 외부에서 제공하는 서비스

  • Image Analysis : 해당 웹사이트에 어떠한 이미지가 있는지, 이 이미지들이 최적화된다면 리소스를 어느정도 아낄 수 있는지 보여준다.
  • Request Map : 요청이 어떻게 일어나고 있는지를 시각화 도구로 보여준다.
  • Data Cost : 이 웹사이트를 로딩했을 때 실제로 얼마나 가격이 드는지 확인할 수 있다.
  • Security Score : 보안 취약점에 대해 알려준다.

13.4 크롬 개발자 도구

성능 통계

  • 반드시 뷰포트를 실제 사용자가 보는 크기만큼 설정해야 한다.

Insights

성능을 측정하는 기간 동안 발생한 이벤트 중 눈여겨봐야할 내용을 시간순으로 보여준다.

  • 핵심 웹 지표 : FCP, LCP, Dom Content Loaded가 언제 일어났는지 보여준다.
  • Performance Measure : User Timing API로 측정한 지표들을 확인할 수 있다.
  • Long Task : 메인 스레드에서 실행되는 데 오랜 시간으로 분류된 긴 작업
  • Render blocking CSS : 렌더링을 막는 CSS
    • 중요하지 않은 스타일이라면 link rel="preload" as="style"로 비동기적으로 불러온다.
    • 미디어 쿼리를 사용해 디바이스에 필요한 스타일만 불러온다.
    • CSS 내부 띄어쓰기, 줄바꿈 등을 압축해 크기를 줄인다.
  • Forced Style recalculation : 이미 스타일이 한 번 계산된 이후 어떠한 이유로 스타일이 다시 계산되는 작업이 강제로 발생했음을 의미한다.

메인 메뉴

성능을 측정하는 기간 동안 무슨 일이 일어나는지 확인할 수 있는 다양한 기능을 제공한다.

  • 시간의 흐름에 따라 화면이 얼마나 그려졌는지 점검할 수 있다.

  • Layout Shifts : 레이아웃 이동이 일어날 경우 기록된다.

  • Network : 성능 측정 기간 동안 발생한 네트워크 요청을 모두 확인할 수 있다.

  • Renderer : 렌더러가 어떤 작업을 하고 있는지 확인할 수 있다.

  • Timing : User Timing API와 관련된 기록이 남아 있다.

    const mark = 'marA'
window.performance.mark(mark)
// 측정하고 싶은 작업 시작

window.performance.measure('여기 적은 메시지가 Timings에 나타남', mark)

성능

요약

측정 기간의 CPU, 네트워크 요청, 스크린샷, 메모리 점유율 등을 요약해서 볼 수 있다.

네트워크

성능 측정 기간 동안에 발생한 모든 네트워크 요청을 확인할 수 있다.

Web vitals

핵심 웹 지표 시점을 확인할 수 있는 영역

소요 시간과 기본

시간의 흐름에 따라 메인 스레드 작업은 어떻게 이뤄졌는지, 자바스크립트 힙 영역은 어떻게 변화하는지 등을 확인할 수 있다.

profile
영근
Undefined JS developer
이전 포스트

12. 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표

0개의 댓글