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

1. Lighthouse

Lighthouse는 웹 페이지의 품질을 측정하기 위해 Google에서 개발한 오픈 소스 자동화 도구이다. 주로 웹 개발자가 사이트의 성능과 사용자 경험을 개선하기 위해 사용한다.

웹사이트의 전반적인 품질을 평가하는 데 있어 Lighthouse 점수는 하나의 중요한 기준이 된다. 성능, 접근성, SEO, 사용자 경험 등 다양한 요소를 종합적으로 분석하기 때문에 점수 개선을 위한 지속적인 관리와 최적화가 필요하다.

Lighthouse는 Google Chrome의 DevTools(F12)에 포함되어 있으며 Lighthouse 탭을 통해 간단하게 분석을 실행할 수 있다. 또한 모바일과 데스크톱 환경을 각각 선택하여 테스트할 수 있다.

2. 항목별 개선 포인트  

- 성능 (Performance)

성능 항목은 페이지 로딩 속도와 렌더링 효율을 중심으로 평가된다. 특히 초기 로딩 속도와 불필요한 리소스 로딩 여부가 중요한 기준이 된다. 성능을 개선하기 위해서는 다음과 같은 방법을 적용할 수 있다.

이미지 최적화
원본 이미지의 해상도와 용량이 불필요하게 큰 경우 크기를 줄이고 이미지 포맷을 WebP나 AVIF 같은 최신 포맷으로 변환하여 용량을 최적화한다.

참고) 🖼️ 웹 성능을 위한 이미지 압축 도구 정리 (TinyPNG & Squoosh)

렌더링 차단 리소스 최소화
초기 렌더링을 막는 스크립트나 스타일 리소스는 페이지 로딩 속도를 저하시킬 수 있다. 외부 스크립트에는 strategy 속성을 설정하고 필요한 시점에만 JavaScript가 로드되도록 지연 로딩 방식을 적용하는 것이 좋다.

불필요한 JavaScript 로딩 제거
사용하지 않는 JavaScript chunk가 번들에 포함되지 않도록 관리해야 한다. 또한 무거운 라이브러리를 사용할 때에는 기능 대비 성능 비용을 충분히 고려하여 도입하는 것이 좋다.

코드 스플리팅 적용
페이지별로 필요한 JavaScript만 로드하도록 코드 스플리팅을 적용하면 초기 로딩 성능을 개선할 수 있다.

폰트 로딩 최적화
웹 폰트는 로딩 과정에서 렌더링 지연을 발생시킬 수 있다. font-display: swap 옵션을 사용하면 폰트 로딩 전에도 기본 폰트를 먼저 렌더링하여 사용자 경험을 개선할 수 있다.

- 접근성 (Accessibility)

접근성 항목은 다양한 사용자가 웹사이트를 문제없이 이용할 수 있도록 설계되었는지를 평가한다. 특히 스크린 리더 지원, 색상 대비, 키보드 접근성 등이 중요한 요소로 작용한다.

접근성을 개선하기 위해 다음과 같은 사항을 확인해야 한다.

form 요소에 label이 없음
스크린 리더는 label을 통해 입력 필드의 의미를 파악한다. label 태그를 for 속성과 함께 명시적으로 연결하거나 aria-label 또는 aria-labelledby 속성을 활용한다.

이미지에 alt 속성이 없음
이미지는 시각 정보를 전달하는 요소이기 때문에 대체 텍스트가 필요하다. 모든 <img> 태그에 이미지의 의미를 설명하는 alt 텍스트를 제공해야 한다.

색상 대비가 낮음
텍스트와 배경 색상의 대비가 낮으면 가독성이 떨어질 수 있다. 일반 텍스트 기준 최소 4.5:1 이상의 명도 대비를 확보하도록 색상 조합을 설계해야 한다.

키보드로 접근이 불가능한 UI
마우스를 사용하지 못하는 사용자도 인터페이스를 이용할 수 있어야 한다. <button>, <a>, <input>과 같은 시맨틱 HTML 요소를 사용하고 tabindex, role, aria-* 속성을 활용하여 키보드 포커스 이동을 관리한다.

버튼에 접근 가능한 이름이 없음
아이콘만 있는 버튼은 스크린 리더가 기능을 이해하기 어렵다. 이 경우 aria-label 속성을 사용하여 버튼의 역할을 명확히 설명해야 한다.

- 권장사항 (Best Practice)

권장사항 항목은 웹 애플리케이션이 보안, 안정성, 최신 웹 표준을 잘 준수하고 있는지를 평가한다. 이 항목은 성능과 직접적인 관련은 없지만 사용자 안전과 서비스 신뢰성 측면에서 중요한 기준이 된다.

다음과 같은 사항을 점검하여 개선할 수 있다.

HTTPS가 아닌 페이지
웹사이트는 HTTPS 프로토콜을 기본으로 사용해야 한다. SSL 인증서를 적용하여 모든 요청을 암호화하고 HTTP 요청은 HTTPS로 리다이렉트 처리한다.

취약한 JavaScript API 사용
보안에 취약하거나 비효율적인 JavaScript API 사용을 지양해야 한다. 대표적으로 document.write()나 eval()같은 함수는 보안 문제와 성능 저하를 유발할 수 있다.

외부 링크 보안 속성 미설정
target="_blank"로 외부 페이지를 열 때는 rel="noopener" 또는 rel="noreferrer" 속성을 함께 사용하는 것이 권장된다. 이를 통해 새 창에서 기존 페이지를 제어할 수 있는 보안 위험을 줄일 수 있다.

브라우저 콘솔 오류 발생
페이지 실행 중 브라우저 콘솔에 오류가 발생하면 사용자 경험과 안정성에 영향을 줄 수 있다. 개발 과정에서 콘솔 오류나 경고 메시지를 확인하고 수정하는 것이 좋다.

- 검색엔진 최적화 (SEO)

SEO 항목은 검색 엔진이 웹페이지의 내용을 올바르게 크롤링하고 색인할 수 있도록 구성되어 있는지를 평가한다. 메타 정보, 링크 구조, 사이트 맵 등의 요소가 주요 기준이 된다.

다음과 같은 사항을 점검하여 개선할 수 있다.

title 태그 최적화
검색 결과에서 가장 먼저 표시되는 요소이기 때문에 페이지 내용을 명확하게 설명하는 title 태그를 설정해야 한다. 페이지마다 고유한 title을 작성하는 것이 좋다.

meta description 누락
페이지 내용을 요약하는 meta description 태그가 없으면 검색 결과에서 페이지의 내용을 제대로 전달하기 어렵다. 페이지별로 150~160자 내외의 요약 문장을 작성하여 meta 태그에 추가하는 것이 좋다.

링크에 anchor 텍스트가 부족한 경우
링크 텍스트는 이동할 페이지의 목적을 명확하게 설명해야 한다. 여기 클릭, 더보기와 같은 모호한 표현보다는 구체적인 설명 텍스트를 사용하는 것이 좋다.

버튼이나 이미지 링크의 경우 aria-label 또는 alt 속성을 활용한다.

robots.txt 또는 sitemap 누락
검색 엔진이 사이트 구조를 효율적으로 크롤링할 수 있도록 루트 경로에 robots.txt와 sitemap.xml 파일을 제공하는 것이 좋다.

모바일 친화성 부족
모바일 환경에서도 콘텐츠가 잘 표시되도록 반응형 디자인을 적용하고 meta viewport 태그를 설정해야 한다.

- PWA (Progressive Web App)

PWA는 웹 애플리케이션을 모바일 앱처럼 사용할 수 있도록 하는 기술을 의미한다. Lighthouse에서는 웹사이트가 앱 수준의 사용자 경험을 제공할 수 있는지를 평가한다.

이를 위해 Web App Manifest 설정, Service Worker 등록, HTTPS 사용, 오프라인 동작 지원 등의 요소가 필요하다. 이러한 기능을 적용하면 사용자는 웹사이트를 홈 화면에 추가하여 앱처럼 실행할 수 있으며 네트워크가 불안정한 환경에서도 일부 기능을 사용할 수 있다.

이 외에도 다양한 평가 요소가 존재하기 때문에 Lighthouse 검사를 통해 각 항목의 부족한 부분을 확인할 수 있다. 검사 결과에 표시되는 경고 메시지를 기반으로 문제를 수정하고 지속적으로 개선하는 것이 웹사이트 품질 향상에 도움이 된다.