[ React ] 웹사이트 성능을 점검하는 필수 도구 Lighthouse

웹 페이지를 만들고 나면, "이 사이트 잘 만들 걸까?, "사용자들이 사용하는데 느리진 않은가?"라는 의문들이 들 수 있다.

이때 Lighthouse를 통해 성능 체크가 가능하다.

 

 

Lighthouse란?

---

Lighthouse는 웹 애플리케이션의 성능, 접근성, SEO, PWA(Progressive Web App)등을 자동으로 분석해 주는 Google에서 제공하는 성능 진단 도구이다.

 

 

Lighthouse를 사용하는 이유?

---

웹페이지의 아래와 같은 항목들을 자동으로 분석해 점수와 개선 방법을 알려준다:

• Performance (성능)
• Accessibility (접근성)
• Best Practices (웹 표준)
• SEO (검색엔진 최적화)
• PWA (Progressive Web App 지원 여부)

Lighthouse는 웹사이트의 품질을 수치화하고, 개선 방향까지 제시해 주기 때문에 개발자에게 매우 유용한 도구이다.

 

 

실행 방법

---

1. 테스트하고 싶은 사이트 크롬 브라우저에서 열기
2. F12 또는 마우스 우클릭 → "검사" 클릭
3. 상단 탭에서 Lighthouse 클릭 (안 보이면 >> 안에 있을 수 있어요)
4. 측정할 항목(Performance 등) 선택 후 페이지 로드 분석(Analyze page load) 클릭
5. 몇 초 후, 리포트 생성!

 

 

Lighthouse 점수 항목 설명

---

Lighthouse는 항목별로 0~100점으로 평가한다. 점수에 따라 색상도 다르게 표시된다:

• 🔴 0~49점: 개선이 시급함
• 🟡 50~89점: 평균 이하, 개선 필요
• 🟢 90~100점: 매우 우수

 

주요 항목 설명

1. Performance (성능)

• 페이지가 얼마나 빠르게 로드되는지 측정
• 핵심 지표: LCP (큰 콘텐츠 렌더 시간), TBT (사용자 반응성), CLS (화면 흔들림)

2. Accessibility (접근성)

• 장애가 있는 사람들도 웹사이트를 사용하기 쉽도록 구성되어 있는지 점검
• 예: 색 대비, alt 태그, 키보드 탐색 등

3. Best Practices (웹 표준 및 보안)

• HTTPS 사용 여부, 브라우저 오류, API 사용 방식 등 점검

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

• 구글과 같은 검색엔진에 잘 노출될 수 있는 구조인지 확인

5. PWA (프로그레시브 웹 앱)

• 오프라인 사용 가능 여부, 설치 가능 여부 등을 검사