Lighthouse를 통한 웹 페이지 성능 측정

Lighthouse란?

구글에서 만든 웹사이트의 성능을 측정하고 개선 방향을 제시해주는 자동화 툴이다.
웹사이트의 성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 최적화해야 하는지 알 수 있다.

Lighthouse 사용법

Chrome에서 설치를 클릭하면 설치를 진행하며, 설치가 완료된 경우 F12를 통해 Chrome 개발자 도구를 연다.

상단 탭에서 Lighthouse를 클릭하여 성능 측정을 위한 Lighthouse 탭을 열 수 있다.

Chrome 개발자 도구 - Lightouse

 

이미지와 같이 모드, 기기, 카테고리를 선택할 수 있는데 각 메뉴에 대한 설명은 아래와 같다.

모드

• 탐색: 여러 페이지 전환이나 사용자 행동을 시뮬레이션 하며 성능 및 기타 지표를 분석하는 모드
• 기간: 일정 기간 동안 모니터링하면서 성능을 측정하는 모드
• 스냅샷: 특정 시점의 페이지 렌더링 상태를 한 번에 캡쳐해서 성능을 분석하는 모드, 페이지 전환은 고려하지 않음

기기

• 모바일
  • 모바일 환경(저성능 CPU, 제한된 네트워크 속도 등)을 가정하여 페이지를 로드하고 분석
  • 반응형 디자인, 모바일 최적화를 점검할 때 중요
• 데스크톱 환경
  • 데스크톱 환경(고성능 CPU, 유선 또는 빠른 Wi-Fi 등)을 가정하여 페이지를 로드하고 분석
  • PC에서의 성능, 레이아웃, 인터랙션을 확인

카테고리

• 성능: 페이지 로드 속도, 초기 렌더링 시간, 상호작용 가능 시점, 이미지 최적화 등과 관련된 항목을 분석
• 접근성: 시각, 청각, 운동 능력 등이 제한적인 사용자를 포함해 모든 사용자가 페이지를 원활히 이용할 수 있는지 평가
• 권장사항: 웹 표준 및 보안, 최신 기술 적용 여부, 일반적인 웹 개발 모범 사례 등을 점검(예: HTTPS 사용, 안전하지 않은 리소스 호출)
• 검색엔진 최적화: 검색 엔진이 페이지를 올바르게 인덱싱하고, 검색 결과에서 잘 노출될 수 있도록 구성되어 있는지 확인

각 설정을 완료한 후 페이지 로드 분석 버튼을 클릭하여 성능 측정에 대한 Lighthouse 보고서를 생성할 수 있다.

성능 분석 결과

모든 카테고리를 선택하고 참여했던 프로젝트 중 하나인 야밤의금오톡에서 Lighthouse를 실행한 결과는 다음과 같다.

야밤의금오톡 Lighthouse 분석 결과

 

각 카테고리 별 주요 측정항목은 다음과 같다.

성능

• FCP(First Contentful Paint)
  • 페이지가 최초로 텍스트나 이미지 등 의미 있는 콘텐츠를 렌더링하는 데 걸리는 시간
  • PC기준: 0~0.9초(빠름), 0.9~1.6초(중간), 1.6 초과(느림)
  • 모바일기준: 0~1.8초(빠름), 1.8~3초(중간), 1.6 초과(느림)
• Largest Contentful Paint (LCP)
  • 페이지 상에서 가장 큰 콘텐츠 요소(큰 배너 이미지, 큰 텍스트 블록 등)가 로드되어 화면에 표시되는 시점
  • PC기준: 0~1.2초(빠름), 1.2~2.4초(중간), 2.4 초과(느림)
  • 모바일기준: 0~2.5초(빠름), 2.5~4초(중간), 4 초과(느림)
• Total Blocking Time (TBT)
  • FCP와 상호작용 시간 사이의 모든 시간의 합
  • PC기준: 0~150밀리초(빠름), 150~300밀리초(중간), 300 이상(느림) 
  • 모바일기준: 0~200밀리초(빠름), 200~400밀리초(중간), 400 이상(느림)
• Cumulative Layout Shift (CLS)
  • 페이지 로드 중 레이아웃이 예기치 않게 이동하는 정도를 정량화한 값으로, 시각적 안정성을 평가
  • 0~0.1 이하(좋음), 0.1~0.25(중간), 0.25 이상(나쁨)
• SI(Speed Index)
  • 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도 
  • PC기준: 0~1.3초(빠름), 1.3~2.3초(중간), 2.3 초과(느림)
  • 모바일기준: 0~3.4초(빠름), 3.4~5.8초(중간), 5.8 초과(느림)

접근성

모든 접근성 감사의 가중 평균이며, 가중치는 사용자 영향 평가를 기반으로 한다.

 

각 접근 감사의 결과는 성공 혹은 실패로 나오며, 페이지 내에 접근성 감사를 부분적으로 통과하는 경우 점수를 받을 수 없다.

ex) 일부 버튼에는 액세스 가능한 이름이 있지만, 다른 버튼에는 액세스 가능한 이름이 없는 경우

 

접근 감사의 항목은 여기서 자세히 확인할 수 있다.

Lighthouse 접근성 점수  |  Chrome for Developers

 

권장 사항

웹 표준 및 보안, 최신 기술 적용 여부, 일반적인 웹 개발 모범 사례 등을 점검(예: HTTPS 사용, 안전하지 않은 리소스 호출)

• CSP가 XSS 공격에 효과적인지
• HTTPS 사용 여부
• 서드 파티 쿠키 방지
• 지원 중단 API 사용하지 않기
• 사용자가 입력란에 붙여넣기를 할 수 있는지 여부
• 페이지 로드 시 권한 요청 방지하기
• 기타 등등..

검색엔진 최적화

검색 순위에 영향을 끼치는 모든 감사의 가중 평균

• 페이지의 색인 생성이 차단되지 않음
• 문서에 <title> 태그가 있음
• 문서에 메타 설명이 있음
• 페이지에 성공적인 HTTP 상태 코드가 있음
• 링크에 설명 텍스트가 있음
• 링크를 크롤링할 수 있음
• 이미지 요소에 alt 속성이 있음
• 문서에 유효한 hreflang 있음

성능 개선 가이드

각 카테고리 별 성능 개선을 위한 가이드를 다음과 같이 확인할 수 있다.

Lighthouse 성능 개선 가이드

 

하나의 요소를 클릭해보면 다음과 같이 상세 가이드와 개선 시 기대효과도 확인할 수 있다.

Lighthouse 성능 개선 상세 가이드

 

이렇게 Lighthouse를 잘 활용하면 성능 최적화에 엄청난 도움이 될 수 있다.

 

참고 문헌

• https://developer.chrome.com/docs/lighthouse/overview?hl=ko