Lighthouse란, Lighthouse 사용하기, Lighthouse 분석해보기

 

Lighthouse란?

사이트를 검사하여 성능 측정을 할 수 있는 도구이고, 개선책도 제공해주는 자동화 툴이다. 

 

- 구글에서 개발한 오픈소스이고, 성능, 접근성, PWA, SEO 등을 검사 한다. 

- Chorme DevTools, CLI, 노드 모듈 등 다양한 경로를 통해 사용 가능하다. 

- 검사 결과에 따른 리포트를 생성해주어, 점수가 낮은 지표를 한눈에 알아볼 수 있다. 

 

 

1. 구글 개발자 도구에서 lighthouse 탭에서 검사 가능

2. Node CLI 에서 실행하기

 

- 전역 모듈로 설치

npm install -g lighthouse

- 검사 실행

lighthouse <url>

- 모든 옵션 보는 명령어

lighthouse --help

---

👇 크롬에서 본 백준 페이지의 Ligthhouse 👇

 

👇 크롬에서 본 정육각 페이지의 Ligthhouse 👇

 

✻ Lighthouse 분석 결과 항목

 

1. performance = 웹 성능 측정

- 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지

- 화면에 표시된 후 사용자와 상호작용하기까지 얼마나 걸리는지

- 화면에 불안정한 요소의 유무  

 

2. accessibility = 웹 접근성을 잘 갖추고 있는지 확인

- 대체 텍스트를 잘 작성했는지

- 배경색과 콘텐츠 색상의 대비가 충분한지

- 적절한 WAI-ARIA 속성을 사용했는지

 

3. best practice = 웹 표준 모범 사례를 잘 따르고 있는지 확인

- HTTPS 프로토콜 사용하는지

- 콘솔 창에 오류가 표시되는지

 

4. SEO = 검색 엔진 최적화가 잘 되어있는지 확인

- 애플리케이션의 robots.txt가 유효한지

- <meta> 요소는 잘 작성되어 있는지 

- 텍스트 크기가 읽기에 무리가 없는지 

 

5. PWA (progressive web app) = 모바일 애플리케이션으로도 잘 작동하는지 확인

- 앱 아이콘을 제공하는지

- 스플래시 화면이 있는지

- 화면 크기에 따라 콘텐츠를 적절하게 배치했는지

 

---

 

👇 정육각 페이지의 Ligthhouse performance 측정 메트릭 👇

 

1. First Contentful Paint (FCP) 

사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫번째 부분을 렌더링하는데 걸리는 시간을 측정한다. (사용자가 감지하는 페이지의 로딩 속도를 측정)

 

FCP가 1.8초 이하이면 UX 좋음.

 

 

2. Largest Contentful Paint (LCP)

뷰포트를 차지하는 가장 큰 콘텐츠의 렌더 시간을 측정

 

LCP 0~2.5 fast

LCP 2.5~4 moderate

LCP 4~ slow

 

 

3. Speed Index

페이지를 로드하는 동안 얼마나 빨리 콘텐츠가 시각적으로 표시되는지 측정

 

0~3.4 fast

3.4~5.8 moderate

5.8~ slow

 

4. Time to interactive (TTI)

페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간 측정

 

0~3.8 fast

3.9~7.3 moderate

7.3~ slow

 

 

5. Total Blocking Time (TBT)

페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정

(FCP, TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록해서 TBT 측정한다. )

 

 

6. Cumulative Layout Shift (CLS)

사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지 수치화한 지표

 

---

 

👇 백준 페이지의 Performance의 Opportunities 항목 👇

 

 

👇 정육각 페이지의 Performance의 Opportunities 항목 👇

 

가장 많은 시간이 소요된 항목 

 

Reduce unused JavaScript

 

=> 사용하지 않는 자바스크립트 파일은 페이지를 렌더링하는데 필요하지 않은 리소스이다. 더이상 사용되지 않기 때문에 쓸모없는 리소스는 정리해야한다. 

 

페이지를 더 빨리 로드하기 위해서는 필수 리소스인 HTML 코드만 렌더링 해야한다. 

 

"unused JavaScript"란?

1. 중요하지 않은 JS - 웹 페이지의 상단의 콘텐츠에 사용되지 않지만 다른 곳에서 사용될 수 있다. 

2. 사용하지 않는 JS - 더 이상 사용하지 않거나, 일시적으로 사용된 JS 코드

 

소셜 공유 버튼과 같은 서드 파티 코드나 플러그인 또는 페이지 빌더로 인해 발생한다. 

 

문제 해결 방법

 

Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.

사용하지 않는 JavaScript를 줄이고 네트워크 활동에 사용되는 바이트를 줄이는 데 필요할 때까지 스크립트 로드를 연기한다. 

 

 

- 웹사이트가 WordPress에서 실행 중인 경우 플러그인을 사용해서 사용하지 않는 JS를 제거나 비활성화 할 수 있다. 

https://ko.wordpress.org/plugins/wp-asset-clean-up/

 

- Chorme 개발자 도구로 사용하지 않는 JS 감지하고 불필요한 파일 삭제하기

[Chorme 개발자 도구] - More tools - Coverage

 

 

- [Chorme 개발자 도구] - Lighthouse

 

 

사용하지 않은 코드를 제거하는데 도움을 주는 빌드 도구 알아보기

https://bundlers.tooling.report/

 

(코드 분할, 미사용 코드 제거, 사용하지 않은 코드 제거)

 

---

Serve images in next-gen formats

 

차세대 형식의 이미지 제공

 

문제 해결 방법

Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.

WebP 또는 AVIF 이미지 포맷 사용하기

=> WebP 및 AVIF와 같은 이미지 형식은 종종 PNG 또는 JPEG보다 더 나은 압축을 제공하므로 더 빠른 다운로드와 더 적은 데이터 소비를 의미한다. 

 

WebP 및 AVIF는 JPEG, PNG 형식보다 용량을 감소시킬 수 있는 새롭게 등장한 이미지 포맷이다. 

최근에 등장한 포맷이기 때문에, 아직 모든 브라우저에서 호환되지 않는다는 단점이 있다. 

 

하지만, 각 브라우저의 이미지 호환성을 파악해서 이미지 파일을 분기할 필요없이 HTML의 <picture>태그*를 이용하면 된다. 

 

* img 요소의 다중 이미지 리소스를 위한 컨테이너로 사용

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

➥ 만약 접속한 브라우저에서 <source>태그 내의 srcset에 정의한 WebP 포맷을 지원하지 않는다면 해당 <source> 태그는 무시된다. 

 

 

👇 명령줄을 사용해서 WebP 이미지 만들기 👇

https://web.dev/codelab-serve-images-webp/

 

 

 

 

 

참고)

https://sitechecker.pro/site-audit-issues/remove-unused-javascript/

 

https://web.dev/uses-webp-images/?utm_source=lighthouse&utm_medium=devtools

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓