Google Lighthouse / PageSpeed Insights를 사용해 웹사이트 성능 측정하기

 Google(구글)의 Google Lighthouse (LH) 또는 Google PageSpeed Insights (PSI)를 사용해 웹사이트 성능 테스트할 때, 점수를 해석하고 효과적인 결론을 내리는 방법을 아는 것이 중요합니다. 
Google Lighthouse는 무엇을 측정하나요?
Google Lighthouse는 성능, 접근성, SEO 등 웹사이트 페이지의 품질을 측정하는 오픈 소스 도구입니다. 
Google Lighthouse 사용하기
Google Chrome 브라우저를 통해 Google Lighthouse에 액세스하고 웹사이트를 분석할 수 있습니다.
  • Google Chrome을 엽니다.
  • 테스트하고자 할 웹 페이지에서 마우스를 오른쪽 클릭합니다.
  • 검사를 클릭합니다.
  • 상단 툴바에서 Lighthouse를 클릭합니다.
  • 보고서에 포함하고자 하는 Categories를 선택합니다.
  • 기기를 선택합니다.
  • Generate Report를 클릭합니다.
페이지 URL을 입력하면, Lighthouse가 성능, 접근성, SEO, Google의 모범 사례 준수 수준에 대해 0-100 사이의 페이지 점수를 매깁니다.
  • Performance (성능) : 페이지 로딩 속도 및 개선 방법
  • Accessibility (접근성) : 페이지 접근성(a11y) 개선 기회 확인 (예: 대체 텍스트가 없는 이미지) 
  • Best Practices (모범 사례) : 페이지 URL에 HTTPS 사용 여부 등과 같은 Google의 모범 사례 준수 여부 확인
  • SEO : 웹 검색 결과 순위에 맞게 페이지가 얼마나 잘 최적화되어 있는지 확인
PageSpeed Insights는 어떻게 성능을 측정하나요?
PageSpeed Insights는 Google Lighthouse를 사용해 페이지 로딩 시간을 측정하는 온라인 서비스입니다. 이 도구를 사용해 모바일 및 데스크톱에서 동시에 페이지의 성능을 테스트할 수 있습니다. 
여기에 웹사이트 URL을 입력한 후 Analyze 를 클릭해 PageSpeed Insights 보고서를 생성하세요. 

점수는 페이지 속도에 영향을 미치는 6가지 요소를 기반으로 합니다. 웹사이트에 가장 적합한 측정 항목을 완벽하게 포착하기 위해 각 요소의 가중치가 다르게 적용됩니다. 
다음은 PageSpeed Insights가 고려하는 6가지 요소입니다. (영문)
참고 : 
2021년 5월, Google은 핵심 성능 보고서라 불리는다음  3 가지 새로운 신호를 Google 검색 순위에 추가할 것이라고 발표했습니다. 
Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS) 

자세한 내용을 확인하려면 여기를 클릭하세요. 
성능 점수가 변동하는 이유는 무엇인가요?
짧은 시간 내에 동일한 페이지를 여러 번 테스트하더라도 성능 점수는 최대 10% 까지 달라질 수 있습니다. 로컬 네트워크, CPU 로드 등과 같은 많은 설정이 이러한 변동에 기여할 수 있습니다.
모바일 웹사이트가 Google PageSpeed Insights / Google Lighthouse에서 낮은 점수를 받는 이유는 무엇인가요?
웹사이트 모바일 점수 계산시 Google PageSpeed Insights 및 Google Lighthouse는 모두 저가형 모바일 조건을 시뮬레이션합니다. 보다 구체적으로, 3G 네트워크를 사용해 Moto G4 기기를 시뮬레이션합니다.
이러한 조건은 평균 웹사이트 방문자보다 훨씬 낮습니다. 대부분의 모바일 방문자는 4G 네트워크를 사용하고 있으며, 이는 대부분의 방문자가 Google Lighthouse 또는 PageSpeed Insights가 나타내는 것보다 훨씬 더 나은 성능을 경험한다는 것을 의미합니다. 
데스크톱 및 모바일에서 웹사이트 성능을 개선하려면 어떻게 해야하나요?
  • 스크롤없이 볼 수 있는 부분에 관련 콘텐츠 유지
  • 미디어로 과부하하지 않기
참고 : 
여기를 클릭해 속도를 위해 웹 사이트를 최적화하는 웹 디자인의 기본 사항에 대한 자세한 내용을 확인하세요.

도움말을 통해 문제를 해결하지 못하셨나요?
1:1 문의를 남겨주시면 빠르고 정확하게 도와드릴게요.

1대1 문의 바로가기