Lighthouse 톺아보기
Lighthouse란?
Lighthouse는 성능, 접근성, SEO 등 사이트에 대한 전반적인 검사를 해주어 이를 바탕으로 사이트의 품질 개선에 도움을 주는 구글 오픈소스 도구이다.
왜 이름이 Lighthouse일까?
개인적인 생각이지만 내가 만드는 사이트가 올바른 방향으로 나아가도록 길잡이 역할을 해주는 도구이기 때문 아닐까 하는 생각이 든다.
Lighthouse 사용법
Lighthouse를 사용하기 위해서는 먼저 Lighthouse의 크롬 확장 프로그램을 설치 후 활성화시켜주어야 한다.
사용방법은 정말 간단하다!!
검사를 원하는 페이지에 접속한 후 위와 같이 개발자 도구 옵션에서 Lighthouse를 선택해준다.
그러면 위와 같은 창이 나오는데, 여기서 검사할 모드와 카테고리, 디바이스 등을 설정할 수 있다.
각 옵션에 대한 설명은 다음과 같다.
Mode
Navigation: Lighthouse의 기본값, 초기 페이지 로딩 시 발생하는 성능 문제 분석
Timespan: 사용자가 정의한 시간동안 발생한 성능 문제 분석
Snapshot: 현재 상태의 성능 문제 분석
Categories
Performance: 웹 페이지의 로딩 과정에서 발생하는 성능 문제 분석
Accessibility: 서비스의 사용자 접근성 문제 분석
Best practices: 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 둔 분석
SEO: 검색 엔진에서 얼마나 잘 크롤링 되고 검색 결과에 표시되는지 분석
Progressive Web App: 서비스 워커와 오프라인 동작, PWA와 관련된 문제 분석
Device
Mobile: 모바일 환경에서 사이트를 테스트
Desktop: 데스크탑 환경에서 사이트를 테스트
원하는 옵션을 선택했다면, 우측 상단에 있는 파란색의 Analyze page load 버튼을 눌러주면 자동으로 검사를 진행한다.
Lighthouse 측정 지표
Lighthouse에서는 사이트의 성능을 측정하기 위해 다음과 같은 지표들을 활용한다.
FCP (First Contentful Paint)
사용자가 특정 웹 페이지로 이동했을 때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는데 걸리는 시간
FMP (First Meaningful Paint)
사용자가 페이지를 불러오기 시작하면서 스크롤을 내리지 않은 채로 가장 먼저 볼 수 있는 영역에 존재하는 주요한 콘텐츠를 렌더링하는 데 걸리는 시간
FP (First Paint)
사용자가 페이지를 불러오기 시작하면서 첫 번째 픽셀이 뷰포트에 표시되는데 걸리는 시간
Speed Index
웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간
First CPU Idle
웹 페이지가 최소한으로 상호작용할 수 있는 상태가 될 때까지 걸리는 시간
TTI (Time To Interactive)
웹 페이지가 완전히 상호작용할 수 있을 때까지 걸리는 시간
FID (First Input Delay)
사용자가 웹 사이트와 처음 상호작용할 때부터 브라우저가 실제로 해당 상호작용에 응답할 수 있을 때까지 걸리는 시간
TBT (Total Blocking Time)
웹 페이지가 사용자 입력에 응답하지 못하도록 차단된 총 시간 (로딩 중 메인 스레드가 긴 시간동안 중단되어 응답을 받을 수 없을 정도로 걸린 시간)
LCP (Largest Contentful Paint)
뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더링될 때까지 걸리는 시간
CLS (Cumulative Layout Shift)
사용자가 예상치 못한 레이아웃 이동을 경험하는 것에 대한 점수
Lighthouse 구성 요소
1. Perfomance
Perfomance section에서는 측정 성능을 점수화해서 보여준다.
측정 지표는 하단에 표시되며, 위에 작성했던 지표들의 상세한 결과값이 표시된다.
총 성능 점수는 위 6가지 지표 점수들의 가중 평균으로 계산된다고 한다.
가중치가 더 높은 지표가 전체 성능 점수에 큰 영향을 주게 된다.
See Calculator 부분을 누르면 위와 같은 화면이 뜨는데, 어느 지표를 어느 만큼 줄이면 성능 점수가 얼마나 올라가는지에 대해 상세히 테스트해볼 수도 있다.
2. Treemap
Perfomance 하단에 보면 이런 버튼이 보인다.
클릭하게 되면 다음과 같이 현재 검사한 뷰의 Treemap을 볼 수 있다.
Treemap은 bundle 파일의 전체적인 구조와 차지하는 비율을 분석하여 제공하는 역할을 한다.
3. Diagnostics
Diagnostics은 페이지 실행 관점에서 문제점과 해결 가이드를 제공하여 이를 바탕으로 렌더링 성능을 최적화할 수 있다.
4. Passed Audits
Passed Audits는 현재 페이지에 잘 적용 되어있는 항목들을 보여준다.
SEO 100점 만들기!!
Lighthouse SEO 지표는 페이지가 검색 엔진 순위에 최적화되어있는지 여부를 검사한다.
다음과 같은 항목들을 기반으로 평가한다고 한다.
1. 검색엔진이 컨텐츠를 이해하는지 확인한다.
문서에
<title>요소가 존재하는지 확인문서에
<meta name="description">이 존재하는지 확인문서에 링크에 대한 명확한 텍스트가 있는지 확인
문서에 유효한 언어설정이 있는지 확인
문서에 유효한 표준 링크가 있는지 확인
이미지 요소에 alt 속성이 존재하는지 확인
2. 검색엔진이 페이지에 대해 크롤링하고 색인을 만들 수 있는지 확인한다.
페이지가 http 상태 코드 응답에 성공했는지 확인
페이지가 색인을 만드는 것을 허용했는지 확인
robot.txt가 유효한지 아닌지 확인
문서에서 Plugin을 사용중인지 확인
3. 페이지를 모바일 친화적으로 만들 수 있는지 확인한다.
<meta name="viewport"> 태그의 content 속성에 width나 initial-scale을 포함하고 있는지 확인
문서에서 유저가 읽기에 선명한 폰트 크기를 사용했는지 확인 (Device 설정이 Moblie로 체크된 경우 확인)
탭을 하기 위한 면접이나 탭과 탭 사이의 간격이 적절한지 확인 (Device 설정이 Moblie로 체크된 경우 확인)
이런 포인트들을 잘 지켜준다면 누구나 SEO 평가에서 100점을 받을 수 있다 💯
참고해야 할 점은, 검사하는 디바이스 성능에 따라 Lighthouse 성능 점수가 차이가 있을 수 있다고 한다. 너무 맹신하지는 말고, 참고 지표 정도로만 삼아서 성능 개선에 힘써보자 🔥🔥🔥
