🔦Lighthouse란?
- 사이트를 검사하여 성능 측정을 할 수 있는 도구
- 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴
- 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있음
- 검사할 페이지의 url을 Lighthouse에 전달하면 해당 페이지에 대한 검사 실행하고 리포트 생성
1. Lighthouse 실행하기
1) chrome 개발자 도구에서 실행하기
(1) 크롬에서 검사하고 싶은 페이지의 url 입력
(2) 개발자 도구 열기
(3) Lighthouse 탭 클릭
(4) Analyze page load 클릭
(5) 30~60초 검사 실행 후 리포트 생성
2) Node CLI에서 실행하기
- Lighthouse를 설치
npm install -g lighthouse - 검사 실행
lighthouse <url> - 옵션 보기(optional)
lighthouse --help
2. Lighthouse 결과 분석하기
1) Performance
웹 성능 측정
- 화면에 콘텐츠 표시되는데 시간 얼마나 걸리나?
- 상호작용하기까지 얼마나 걸리나? 등
2) Accessibility
웹 접근성 측정
- 대체 텍스트 잘 작성했는지?
- 배경색과 콘텐츠 색상 대비 충분한지?
- ARIA 속성 적절하게 사용했는지?
3) Best Practices
웹 표준 측정
- HTTP 프로토콜 사용하는지?
- 콘솔창에 오류가 표시되지는 않는지?
4) SEO
검색 엔진 최적화
- robots.txt가 유효한가?
- 메타 테그는 잘 작성되어 있는가?
5) PWA(Progressive Web App)
웹 사이트가 모바일에서도 잘 작동하는가?
- 앱 아이콘을 제공하는가?
- 화면 크기에 맞체 콘텐츠를 적절하게 배치했는지?
3. Lighthouse의 Performance 측정 메트릭
Lighthouse가 생성한 리포트를 보면 하단에 주요 Metrics가 안내되어 있음
1) First Contentful Paint(FCP)
성능 지표 추적 메트릭
페이지 로딩속도 측정 지표
얼마나 빠르게 첫 번째 컨텐츠를 랜더링하는가?
브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는게 걸리는 시간
우수한 사용자 경험 제공하려면 FCP :1.8초 이하
2) Largest Contentful Paint
페이지 로딩속도 측정 지표
얼마나 빠르게 가장 큰 콘텐츠를 랜더링하는가?
주요콘텐츠가 유저에게 보이는 시간까지를 가늠
3) Speed Index
성능 지표 추적 메트릭
얼마나 빠르게 컨텐츠가 시각적으로 표시되는가?
4) Time to interactive
TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정
- 페이지에 FCP로 측정된 컨텐츠가 표시되어야 합니다.
- 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록됩니다.
- 페이지가 0.05초안에 사용자의 상호작용에 응답합니다.
5) Total Blocking Time
페이지가 유저와 상호작용하기까지의 막혀있는 시간
6) Cumulative Layout Shift
컨텐츠 불안정성을 수치화한 지표
4. 개선 방향 잡기
Opportunities 항목을 확인하면 각 메트릭별 문제를 확인할 수 있음
Hello world!