웹 애플리케이션의 성능 지표 및 측정 (측정 도구)

 1. 웹 애플리케이션의 주요 성능 지표 이해
   - 웹 애플리케이션의 효율성을 파악할 수 있는 다양한 성능 지표가 있습니다. 다음은 가장 중요한 몇 가지 지표입니다.

      1) Time to First Byte (TTFB) : 사용자의 요청부터 서버로부터 첫 번째 데이터 바이트를 수신하는 데 걸리는 시간을 측정합니다. 서버 응답 시간을 평가하는 중요한 지표입니다.

      2) First Contentful Paint (FCP) : FCP는 내비게이션부터 브라우저가 DOM에서 첫 번째 콘텐츠 조각을 렌더링하는 순간까지 걸리는 시간을 측정합니다.

      3) Largest Contentful Paint (LCP) : 이 지표는 뷰포트에서 가장 큰 콘텐츠 요소가 렌더링되는 시간을 보고합니다.
 
      4) Cumulative Layout Shift (CLS) : 페이지가 아직 다운로드되는 동안 웹 페이지 요소의 예상치 못한 이동을 측정합니다.

      5) First Input Delay (FID) : 사용자가 사이트와 처음 상호 작용한 시간부터 브라우저가 해당 상호 작용에 응답할 수 있는 시간을 측정합니다.

      6) Speed Index : 페이지의 콘텐츠가 시각적으로 표시되는 속도를 측정합니다.

      7) Total Blocking Time (TBT) : 메인 스레드가 입력 응답성을 방해하는 데 충분히 오랜 시간 동안 차단된 총 시간을 측정합니다.

 

 2. Lighthouse, PageSpeed Insights, WebPageTest 측정 도구 사용

   1) Lighthouse : Google의 오픈소스 자동화 도구로, 웹 페이지의 성능, 접근성, 프로그레시브 웹 앱, SEO 등을 감사합니다. Chrome DevTools, 명령줄, Node 모듈로 사용할 수 있습니다.

   2) PageSpeed Insights : 이 도구는 웹 페이지의 콘텐츠를 분석하고 해당 페이지를 더 빠르게 만들기 위한 제안을 생성합니다. 이 도구는 Lighthouse를 핵심으로 사용하며 Chrome 사용자 경험 보고서(CrUX)에서 추가적인 통찰력을 제공합니다.

   3) WebPageTest : 워터폴 차트와 스크린샷을 포함한 자세한 속도 및 최적화 테스트를 제공하는 무료 도구입니다. 여러 위치, 다양한 기기 및 브라우저에서 테스트할 수 있습니다.

 

 3. 성능 지표와 측정 도구

지표	설명	도구
Time to First Byte (TTFB)	사용자 요청부터 서버로부터 첫 번째 데이터 바이트를 수신하는 데 걸리는 시간을 측정합니다.	Lighthouse, PageSpeed Insights, WebPageTest
First Contentful Paint (FCP)	내비게이션부터 브라우저가 DOM에서 첫 번째 콘텐츠 조각을 렌더링하는 순간까지 걸리는 시간을 측정합니다.	Lighthouse, PageSpeed Insights, WebPageTest
Largest Contentful Paint (LCP)	뷰포트에서 가장 큰 콘텐츠 요소가 렌더링되는 시간을 보고합니다.	Lighthouse, PageSpeed Insights, WebPageTest
Cumulative Layout Shift (CLS)	페이지가 아직 다운로드되는 동안 웹 페이지 요소의 예상치 못한 이동을 측정합니다.	Lighthouse, PageSpeed Insights, WebPageTest
First Input Delay (FID)	사용자가 사이트와 처음 상호 작용한 시간부터 브라우저가 해당 상호 작용에 응답할 수 있는 시간을 측정합니다.	Lighthouse, PageSpeed Insights, WebPageTest
Speed Index	페이지의 콘텐츠가 시각적으로 표시되는 속도를 측정합니다.	Lighthouse, PageSpeed Insights, WebPageTest
Total Blocking Time (TBT)	메인 스레드가 입력 응답성을 방해하는 데 충분히 오랜 시간 동안 차단된 총 시간을 측정합니다.	Lighthouse, PageSpeed Insights, WebPageTest

 

  4. 일반적으로 알려진 성능 지표 기준치

지표	좋은 성능	합리적인 성능	개선이 필요한 성능
Time to First Byte (TTFB)	200ms 이하	200ms ~ 500ms	500ms 이상
First Contentful Paint (FCP)	1초 이하	1초 ~ 3초	3초 이상
Largest Contentful Paint (LCP)	2.5초 이하	2.5초 ~ 4초	4초 이상
Cumulative Layout Shift (CLS)	0.1 이하	0.1 ~ 0.25	0.25 이상
First Input Delay (FID)	100ms 이하	100ms ~ 300ms	300ms 이상
Speed Index	1000 이하	1000 ~ 3000	3000 이상
Total Blocking Time (TBT)	300ms 이하	300ms ~ 600ms	600ms 이상

 

 

 

 - reference : 

https://wikidocs.net/197785