📐 웹사이트 성능 측정 도구 Lighthouse

Lighthouse란? 
Google에서 제공하는 웹 성능 진단 도구로 성능(Performance), 접근성(Accessibility), 권장사항(Best Practices), 검색엔진 최적화(SEO) 등 4가지 항목에 대해 점수를 평가한다. 

웹사이트의 전반적인 품질을 평가하는 데 있어 Lighthouse 점수는 실질적인 기준이 된다. 성능, UX, SEO 등 다양한 요소에 영향을 주는 만큼 점수 개선을 위한 지속적인 관리와 최적화가 중요하다. 
 

크롬 브라우저의 DevTools(F12) 안의 Lighthouse 탭을 통해 분석을 실행할 수 있다. 모바일과 데스크톱 환경 모두에서 테스트가 가능하다. 
 

* 항목별 개선 포인트 
 

1. 성능 (Performance)
 

• 이미지 크기 최적화 
  원본 이미지의 크기(해상도, 용량)가 불필요하게 크다면 줄이고 이미지 포맷을 WebP나 AVIF 같은 최신 포맷으로 변환해 최적화한다. (참고)
   
• 렌더링 차단 리소스
  외부 스크립트에는 strategy 속성을 설정하고 필요한 시점에만 JavaScript를 로드하도록 지연 로딩 방식을 적용한다.
   
• 불필요한 JavaScript 로딩
  사용하지 않는 JS chunk는 빌드 시 포함하지 않도록 하고 무거운 라이브러리를 사용할 때에는 기능 대비 성능 비용을 충분히 고려한다.
   

2. 접근성 (Accessibility)
 

• form 요소에 label이 없음
  label 태그를 명시적으로 연결하거나 aria-label을 활용한다.
   
• 이미지에 alt 속성이 없음
  모든 이미지 태그에 의미에 맞는 alt 텍스트를 제공한다.
   
• 색상 대비가 낮음
  최소 4:5:1 이상의 명도 대비를 확보하도록 색상 조합을 정한다.
   
• 키보드로 접근이 불가능한 UI
  <button>, <a>, <input> 등의 HTML 요소를 사용하고 tabindex, role, aria-* 속성등을 통해 키보드 포커스를 관리한다.
   

3. 권장사항 (Best Practice)
 

• HTTPS가 아닌 페이지
  SSL 인증서를 적용하여 HTTPS를 기본으로 사용하고 HTTP 요청은 HTTPS로 리다이렉트 처리한다.
   
• 취약한 JS API 사용
  보안에 취약하거나 비효율적인 JavaScript API를 사용하지 않는다. [document.write(), eval() 등]
   

4. 검색엔진 최적화 (SEO)
 

• meta description 누락
  페이지별로 내용을 명확하게 요약한 150자~160자 내외의 문장을 meta태그로 추가한다.
   
• 링크에 anchor 텍스트가 부족한 경우
  링크에는 명확한 목적이 드러나는 텍스트를 포함한다. 버튼이나 이미지 링크의 경우 aria-label 또는 alt 속성을 활용한다.
   
• robots.txt, sitemap이 누락
  루트 경로에 robots.txt와 sitemap.xml파일을 생성하여 검색 엔진이 사이트 구조를 정확히 파악할 수 있도록 한다.
   

• 모바일 친화성 부족
  반응형 디자인을 적용하고 meta viewport를 설정하여 다양한 화면 크기에서 콘텐츠가 잘 보이도록 한다.
   

  ---

   

  

    100점을 목표로!