사이트 성능 측정 검사 도구 Google Lighthouse

google lighthouse

Lighthouse란?

Google Lighthouse는 웹 페이지의 품질을 감사하고 개선하기 위한 오픈 소스 도구입니다. 웹 사이트의 성능, 접근성, 모범 사례 및 검색 엔진 최적화(SEO) 메트릭을 측정하기 위한 일련의 자동화된 테스트를 제공합니다.

Lighthouse를 사용하여 사용자 경험과 웹사이트 성능에 영향을 미치는 문제를 식별할 수 있습니다. Lighthouse에서 제공하는 제안을 처리함으로써 웹사이트 소유자는 웹사이트의 로딩 속도, 접근성 및 전반적인 품질을 개선하여 사용자 참여도를 높이고 검색 엔진 순위를 높이고 궁극적으로 더 많은 비즈니스 성공을 거둘 수 있습니다.

Google Lighthouse는 웹 페이지의 품질을 검사하고 개선하는 오픈 소스 도구입니다. 이 도구는 웹 사이트의 성능, 접근성, 최적의 사례 및 검색 엔진 최적화 (SEO) 지표를 측정하기 위한 일련의 자동화된 테스트를 제공합니다.

Lighthouse는 각 범주별 점수와 각 영역에서 페이지 성능을 향상시키기 위한 구체적인 제안이 포함된 보고서를 생성합니다. 이 도구는 브라우저 확장 프로그램, 명령 줄 도구 및 Google Chrome 개발자 도구의 일부로 사용할 수 있습니다.

웹 개발자와 웹 사이트 소유자는 Lighthouse를 사용하여 사용자 경험과 웹 사이트 성능에 영향을 미치는 문제를 식별할 수 있습니다. Lighthouse에서 제공하는 제안을 해결함으로써 웹 사이트 소유자는 웹 사이트의 로딩 속도, 접근성 및 전반적인 품질을 개선할 수 있으며, 이는 더 높은 사용자 참여, 더 나은 검색 엔진 순위 및 궁극적으로 더 많은 비즈니스 성과를 가져올 수 있습니다.

---

Lighthouse  실행하기

Lighthouse는 각 범주에 대한 점수와 각 영역에서 페이지 성능을 개선하기 위한 구체적인 제안이 포함된 보고서를 생성합니다.  명령어  및 Chrome 개발자 도구에서 사용할 수 있습니다.

Chrome 개발자 도구에서 실행하기

1. 크롬에서 검사하고 싶은 페이지의 url을 입력합니다.
2. 개발자 도구를 엽니다.
3. lighthouse 탭을 클릭합니다.

Node CLI에서 실행하기

Lighthouse를 설치합니다. 이때-g 옵션을 사용하여 Lighthouse를 전역 모듈로 설치하는 것이 좋습니다.

npm install -g lighthouse

다음의 명령어로 검사를 실행할 수 있습니다.

npm install -g lighthouse

다음의 명령어로 모든 옵션을 볼 수 있습니다.

lighthouse --help

---

Opportunities 항목

Lighthouse Performance의 Opportunities 항목 17가지

 

항목		설명
Eliminate render-blocking resources	렌더링 차단 자원 제거	렌더링 시간을 단축시키기 위해 DOM 트리 구성 시 필요한 리소스 외에도 불필요한 리소스가 렌더링되는 것을 방지합니다. 리소스 로드 방식을 변경하거나, 인라인 스타일을 적용하거나, 필요한 경우 리소스를 비동기적으로 로드하여 이 문제를 해결할 수 있습니다.
Properly size images	이미지 적절한 크기 사용	이미지가 실제로 표시되는 크기에 맞게 크기를 조정하여 필요 이상으로 많은 데이터를 다운로드하는 것을 방지합니다.
Defer offscreen images	화면 밖 이미지 지연 로딩	스크롤해야 보이는 이미지는 로드를 지연시켜 초기 페이지 로드 속도를 향상시킵니다.
Minify CSS	CSS 최소화	CSS 파일의 크기를 줄여 로드 속도를 높입니다. 주석, 공백, 들여쓰기 등의 불필요한 요소를 제거합니다.
Minify JavaScript	JavaScript 최소화	JavaScript 파일의 크기를 줄여 로드 속도를 높입니다. 주석, 공백, 들여쓰기 등의 불필요한 요소를 제거합니다.
Remove unused CSS	사용하지 않는 CSS 제거	사용되지 않는 CSS를 제거하여 파일 크기를 줄이고 로드 속도를 높입니다.
Efficiently encode images	이미지 효율적으로 인코딩	이미지를 최적화하여 파일 크기를 줄이고 로드 속도를 높입니다.
Serve images in modern formats	최신 포맷으로 이미지 제공	최신 이미지 형식인 WebP, JPEG 2000, JPEG XR 등의 형식을 사용하여 파일 크기를 줄이고 로드 속도를 높입니다.
Enable text compression	텍스트 압축 사용	Gzip, Brotli 등의 압축 알고리즘을 사용하여 텍스트 파일의 크기를 줄여 로드 속도를 높입니다.
Preconnect to required origins	필요한 출처 사전 연결	필요한 리소스가 있는 서버와 미리 연결을 설정하여 로드 시간을 줄입니다.
Reduce server response times (TTFB)	서버 응답 시간 감소	서버 응답 시간을 줄여 초기 페이지 로드 시간을 단축시킵니다.
Avoid multiple page redirects	페이지 리디렉션 횟수 최소화	페이지 리다이렉션 횟수를 최소화하여 초기 페이지 로드 속도를 향상시킵니다.
Preload key requests	필수 요청 사전 로딩	필요한 리소스를 미리 로드하여 초기 페이지 로드 시간을 단축시킵니다.
Use video formats for animated content	동적 콘텐츠에 비디오 포맷 사용	애니메이션 콘텐츠를 표시할 때 GIF 대신 비디오 형식을 사용하면 더 작은 파일 크기와 더 나은 성능을 얻을 수 있습니다.
Reduce the impact of third-party code	타사 코드의 영향 최소화	제3자 코드가 로드되는 것을 지연시켜 페이지의 성능 저하를 방지합니다.
Avoid non-composited animations	합성되지 않은 애니메이션 방지	합성된 애니메이션을 사용하면 더 나은 성능을 얻을 수 있습니다.
Lazy load third-party resources with facades	퍼사드를 사용하여 타사 리소스 늦게 로딩	facades 효과로 페이지 로드 후에도 제3자 리소스가 로드되지 않아 페이지의 성능이 저하되지 않도록 합니다.

---

직접 사용해보기

네이버 메인화면에서 라이트하우스를 실행하였을 경우.

라이트하우스 네이버 검사시 최다 소요시간 3가지

측정했던 페이지(네이버)에서 가장 많은 시간이 소요된 항목 3가지

• Properly size images, Serve images in modern formats, Eliminate render-blocking resources

---

1. Properly size images

• 이미지가 실제로 표시되는 크기에 맞게 크기를 조정하여 필요 이상으로 많은 데이터를 다운로드하는 것을 방지합니다.
• 이미지 크기를 올바르게 조정하면 페이지 로딩 속도를 개선할 수 있습니다. 예를 들어, 이미지가 표시될 크기보다 큰 경우 이미지를 로드하는 데 더 많은 시간이 걸리며, 이는 페이지 로딩 속도를 늦추고 사용자 경험을 저하시킵니다. 따라서 Google Lighthouse는 이미지 크기를 최적화하고 적절한 크기로 조정하여 페이지 로딩 속도를 향상시키는 것을 권장합니다.

Properly size images

Properly size images - Chrome Developers

---

2. Serve images in modern formats

• 최신 이미지 형식인 WebP, JPEG 2000, JPEG XR 등의 형식을 사용하여 압축률이 높기 때문에 이미지 파일 크기가 작아지고, 이는 이미지를 다운로드하는 데 필요한 시간을 줄이고 페이지 로딩 속도를 높이는 데 도움이 됩니다.
• AVIF 및 WebP는 이전 JPEG 및 PNG에 비해 우수한 압축 및 품질 특성을 가진 이미지 형식입니다. JPEG 또는 PNG가 아닌 이러한 형식으로 이미지를 인코딩하면 더 빠르게 로드되고 셀룰러 데이터를 덜 소비합니다.

Serve images in modern formats

Serve images in modern formats - Chrome Developers

---

3. Eliminate render-blocking resources

• 렌더링 시간을 단축시키기 위해 DOM 트리 구성 시 필요한 리소스 외에도 불필요한 리소스가 렌더링되는 것을 방지합니다. 리소스 로드 방식을 변경하거나, 인라인 스타일을 적용하거나, 필요한 경우 리소스를 비동기적으로 로드하여 이 문제를 해결할 수 있습니다.
• 렌더링 차단 리소스는 페이지 로딩 속도를 늦추는 주요 원인 중 하나입니다. 이러한 리소스는 페이지가 완전히 로드되기 전에 브라우저가 표시되는 컨텐츠를 차단합니다. Google Lighthouse는 HTML, CSS 및 JavaScript 파일을 최적화하고 압축하여 리소스 크기를 줄이는 것을 권장합니다. 또한, 리소스를 브라우저 캐시에 저장하면 사용자가 다시 방문할 때 더 빠르게 로드될 수 있습니다.

render-blocking-resources 

Eliminate render-blocking resources - Chrome Developers