웹 성능 측정 툴 Lighthouse의 기본 용어 정리

BinaryWoo_dev·2023년 4월 24일
0

웹 성능

목록 보기
1/2

서론

Performance

성능 카테고리 (6Metrics)

First Contentful Paint (FCP)

: 초기 DOM 콘텐츠를 렌더링하는데 걸리는 시간을 측정한다. 즉, 첫 번째 텍스트 또는 이미지가 표시되는 시간을 가리킨다.
FCP 측정 시점을 시작점으로 하는 다른 Metric들이 있기 때문에, 가장 먼저 찍히는 FCP는 다른 항목들의 점수 및 전체 점수에 큰 영향을 줄 수 있다.

Speed Index (SI)

: 콘텐츠가 시각적으로 표시되는 진행속도를 측정 한다. Reload 되는 페이지의 비디오를 캡쳐하여 프레임 간의 속도를 계산한다.

  • SI 점수를 높이는 방법
    • 메인 스레드 작업 최소화
    • JavaScript 실행 시간 단축
    • Font 가 로드되는 중에도 텍스트가 계속 표시 되도록 하기

Largest Contentful Paint (LCP)

: 가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간이다. 보통 중요한 콘텐츠일수록 크기가 크기 때문에 Lighthouse는 LCP 점수에 가장 높은 가중치인 25%를 부여하여 계산한다.

  • LCP로 간주되는 요소
    • <img> 요소
    • <svg>안에 있는 <image>요소
    • <video> 요소
    • backgorund-image 속성의 url()로 로드되는 요소
    • block 레벨 요소 (div 등)
  • LCP의 크기로 간주되려면 ?
    → 일반적으로 뷰포트(viewport) 내에서 사용자에게 표시되는 요소 중 가장 크기가 큰 요소로 결정된다.

Time To Interactive (TTI)

: 사용자가 페이지와 완전하게 상호작용할 수 있을 때까지 걸리는 시간이다. 단순히 시각적으로 보여지는 것 뿐만 아니라, 사용자가 페이지와 소통이 가능한 상태까지 렌더링 되어야 한다. 예를 들어, 이벤트 헨들러가 가장 눈에 띄는 페이지 요소에 등록되는 시점부터 사용자와 사이트가 간의 상호작용이 가능해졌다고 볼 수 있다.

  • TTI 점수를 높이는 방법
    • Javascript 실행 시간 최소화

Total Blocking Time (TBT)

: 마우스 클릭, 화면 탭, 또는 키보드 누름과 같은 사용자 입력에 페이지가 응답하지 못하도록 차단된 총 시간을 의미한다. FCP와 TTI 사이의 모든 Long Task 블로킹 타임을 추가하여 계산된다.

  • TBT 점수를 높이는 방법 (=Long Tasks의 근본적인 원인을 제거하는 방법)
    • 불필요한 JavaScript 로드, 실행 코드 제거
    • 코드 분할을 통해 JavaScript payload 감소시키기
    • 사용하지 않는 코드 삭제

Cumulative Layout Shift (CLS)

: 사용자가 예상치 못한 레이아웃 이동을 경험하는 것에 대한 점수이다. 레이아웃 불안정이 사용자에게 미치는 부정적인 영향에 대해 검사해볼 수 있다. (step 1 → step 2 단계의 레이아웃 전환 시, 기존 레이아웃이 유지되지 않고 변형되었을 떄. (예시))

profile
매일 0.1%씩 성장하는 Junior Web Front-end Developer 💻🔥

0개의 댓글