Lighthouse를 이용한 웹 성능 최적화

❓ Lighthouse 란?

Lighthouse는 Google에서 제공하는 무료 도구로, 웹 페이지의 성능, 접근성, SEO(검색 엔진 최적화) 및 Progressive Web App(PWA) 지표를 평가한다.

 

❗️Progressive Web App (PWA)

PWA는 웹 애플리케이션의 기능과 네이티브 애플리케이션의 경험을 결합한 형태다. 주요 특징은 다음과 같다:

• 오프라인 지원: 서비스 워커를 사용하여 인터넷 연결이 없는 상황에서도 작동할 수 있다.
• 푸시 알림: 사용자가 웹 애플리케이션에 다시 방문할 수 있도록 알림을 보낼 수 있다.
• 홈 화면 추가: 사용자가 PWA를 자신의 장치 홈 화면에 추가할 수 있어 네이티브 앱처럼 사용할 수 있다.

PWA는 사용자 경험을 향상시키고, 더 나은 성능을 제공하며, 다양한 플랫폼에서 접근할 수 있는 장점을 가진다.

 

---

🚀 Lighthouse 실행

⚒️ Chrome DevTools에서 실행하기

1. 웹 페이지 열기: Chrome 브라우저에서 성능을 최적화할 웹 페이지를 연다.
2. DevTools 열기: F12 또는 Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac)를 눌러 DevTools를 연다.
3. Lighthouse 탭 선택: DevTools 상단 메뉴에서 "Lighthouse" 탭을 클릭한다.
4. 보고서 설정: Performance, Accessibility, Best Practices, SEO 등 평가 항목을 선택한다.
5. 리포트 생성: "Analyze Page Load" 버튼을 클릭하여 Lighthouse 분석을 시작한다.

모바일 / 데스크탑 선택해서 평가 가능

 

🔍 결과 분석

Lighthouse가 분석을 마치면 성능 점수와 함께 구체적인 보고서를 제공한다. 주요 지표는 다음과 같다:

• Performance: 페이지 로딩 시간, 인터랙티브 시간, 안정성 등을 포함한다. 이 지표는 사용자가 페이지를 로드하는 데 걸리는 시간을 측정하며, 빠른 로딩 속도는 사용자 경험을 향상시킨다.
• Accessibility: 웹 페이지의 접근성 문제를 평가한다. 이 지표는 시각, 청각, 운동 능력 등 다양한 사용자 그룹이 웹 페이지를 얼마나 쉽게 사용할 수 있는지를 측정한다. 접근성 향상은 더 많은 사용자에게 서비스를 제공하는 데 중요한 요소다.
• Best Practices: 보안 및 최적의 개발 관행에 대한 점검을 포함한다. 이 지표는 웹 애플리케이션이 최신 보안 표준을 준수하는지, 그리고 최적의 코딩 관행을 따르고 있는지를 평가한다.
• SEO: 검색 엔진 최적화를 위한 점검 사항을 포함한다. 이 지표는 웹 페이지가 검색 엔진에 의해 잘 인식되고, 검색 결과에서 상위에 노출될 가능성을 측정한다. SEO 최적화는 사이트의 가시성을 높이는 데 필수적이다.

각 항목의 점수는 0~100까지의 범위로 표시되며, 높은 점수일수록 좋다.

 

✅ 성능 최적화 하기

Lighthouse 분석을 통해 내 웹사이트의 성능을 평가하고 최적화할 부분들을 확인할 수 있었다. 다음은 분석 결과와 이를 개선하기 위한 최적화 작업을 설명한 내용이다.

성능 분석 결과

 

1️⃣ 성능 분석 결과

Lighthouse 진단 결과, 내 웹사이트의 Performance 점수는 52점이었다. 분석 과정에서 여러 성능 저하 요소들이 발견되었고, 주요 내용은 다음과 같다:

• Largest Contentful Paint (LCP): LCP가 8,810 ms로 최적 기준(2.5초 이하)보다 훨씬 느렸다.
• 사용되지 않는 JavaScript 줄이기: 약 7,710 KiB의 비사용 JavaScript가 있었다.
• 렌더링 차단 리소스 제거: 약 120 ms의 성능 향상을 기대할 수 있었다.
• 너무 큰 네트워크 페이로드 방지: 총 네트워크 페이로드 크기가 9,036 KiB로 과도했다.

2️⃣ 최적화 과정

위의 문제를 해결하기 위해 다양한 최적화 작업을 수행했다:

• LCP 개선: 이미지를 WebP 포맷으로 변환하고 비동기 로딩을 통해 초기 로딩 속도를 개선했다.
• 사용되지 않는 JavaScript 코드 제거: 코드 스플리팅을 적용해 불필요한 코드가 로딩되지 않도록 했다.
• 렌더링 차단 리소스 비동기화: CSS와 JS 파일을 비동기 처리하거나 지연 로딩을 적용했다.
• 네트워크 페이로드 최적화: 이미지와 리소스 파일의 크기를 줄이고, 불필요한 파일을 제거했다.

3️⃣ 최적화 결과

이러한 최적화 과정을 거친 후, 웹사이트의 Performance 점수는 90까지 상승했고 사용자 경험이 더욱 원활해졌다. 또한, JavaScript 실행 시간과 메인 스레드 작업 시간도 줄어들어 페이지가 더 빠르게 반응할 수 있게 되었다.

최적화 결과

 

---

📖 정리

Lighthouse는 웹 페이지의 성능을 평가하고 개선할 수 있는 강력한 도구이다. 이 도구를 통해 웹사이트의 성능을 분석하고, 접근성 및 SEO 문제를 식별하여 최적화 작업을 진행할 수 있다. 내 웹사이트의 성능 점수를 52점에서 90점으로 개선한 경험은 웹 성능 최적화의 중요성을 다시 한 번 깨닫게 해주었다. 이러한 최적화 작업은 사용자 경험을 향상시키고, 웹사이트의 전반적인 품질을 높이는 데 큰 도움이 된다.

 

---

💡 참고 자료

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

등대  |  Lighthouse  |  Chrome for Developers

https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames

프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN