개발자도구 Lighthouse 살펴보기

이민영·2025년 1월 3일

개발자도구 살펴보기

목록 보기

3/4

Lighthouse는 이전에 부트캠프에서 2차프로젝트 때 사용해본 경험이 있다. 그때는 벨로그에 올린거만 보고 무작정 해봤지만 이후에 잘 사용하지 않았다. 이번에 성능 최적화 공부하면서 Lighthouse도 정리해보는게 좋을 거 같아 포스팅을 해본다.

이번엔 Lighthouse에 대해 살펴보자!

🙄Lighthouse 란?

Lighthouse는 웹 애플리케이션의 품질과 성능을 평가하고 개선할 수 있도록 도와주는 오픈소스 자동화 도구이다. 구글이 개발하여 Google Chrome 브라우저 개발자 도구에 통합되어 있으며, 확장 프로그램 형태로도 사용할 수 있다.
Lighthouse는 웹 페이지를 분석하여 성능, 접근성, SEO, PWA(Progressive Web App) 등 다양한 항목에 대해 점수와 구체적인 개선 방안을 제공해준다.

✅ Lighthouse 살펴보기

1. Mode

Lighthouse가 페이지를 분석하는 방식이다.

Navigation (Default): 페이지 로드를 시뮬레이션하고 전체 성능을 측정한다. 일반적으로 초기 로딩 성능을 측정할 때 사용한다.
Timespan: 특정 시간 동안 사용자 작업을 측정한다. 페이지 간 탐색이나 상호작용 성능을 평가할 때 유용하다.
Snapshot: 현재 상태의 페이지를 스냅샷으로 분석한다. 동적 콘텐츠가 많지 않은 페이지의 정적 성능을 측정할 때 적합하다.

2. Device

분석할 디바이스 유형을 선택한다.

Mobile: 모바일 환경을 시뮬레이션한다.
Desktop: 데스크탑 환경을 시뮬레이션한다.

3. Categories

보고서에 포함할 카테고리를 선택한다.

Performance: 페이지의 로딩 속도와 사용자 경험의 효율성을 측정하는 지표이다.
Accessibility: 웹 콘텐츠가 장애가 있는 사용자를 포함해 모든 사용자에게 얼마나 접근 가능한지 평가한다.
Best Practices: 웹사이트가 최신 웹 개발 표준과 보안 규칙을 준수하는지 평가한다.
SEO (검색 엔진 최적화): 검색 엔진 크롤러가 사이트를 효율적으로 탐색하고 색인할 수 있는지 평가한다.

각 항목들은 아래 보고서를 보면서 좀 더 자세히 살펴보자.

4.Analyze Page Load

선택된 설정에 따라 Lighthouse 보고서를 생성한다. 보고서에는 선택한 카테고리에 대한 점수와 상세한 분석 결과가 포함된다.

✅Lighthouse 보고서 보고 이해하기

Analyze Page Load 버튼을 누르면 자동으로 분석을 해준다. 분석 후 나온 보고서에서 Performance(성능), Accessibility(접근성), Best Practices(권장사항), SEO(검색엔진 최적화)에 대해 좀 더 자세히 보자.

Performance(성능)

Performance는 웹 성능을 측정하여 화면에 콘텐츠가 표시되는 데 걸리는 시간, 콘텐츠가 표시된 후 사용자와 상호작용할 수 있는 상태가 되기까지의 시간, 그리고 화면에 불안정한 요소(레이아웃 이동 등)가 있는지 등을 평가한다.

Performance 점수는 왜 중요한가?
사용자는 로딩이 느린 페이지를 떠나버리는 경향이 있다. (3초 이상 지연되면 53%의 사용자가 이탈)
특히 모바일 환경에서는 더욱 빠른 반응성을 요구한다.
결국 빠른 로딩 속도는 사용자 경험에 직접적인 영향을 미치기 때문에 사용자 이탈을 막기 위해서는 Performance 점수를 신경써야 한다.

위 사진을 보면 성능 점수가 60점으로 나오는데 성능 점수는 METRICS에 보이는 5가지 지표에 가중치를 적용해 평균 낸 점수이다.
각 지표마다 가중치는 아래에 표에서 확인할 수 있다.

주요 측정 항목:

First Contentful Paint (FCP): 첫 번째로 페이지의 콘텐츠(텍스트, 이미지 등)가 화면에 렌더링되는 시간
Largest Contentful Paint (LCP): 페이지의 가장 큰 콘텐츠가 화면에 렌더링되는 시간. 페이지 로딩 경험의 핵심 지표
Cumulative Layout Shift (CLS): 페이지 로드 중 예상치 못한 레이아웃 변경 정도를 측정. 레이아웃 안정성을 평가한다.
Total Blocking Time (TBT): 페이지가 사용자와 상호작용할 수 없는 시간. JavaScript 실행 시간과 밀접하게 연관된다.
Speed Index(SI): 콘텐츠가 화면에 얼마나 빠르게 표시되는지 측정

Accessibility(접근성)

Accessibility는 웹 콘텐츠에 장애가 있는 사용자를 포함한 모든 사용자가 접근할 수 있는지 평가하며, 키보드 네비게이션, 적절한 색 대비, 대체 텍스트 제공 여부 등 접근성 지표를 측정한다.

Accessibility 점수는 왜 중요한가?
접근성이 낮은 사이트는 장애가 있는 사용자(시각, 청각, 운동 장애 등)가 이용할 수 없다. 이는 사용자층을 제한하고, 법적 소송의 위험을 높인다.
Accessibility 점수를 올리면 더 많은 사용자가 사이트를 사용할 수 있게 되고, 기업에서는 포용적이고 윤리적인 브랜드 이미지를 구축할 수 있다.

주요 측정 항목:

색 대비: 텍스트와 배경의 대비가 충분한지 확인한다. (시각 장애인을 위한 중요 요소)
적절한 ARIA 속성: ARIA 역할 및 태그가 올바르게 사용되었는지 점검
키보드 내비게이션 가능 여부: 마우스를 사용하지 않고 키보드만으로 페이지를 탐색할 수 있는지 평가
명확한 라벨 및 설명: 버튼, 링크, 폼 필드에 적절한 라벨이 있는지 확인
언어 속성 지정 여부: html 태그에 lang 속성이 정의되었는지 점검

Best Practices(권장사항)

Best Practices는 웹 페이지가 HTTPS를 사용하는지, 최신 기술과 API를 활용하는지, 불필요한 리소스 요청을 줄였는지, 그리고 보안 및 성능을 강화하는 웹 개발 모범 사례를 준수하고 있는지 평가한다.

Best Practices 점수는 왜 중요한가?
Best Practices는 보안과 안정성을 높이고, 최신 기술 표준을 준수하는 데 핵심적인 역할을 한다.
점수가 낮을 경우 HTTPS 미사용, 오래된 API, 취약 라이브러리 사용 등의 문제로 인해 보안 사고가 발생할 수 있다.
사용자 데이터 유출은 서비스 신뢰도를 하락시키고 금전적 손실로 이어진다.
Best Practices 점수를 올리면 사이트의 안정성과 보안이 강화되어 사용자 신뢰를 높일 수 있다.

주요 측정 항목:

HTTPS 사용: 모든 네트워크 요청이 안전한 HTTPS를 사용하는지 확인
안전한 JavaScript 라이브러리: 알려진 취약점을 가진 라이브러리를 사용하는지 평가
브라우저 호환성: 최신 브라우저에서 예상대로 작동하는지 점검
이미지 및 비디오 포맷 사용 권장: WebP, AVIF 등 최신 포맷 사용 여부
스크립트 로드 최적화: JavaScript 및 CSS를 비동기로 로드하여 차단을 방지

SEO(검색엔진 최적화)

SEO는 검색 엔진에서의 가시성을 높이기 위해 사이트의 콘텐츠 구조, 메타 태그, 키워드 최적화 여부, 모바일 친화성, 그리고 크롤링에 문제가 없는지 등을 평가한다.

SEO 점수는 왜 중요한가?
SEO는 검색 엔진에서의 가시성을 높이는 핵심 지표다.
검색 엔진 결과 페이지(SERP)에서 상위에 표시되지 않으면 사용자가 사이트를 찾을 확률이 급격히 낮아진다.
특히, 제품 판매나 서비스 제공 사이트의 경우 SEO 점수가 매출에 직결된다.
SEO 점수를 올리면 검색 순위가 상승하여 더 많은 트래픽을 유도할 수 있다.

주요 측정 항목: