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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay