Lighthouse 활용

구글이 개발한 오픈소스 자동화 웹 성능 평가 도구 Lighthouse의 5가지 감사 카테고리, 다양한 실행 방법, 보고서 해석법, 그리고 마이크로프론트엔드 감사 팁을 학습한다.

학습 목표

Lighthouse가 무엇이며 왜 중요한지 이해한다
5가지 감사 카테고리(Performance, Accessibility, Best Practices, SEO, PWA)의 평가 내용을 파악한다
Chrome DevTools, CLI, Node API, 확장 프로그램 등 다양한 실행 방법을 익힌다
Lighthouse 보고서의 구조와 주요 항목을 해석할 수 있다
마이크로프론트엔드 환경에서 Lighthouse를 효과적으로 활용하는 방법을 알 수 있다

1. Lighthouse 소개

Lighthouse는 구글이 개발한 오픈소스 자동화 웹사이트 성능 평가 도구다. 웹 애플리케이션의 품질을 종합적으로 분석하며, 구체적인 개선 방안까지 제시한다.

1.1 주요 특징

자동화된 감사: URL만 입력하면 자동으로 페이지를 로드하고 분석한다
종합적 평가: 성능, 접근성, 모범 사례, SEO, PWA를 한 번에 평가한다
구체적 제안: 점수뿐 아니라 "무엇을 어떻게 개선하라"는 구체적인 가이드를 제공한다
0-100점 스코어: 각 카테고리별로 직관적인 점수를 산출한다

1.2 Lighthouse의 중요성

측면	설명
사용자 경험 향상	성능 병목 지점을 식별하여 빠르고 접근성 높은 웹사이트 구현을 돕는다
검색 엔진 순위 개선	SEO 감사를 통해 검색 엔진 가시성을 높일 수 있다
기술적 문제 해결	성능 저하의 원인을 식별하고 우선순위화된 개선 방법을 제시한다
CI/CD 통합	자동화 파이프라인에 통합하여 지속적인 성능 모니터링이 가능하다

2. 5가지 감사 카테고리

Lighthouse는 웹 애플리케이션을 5가지 카테고리로 나누어 평가한다.

2.1 Performance (성능)

페이지의 로딩 속도와 런타임 성능을 평가한다. 점수 산출에 사용되는 주요 지표는 다음과 같다.

지표	가중치	설명
FCP (First Contentful Paint)	10%	첫 콘텐츠 렌더링 시점
SI (Speed Index)	10%	콘텐츠가 시각적으로 채워지는 속도
LCP (Largest Contentful Paint)	25%	최대 콘텐츠 렌더링 시점
TBT (Total Blocking Time)	30%	메인 스레드 차단 총 시간
CLS (Cumulative Layout Shift)	25%	누적 레이아웃 이동 점수

2.2 Accessibility (접근성)

웹 접근성 표준(WCAG) 준수 여부를 자동으로 검사한다.

ARIA 속성의 올바른 사용 여부
이미지의 대체 텍스트(alt) 존재 여부
색상 대비율(4.5:1 이상)
키보드 탐색 가능 여부
양식(form) 요소의 라벨 존재 여부
페이지 언어 지정 여부

2.3 Best Practices (모범 사례)

웹 개발의 모범 사례 준수 여부를 검사한다.

HTTPS 사용 여부
JavaScript 콘솔 에러 존재 여부
올바른 이미지 가로세로 비율
더 이상 사용되지 않는(deprecated) API 호출 여부
보안 취약점이 있는 라이브러리 사용 여부

2.4 SEO (검색 엔진 최적화)

검색 엔진이 페이지를 올바르게 크롤링하고 인덱싱할 수 있는지 평가한다.

<title> 태그와 <meta description> 존재 여부
robots.txt의 올바른 설정
링크에 설명 텍스트 존재 여부
뷰포트 메타 태그 설정
구조화 데이터(structured data) 유효성

2.5 PWA (프로그레시브 웹 앱)

PWA 기준에 따른 웹사이트의 준수 여부를 분석한다. PWA를 사용하지 않는 사이트에서는 이 카테고리 점수가 표시되지 않을 수 있다.

3. Lighthouse 실행 방법

3.1 Chrome DevTools에서 실행

가장 간편한 방법이다.

1. 분석할 페이지를 Chrome에서 열기
2. F12 또는 Cmd+Option+I (Mac) / Ctrl+Shift+I (Windows)로 DevTools 열기
3. 상단 탭에서 "Lighthouse" 선택
4. 디바이스(Mobile/Desktop)와 카테고리 선택
5. "Analyze page load" 버튼 클릭

인증이 필요한 페이지도 로그인 상태에서 바로 감사할 수 있다는 장점이 있다.

3.2 CLI (Command Line Interface)

CI/CD 파이프라인에 통합할 때 주로 사용한다.

bash

# 전역 설치
npm install -g lighthouse

# 기본 실행
lighthouse https://example.com

# 특정 카테고리만 실행
lighthouse https://example.com --only-categories=performance,accessibility

# JSON 출력
lighthouse https://example.com --output=json --output-path=./report.json

# 모바일 에뮬레이션 비활성화 (데스크톱 테스트)
lighthouse https://example.com --preset=desktop

3.3 Node API (프로그래밍 방식)

자동화 스크립트나 CI 시스템에서 프로그래밍 방식으로 사용한다.

javascript

const lighthouse = require("lighthouse");
const chromeLauncher = require("chrome-launcher");

async function runLighthouse(url) {
  const chrome = await chromeLauncher.launch({ chromeFlags: ["--headless"] });
  const options = {
    logLevel: "info",
    output: "json",
    port: chrome.port,
  };

  const result = await lighthouse(url, options);
  const { categories } = result.lhr;

  console.log("Performance:", categories.performance.score * 100);
  console.log("Accessibility:", categories.accessibility.score * 100);

  await chrome.kill();
}

runLighthouse("https://example.com");

3.4 PageSpeed Insights

웹 브라우저에서 URL만 입력하면 된다. 실험실 데이터(Lighthouse)와 필드 데이터(CrUX)를 함께 제공한다.

3.5 Chrome 확장 프로그램

Chrome 웹 스토어에서 "Lighthouse" 확장 프로그램을 설치하면, 현재 보고 있는 페이지에서 바로 "Generate Report" 버튼으로 감사를 실행할 수 있다.

4. 보고서 해석 방법

4.1 점수 체계

점수 범위	등급	색상
90 - 100	우수 (Good)	초록색
50 - 89	개선 필요 (Needs Improvement)	주황색
0 - 49	저조 (Poor)	빨간색

4.2 보고서 주요 섹션

Metrics (지표): FCP, SI, LCP, TBT, CLS 등 핵심 수치가 컬러 코딩으로 표시된다.

Opportunities (기회): 성능 개선이 가능한 항목과 예상 절감 시간을 보여준다. 예를 들어:

"사용하지 않는 JavaScript 제거" - 2.5초 절감 가능
"이미지를 효율적으로 인코딩" - 1.2초 절감 가능

Diagnostics (진단): 모범 사례 위반 항목과 추가 정보를 제공한다. 예를 들어:

"메인 스레드 작업 최소화" - 총 차단 시간 3.2초
"DOM 크기 줄이기" - 현재 1,500개 노드

Passed Audits (통과한 감사): 이미 모범 사례를 준수하고 있는 항목들이다.

4.3 보고서 활용 워크플로우

4.4 측정 시 유의사항

시크릿(시크릿 모드) 탭에서 측정하여 브라우저 확장 프로그램과 캐시의 영향을 배제한다
네트워크 환경에 따라 결과가 달라지므로 여러 번 측정하여 평균을 사용한다
측정 환경(모바일/데스크톱)을 명확히 하고 일관되게 유지한다
Lighthouse 점수는 상대적 지표이므로, 절대적 목표보다는 변화 추이를 추적하는 것이 효과적이다

5. 마이크로프론트엔드 성능 감사 팁

5.1 전체 앱과 개별 마이크로앱 분리 측정

전체 앱 (App Shell + 모든 마이크로앱 로드)
  -> 사용자가 실제로 경험하는 성능

개별 마이크로앱 (독립 실행 환경)
  -> 특정 마이크로앱의 성능 문제 격리

5.2 마이크로프론트엔드 특화 확인 항목

확인 항목	설명
remoteEntry.js 로딩 시간	각 마이크로앱의 엔트리 파일 크기와 로딩 시간
shared 라이브러리 중복	React 등 공유 라이브러리가 실제로 단일 인스턴스로 로드되는지
청크 크기	각 마이크로앱의 번들 크기가 적정한지
CLS 영향	비동기 마이크로앱 로딩으로 인한 레이아웃 이동
네트워크 워터폴	remoteEntry -> 청크 -> 데이터 순서의 워터폴 깊이

5.3 CI/CD 통합 권장 설정

bash

# Lighthouse CI 설정 예시
lighthouse https://app.example.com \
  --budget-path=./budget.json \
  --output=json \
  --output-path=./lighthouse-report.json

# budget.json - 성능 예산 설정
{
  "budgets": [
    {
      "resourceSizes": [
        { "resourceType": "script", "budget": 300 },
        { "resourceType": "stylesheet", "budget": 50 }
      ],
      "resourceCounts": [
        { "resourceType": "third-party", "budget": 10 }
      ]
    }
  ]
}

핵심 정리

Lighthouse는 종합적 성능 평가 도구다: Performance, Accessibility, Best Practices, SEO, PWA 5가지 카테고리를 한 번에 평가한다
다양한 실행 방법을 지원한다: DevTools, CLI, Node API, PageSpeed Insights, 확장 프로그램 등 상황에 맞는 방법을 선택할 수 있다
Opportunities와 Diagnostics가 핵심이다: 점수 자체보다 어떤 항목을 어떻게 개선해야 하는지에 집중해야 한다
지속적으로 측정해야 한다: CI/CD에 통합하여 매 배포마다 성능 회귀를 탐지하는 것이 중요하다
마이크로프론트엔드는 분리 측정이 필요하다: 전체 앱과 개별 마이크로앱의 성능을 별도로 감사하여 병목 지점을 정확히 파악해야 한다

다음 단계

다음: Chrome Performance Tab - Chrome DevTools의 Performance 탭을 활용한 런타임 성능 분석 방법을 학습한다

Lighthouse 활용 ​

학습 목표 ​

1. Lighthouse 소개 ​

1.1 주요 특징 ​

1.2 Lighthouse의 중요성 ​

2. 5가지 감사 카테고리 ​

2.1 Performance (성능) ​

2.2 Accessibility (접근성) ​

2.3 Best Practices (모범 사례) ​

2.4 SEO (검색 엔진 최적화) ​

2.5 PWA (프로그레시브 웹 앱) ​

3. Lighthouse 실행 방법 ​

3.1 Chrome DevTools에서 실행 ​

3.2 CLI (Command Line Interface) ​

3.3 Node API (프로그래밍 방식) ​

3.4 PageSpeed Insights ​

3.5 Chrome 확장 프로그램 ​

4. 보고서 해석 방법 ​

4.1 점수 체계 ​

4.2 보고서 주요 섹션 ​

4.3 보고서 활용 워크플로우 ​

4.4 측정 시 유의사항 ​

5. 마이크로프론트엔드 성능 감사 팁 ​

5.1 전체 앱과 개별 마이크로앱 분리 측정 ​

5.2 마이크로프론트엔드 특화 확인 항목 ​

5.3 CI/CD 통합 권장 설정 ​

핵심 정리 ​

다음 단계 ​