DEV Community

Jaeyoun Nam
Jaeyoun Nam

Posted on

Lighthouse User Flow

Image description

Lighthouse의 설정 맨 왼쪽에 있는 Mode에 대한 설명이다.

Lighthouse's Three Modes

Navigation (default)

single page load의 성능을 측정한다.

Usecase

  • 기본적인 Lighthouse performance score를 측정하려고 할 때
  • Progressive Web App (PWA) 성능 측정
  • 페이지 로딩 직후 접근성 분석

단점

  • 폼 제출 (form submission)이나 single page transition을 측정할 수 없음
  • 페이지 로딩 시에 로딩되지 않는 것들은 측정할 수 없음

Timespan

특정 기간(유저의 인터렉션이 있을때)을 분석한다.

Usecase

  • 인터렉션이 있을 때, 레이아웃 시프트나 자바스크립트 수행시간을 측정
  • 수명이 긴 페이지와 SPA의 경험을 개선할 수 있는 성능 기회 알아보기

단점

  • 전체 점수 제공안함
  • Largest Contentful Paint는 측정 불가
  • 페이지 상태 문제를 분석할 수 없음 (예. no Accessibility category)

Snapshot

Usecase

  • 현재 상태의 페이지를 분석하고자 할 때
  • SPA 또는 복잡한 폼의 깊은 곳의 접근성 이슈를 파악하고자 할 때
  • 상호 작용 뒤에 숨겨진 메뉴 및 UI 요소의 모범 사례를 평가

단점

  • 전체 점수 제공안함
  • 현재 DOM 밖의 이슈는 분석 불가
Ref

[1] https://github.com/GoogleChrome/lighthouse/blob/HEAD/docs/user-flows.md

Top comments (0)