우노
[Web] Performance Metric 본문
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%를 유지하면, 사용하지 않는 서비스에 대한 오버프로비저닝으로 인해 필요 없는 비용이 지출 되고 있을 수 있습니다.
- 의미
- Latency
참고
- https://web.dev/i18n/ko/vitals/
- https://github.com/GoogleChromeLabs/web-vitals-report
- https://web.dev/user-centric-performance-metrics/#how-metrics-are-measured
- https://newrelic.com/kr/blog/best-practices/monitoring-golden-signals
- https://www.blameless.com/blog/4-sre-golden-signals-what-they-are-and-why-they-matter
- https://www.ascentkorea.com/core-web-vitals/
- https://www.datadoghq.com/blog/core-web-vitals-monitoring-datadog-rum-synthetics/
- https://web.dev/optimize-lcp/
- https://web.dev/optimize-fid/
- https://web.dev/optimize-cls/
- https://gtmetrix.com/largest-contentful-paint.html
- https://product.webpagetest.org/core-web-vitals/first-input-delay
- https://digiligo.com/blog/cumulative-layout-shift/
Comments