🔦 lighthouse

📍 LightHouse란 ..?

Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다. 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단을 할 수 있습니다.

📍 Lighthouse에 어떤 정보가 있는데?

Lighthouse는 웹 페이지 성능을 측정하여 5가지 항목에 대한 점수를 보여준다

1️⃣ performance

• 성능과 관련된 이슈

2️⃣ accessibility

• 웹의 접근성 을 평가하는 지표

  시각 장애인들도 이미지에 대한 정보를 얻을 수 있게 <img> 태그에 alt 속성이 있는지, 배경색과 텍스트의 대비가 충분한지와 같은 항목을 확인

3️⃣ best practices

• 웹에 대한 표준 모범 사례 를 따르고 있는지 평가하는 지표

  콘솔에 오류가 출력되진 않는지, 사용하지 않는 API를 호출하고 있지는 않는지, HTTPS를 통해 페이지에 접근할 수 있는지 등을 확인

4️⃣ seo

• 검색 엔진에 대해 최적화된 순위 결과를 가지고 있는지 평가하는 지표

  meta 요소가 잘 작성되어 있는지, robots.txt 파일이 유효한지, 컨텐츠를 읽는데 글꼴 크기가 무리가 없는지 등을 고려

5️⃣ pwa (Progressive Web App)

• PWA에서 정의하는 기준에 따라 평가하는 지표

웹을 PWA로 이용하는데 문제가 없는지에 대한 요소를 평가하고 결과는 합격 또는 실패로 나뉨.

📍 성능측정은 어떻게 하는데?

성능 점수는 6가지 점수들의 가중 평균값으로 계산된다.

1️⃣ LCP(Largest Contentful Paint) - 25%

• 가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간

• 보통 중요한 콘텐츠일수록 크기가 크기 때문에, Lighthouse는 LCP 점수에 가장 높은 가중치인 25%를 주어 계산한다.

  ✅ LCP로 간주되는 요소

  • <img> 요소

  • <svg> 안에 있는 <image> 요소

  • <video> 요소

  • background-image 속성의 url()로 로드되는 요소

  • block 레벨 요소 (elements containing text nodes or other inline-level text elements children)

  ✅ LCP의 크기로 간주되려면

  • 일반적으로 뷰포트(viewport) 내에서 사용자에게 표시되는 요소 중 가장 크기가 큰 요소로 결정됨

    
    

2️⃣ TBT(Total Blocking Time) - 30%

• 마우스 클릭 등 사용자 입력에 페이지가 응답하지 못하도록 차단된 총 시간

• FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 측정

  
  

3️⃣ CLS(Cumulative Layout Shift) - 15%

• 사용자가 예상치 못한 레이아웃 이동을 경험하는 것에 대한 점수

• 레이아웃 불안정이 사용자에게 미치는 부정적인 영향에 대해 검사해 볼 수 있음

  ex) 로딩 후 폰트 크기 변경 등

4️⃣ TTI(Time to interactive) - 10%

• 사용자가 페이지와 완전하게 상호작용할 수 있을 때까지 걸리는 시간

5️⃣ FCP(First Contentful Paint) - 10%

• 초기 DOM 콘텐츠를 렌더링하는데 걸리는 시간을 측정

• 첫번째 텍스트 또는 이미지가 표시되는 시간을 가리킴

• FCP 측정 시점을 시작점으로 하는 다른 Metric들이 있기 때문에, 가장 먼저 찍히는 FCP는 다른 항목들의 점수 및 전체 점수에 큰 영향을 줄 수 있음

6️⃣ Speed Index - 10%

• 콘텐츠가 시각적으로 표시되는 진행 속도를 측정

+) FID ( First Input Delay )

• 사용자가 상호 작용을 처음으로 시작하고 브라우저가 응답하여 실제로 이벤트 핸들러를 처리하기까지 걸리는 시간을 의미

• 페이지 응답 성능을 측정하는 항목

• 최초 입력으로 평가 되는 것으로는 클릭, 입력이 있음

📍 LightHouse 사용법

1. Lighthouse 크롬 extension 설치하기

   
   

2. 개발자 도구 켜서 lighthouse 탭으로 이동 후 검사

   
   

https://blog.soomgo.com/blog/website-benchmark-with-lighthouse/

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

https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ko