Lighthouse 리포트 해석 (Performance, SEO 등)

Lighthouse 소개  |  Chrome for Developers

 

Lighthouse 란

 

- Google에서 제공하는 웹 성능 분석 도구

- 웹 페이지를 실제 사용자처럼 로딩하면서 성능 수치화

 

카테고리	설명
Performance	웹 페이지의 로딩 속도 등 실제 성능을 측정
Best practices	Best practices를 따라 개발되었는지 확인
Accessibility	접근성 확인. 폰트 사이즈, 메뉴간 간격 등을 측정
Progressive Web App (PWA)	웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크
SEO	Search Engine Optimization의 약자로 검색 엔진 수집 최적화 측정

 

Lighthouse 리포트 해석

 

색상 기준

- 0 ~ 49 = 빨강 (Poor)

- 50 ~ 89 = 노랑 (Needs improvement)

- 90 ~ 100 = 초록 (Good)

 

지표 해석

• Performance

공식 문서에 따르면, Performance 점수는 여러 지표들의 가중 평균값이다

실제 내 보고서에서는 아래와 같은 결과가 나왔다.

 

- First Contentful Paint(FCP)

사용자가 페이지로 이동한 시점 ~ 콘텐츠의 일부가 화면에 렌더링되는 시점

콘텐츠란 텍스트, 이미지, <svg> 등을 의미

일반적으로 1.8초 이하는 좋은 FCP 점수이고 3.0초 이상은 개선 필요

 

- Largest Contentful Paint(LCP)

사용자가 페이지로 이동한 시점 ~ 가장 큰 콘텐츠의 렌더링 시간

2.5초 이하면 좋은 점수라고 할 수 있음

 

- Total Blocking Time(TBT)

페이지가 사용자 입력에 반응하지 못하는 시간 (기본 스레드에서 50밀리초 이상의 작업이 있는 동안 차단됨)

10버전 기준 가장 많은 가중치를 가지고 있는 지표

평균 모방리 하드웨어서 200ms 미만

 

- Cumulative Layout Shift(CLS)

페이지 레이아웃 변경 점수 (참고)

0.1 미만이면 양호

 

- Speed Index

화면이 얼마나 빨리 시각적으로 채워지느냐

구글에서는 데스크톱 기준 1.3초 이하를 이상적으로 판단하고 있음

 

• Accessibility

누구나 해당 사이트를 사용할 수 있는 가에 대한 점수

 

이 또한 여러 지표들의 가중 평균이다.

Performance 점수와 달리 여러 지표들은 통과 / 실패 중 하나이다.

공식 문서에서 자세한 내용 확인 가능하다.

 

• Best Pratices

해당 사이트가 표준을 잘 지켰는가에 대한 점수

 

HTTPS 사용 여부

보안 취약 API 사용 여부

오래된/위험한 라이브러리 사용 여부

콘솔 에러/경고 있는지

이미지·리소스 최적화 여부

브라우저 호환성 문제

 

등을 확인한다.

 

• SEO

검색 엔진이 해당 사이트를 잘 이해할 수 있는가

 

<title> 적절히 작성?

<meta description> 있는지?

<h1> 구조 잘 잡혔는지?

링크 텍스트 의미 있는지?

크롤링 가능한 페이지인지?

모바일 친화적인지?

 

등을 확인한다.