오늘의 인기 글
최근 글
최근 댓글
Today
Total
05-20 00:00
관리 메뉴

우노

[Web] Performance Metric 본문

카테고리 없음

[Web] Performance Metric

운호(Noah) 2023. 7. 11. 13:57

Performance Mertric이란?

  • 시스템이나 소프트웨어의 성능을 측정하고 평가하기 위해 사용되는 지표입니다.
  • 해당 포스팅에선 웹/모바일 페이지 및 웹/모바일 애플리케이션의 Performance Mertric에 대해서 다뤄보겠습니다.

Performance Mertric 종류

  • 웹/모바일 페이지의 UX 성능을 측정하는 지표
    • Core Web Vitals(CLS, FID, LCP), ETC
  • 웹/모바일 애플리케이션의 성능을 측정하는 지표
    • Golden Signals(Latency, Traffic, Errors, Saturation), ETC

Core Web Vitals

  • Core Web Vitals란?
    • Google이 웹/모바일 페이지의 UX 성능을 모니터링하기 위해 가장 중요하다고 제시한 지표의 집합입니다.
  • Core Web Vitals가 중요한 이유?
    • Core Web Vitals는 2021년 5월에 Google PageRank 알고리즘에 통합되었습니다.
    • 따라서, Core Web Vitals를 고려하지 않는다면, 초기 접근성 하락, 사용자 이탈 증가, 수익 손실로 이어질 수 있습니다.
    • 구글이 자체적으로 진행한 연구 결과에 따르면, Core Web Vitals의 기준을 충족한 웹/모바일 페이지의 경우 방문자가 사이트에서 이탈할 가능성이 24% 낮다고 합니다.
  • 성능 지표 종류
    • Largest Contentful Paint(LCP)
    • First Input Delay(FID)
    • Cumulative Layout Shift(CLS)
  • 성능 판별 방법
    • Core Web Vitals은 메트릭 결과값의 75번째 백분위수를 사용하며, 세 가지 메트릭에 대해서 모두 적합한 경우를 권장 목표로 지정하고 있습니다.
  • Core Web Vitals를 경험해볼 수 있는 필드 도구

Largest Contentful Paint(LCP)

  • LCP는 뷰포트 중 가장 큰 요소가 화면에 렌더링될 때 까지의 시간을 의미하는 지표입니다.
    • 뷰포트 : 웹페이지 사용자가 스크롤하지 않고 볼 수 있는 영역
    • 요소 : <main>, <section>, <img>, <svg> 내부의 <image>, <video>, 텍스트 하위 요소 등
  • 성능 판별
    • 2.5초 이하일 경우 좋은 상태이고, 4초 이상일 경우 나쁜 상태입니다.
  • LCP 개선 방법
    • 이미지, 비디오 최적화 (해상도, 압축률, 파일 형식 등)
    • HTML, CSS, JS 최적화 (불필요한 코드 제거 및 압축)
    • Lazy Loading (최소한의 리소스만 먼저 로드한 뒤, 이후 동적으로 로드)
    • Content Delivery Network (사용자의 위치에서 가장 가까운 서버에서 콘텐츠를 제공)

First Input Delay(FID)

  • FID는 브라우저에서 사용자의 첫 액션이 처리되는 시간을 의미하는 지표입니다.
    • 링크, 버튼 클릭, 사용자 지정 JavaScript 기반 콘트롤 사용 등
    • 사용자 환경 별로 다르게 측정되는 지표
  • 성능 판별
    • 100ms 이하일 경우 좋은 상태이고, 300ms 이상일 경우 나쁜 상태입니다.
  • FID 개선 방법
    • 이미지, 비디오 최적화 (해상도, 압축률, 파일 형식 등)
    • HTML, CSS, JS 최적화 (불필요한 코드 제거 및 압축)
    • 장기 실행되는 JavaScript 코드를 더 작은 비동기 작업으로 세분화
    • JavaScript 실행 시 Worker Thread 사용
      • 페이지 랜더링 시, Main Thread는 UI 업데이트와 관련된 작업(CSS 또는 JS 파일 구문 분석 등)을 먼저 진행하는데, 중간에 별도의 JS가 실행되면 Main Thread는 해당 JS를 50ms까지만 실행한 뒤 다시 UI 업데이트를 진행합니다. 따라서, 별도의 JS가 많을수록 페이지 랜더링이 늦어질 수 있습니다.
      • 따라서, UI 업데이트를 제외한 복잡한 계산, 데이터 처리, 파일 다운로드 등의 작업은 메인 스레드와 독립적으로 동작하는 작업 스레드를 통해 병렬로 처리하는게 좋습니다.

Cumulative Layout Shift(CLS)

  • CLS는 웹 페이지에 접근했을 때 갑작스럽게 발생하는 레이아웃 이동의 정도를, ‘합산 이동 거리’라는 개념을 도입해서 만들어낸 지표입니다.
    • 뉴스 기사를 보려고 들어간 웹사이트에서 기사 링크를 클릭하려는 순간 레이아웃이 이동해서 광고가 나타나 기사가 아닌 광고를 클릭하는 경우
    • 합산 이동 거리 : 레이아웃 변화가 발생한 요소의 크기와 이동 거리를 곱한 후, 모든 변화에 대한 값을 합산한 거리
  • 성능 판별
    • 0.1 이하일 경우 좋은 상태이고, 0.25 이상일 경우 나쁜 상태입니다.
  • CLS 개선 방법
    • 이미지와 동영상에 특정 크기 지정
    • 동적으로 주입되는 콘텐츠 지양
    • 폰트 변화를 유발하는 웹 글꼴 지양

기타 성능 지표

  • First Contentful Paint(FCP)
    • 웹 페이지가 로드되기 시작한 시점부터 첫 번째 콘텐츠가 사용자에게 표시되기까지의 시간을 의미합니다.
  • Time To Interactive(TTI)
    • 웹 페이지가 완전히 로드되어 사용자의 모든 입력 및 상호작용을 받을 수 있는 시점까지의 시간을 의미합니다.
  • Total Blocking Time(TBT)
    • 웹 페이지 로딩 과정에서, UI 업데이트와 관련되지 않은 별도의 JavaScript 작업에 메인 스레드가 사용되어 사용자 입력을 처리할 수 있는 JavaScript 실행이 지연되는 총 시간입니다.
    • 메인 스레드는 UI 업데이트와 관련된 작업(CSS 또는 JS 파일 구문 분석 등)을 먼저 진행하므로, 중간에 별도의 JS가 실행되면 메인 스레드는 해당 JS를 50ms까지만 실행한 뒤 다시 UI 업데이트를 진행합니다. 따라서, 별도의 JS가 많을수록 사용자 입력 JS 처리가 늦어질 수 있습니다.

Golden Signals

  • Golden Signals란?
    • 웹 애플리케이션의 성능과 안전성을 측정하는 지표입니다.
    • 다양한 성능 메트릭들 중 가장 필수적인 요소입니다.
    • 애플리케이션의 상태에 대한 개괄적인 정보를 빠르게 확인할 수 있습니다.
  • 성능 지표
    • Latency
      • 의미
        • 요청을 완료하는 데 걸리는 시간입니다.
      • 핵심
        • 성공한 요청과 실패한 요청의 Latency를 모두 고려해야합니다.
        • 요청 실패 시, 오류는 빠르게 제공될 수도 느리게 제공될 수도 있습니다.
        • 빠른 요청이 아닌 가장 느린 요청에 중점을 두는 것이 중요하기 때문에 일반적으로 95번째 백분위수를 사용합니다.
    • Traffic
      • 의미
        • 처리 중인 요청 수입니다.
      • 핵심
        • 일반적으로 웹 서비스에서의 트래픽은 초당 HTTP 요청 또는 페이지로드이며,
        • 백엔드 서비스 또는 공용 API에 대한 트래픽은 초당 API 요청이고,
        • 스토리지 시스템에서의 트래픽은 초당 트랜잭션 또는 초당 검색일 수 있습니다.
    • Errors
      • 의미
        • 실패한 총 요청 수입니다.
      • 핵심
        • 오류의 종류는 다음과 같습니다.
          • 명시적 오류 : HTTP 500 내부 서버 오류
          • 암시적 오류 : HTTP 200 성공 응답을 했으나, 올바른 콘텐츠를 반환하지 않은 경우
          • 사용자 지정 오류 : 응답 시간이 1초로 설정되어 있을 때, 1초를 초과하는 모든 요청
    • Saturation
      • 의미
        • 시스템에서 사용 중인 CPU 리소스 또는 메모리의 양입니다.
        • 보통 백분율로 표시됩니다.
      • 핵심
        • 포화도가 100%에 가까워지면 성능이 저하될 가능성이 높습니다.
        • 포화도가 지속적으로 50%를 유지하면, 사용하지 않는 서비스에 대한 오버프로비저닝으로 인해 필요 없는 비용이 지출 되고 있을 수 있습니다.

참고

Comments