DEVOCEAN

자동화도구, 라이트하우스 개요

구글 라이트하우스 Lighthouse 는 웹 페이지의 품질을 향상시키기 위한 오픈 소스 자동화 도구로 웹사이트의 성능, 접근성, PWA , SEO 등을 평가해주는 도구입니다.

공개 웹페이지나 인증이 필요한 모든 웹페이지에 실행할 수 있습니다. 

기능은 성능, 접근성, 프로그레시브 웹 앱, SEO 등을 평가할 수 있습니다. 평가 결과를 통해 웹사이트의 문제점을 파악하고 개선점을 찾을 수 있습니다. .

실행 방법

lighthouse를 설치

로컬에서 실행하기 위해서는 lighthouse를 설치하고 쉘스크립트에서 실행이 가능합니다.

npm install -g lighthouse
lighthouse <url> 

전용 페이지 사용

https://pagespeed.web.dev/ 페이지에 접속하여 실행합니다.

크롬 개발자 도구

크롬 브라우저를 이용하여 개발자 도구로 Lighthouse를 실행합니다.

사용 방법

사용 방법은 다음과 같습니다.

1. Google Chrome 브라우저를 열고, 평가하고자 하는 웹사이트를 엽니다. (https://a.sktelecom.com/)

2. 브라우저 메뉴에서 "개발자 도구"를 선택합니다. (혹은 웹사이트 오른쪽 클릭하여 검사를 선택합니다.)

3. 개발자 도구의 상단 메뉴에서 "Lighthouse"를 선택합니다.

4. 실행할 평가 항목들을 선택합니다. 모바일인 경우 해상도와 기기를 왼쪽 상단에서 선택합니다.

5. "페이지로드분석" 버튼을 클릭하여 평가를 실행합니다.

6. 평가 결과를 확인합니다. (성능, 접근성, PWA, SEO 등)

평가 항목

성능 항목

• First Contentful Paint (FCP, 첫페인트 측정)

  콘텐츠가 포함된 첫 페인트는 첫 번째 텍스트 또는 이미지가 표시되는 시간을 나타냅니다.

• Largest Contentful Paint (LCP, 최대 랜더링 시간)

  최대 콘텐츠 렌더링 시간은 최대 텍스트 또는 이미지가 표시되는 시간을 나타냅니다.

• Total Blocking Time (TBT 총 차단시간)

  FCP와 상호작용 시간 사이의 모든 시간의 합으로, 작업 지속 시간이 50ms를 넘으면 밀리초 단위로 표현됩니다.

• Cumulative Layout Shift (레이아웃 변경 횟수)

  레이아웃 변경 횟수는 표시 영역 안에 보이는 요소의 이동을 측정합니다.

• Speed Index (SI 속도색인)

  속도 색인은 페이지 콘텐츠가 얼마나 빨리 표시되는지 보여줍니다.

접근성

• 오디오 및 동영상 사용여부, 접근성 항목에 점수를 부여하여 통과 여부를 점수로 표시합니다.

• 접근성 테스트에 이 수치를 사용할 수 있습니다.

• 접근성 점수는 모든 접근성 감사의 가중 평균입니다. 가중치는 axe 사용자 영향 평가를 기반으로 합니다.

• https://developer.chrome.com/docs/lighthouse/accessibility/scoring/

권장사항

• 웹앱의 전반적인 코드 상태를 평가합니다.

• 예) CSP가 XSS 공격에 효과적인지 확인 , 사용된 JavaScript 라이브러리 감지

• https://developer.chrome.com/docs/lighthouse/best-practices/

검색엔진최적화

• 페이지가 기본적인 검색엔진 최적화 권고를 따르는지 확인하는 검사

• https://developer.chrome.com/docs/lighthouse/seo/

PWA

• 프로그레시브 웹 앱 (Progressive Web App.)의 요소를 확인하는 검사

• https://developer.chrome.com/docs/lighthouse/pwa/

평가 예시

에이닷 홈페이지를 이용하여 데스크탑에서의 성능을 측정한 결과입니다. 이 결과는 JSON이나 뷰어로도 볼 수 있어 결과를 공유하는데 유용합니다.

마무리

라이트하우스 자동화 도구는 웹앱이나 웹페이지 성능 측정에 유용한 도구입니다. 성능 벤치마크 테스트할 때 사용하는 것이 유용해 보입니다.

유사한 웹페이지 url 정보만 있다면 같은 테스트 항목의 결과를 비교함으로써 성능, 접근성, 권장사항, 최적화 등의 항목의 상세한 결과까지 비교할 수 있습니다.

데스크톱과 모바일을 해상도에 맞춰 검증할 수 있어 같은 환경조건으로 비교할 수 있는 것도 효과적입니다.

참고

https://developer.chrome.com/docs/lighthouse/overview/