Lighthouse 감사와 점수
DevTools 또는 CI에서 Lighthouse를 실행하고 성능 점수와 진단 결과를 읽으며, 가장 큰 개선 효과를 얻을 수 있는 항목을 우선 처리합니다.
Lighthouse 감사와 점수은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Lighthouse란 무엇입니까
Lighthouse는 페이지 로드를 시뮬레이션하고 성능, 접근성, 모범 사례, SEO, PWA 범주에 걸쳐 점수를 매기는 Google의 오픈 소스 감사 도구입니다. Chrome DevTools에 내장되어 있으며 CLI 또는 CI에서 실행할 수 있습니다.
DevTools에서 Lighthouse 실행하기
DevTools를 열고 Lighthouse 탭을 클릭한 다음 범주와 기기(모바일/데스크톱)를 선택하고 '페이지 로드 분석'을 클릭합니다. 모의 테스트에는 약 30초가 걸립니다.
성능 점수 분석
성능 점수(0–100)는 다음 항목의 가중 평균입니다: LCP (25%), 총 차단 시간 (30%), CLS (25%), FCP (10%), 속도 지수 (10%). 기준이 높게 설정되어 있어 90점 이상이어야 '양호'입니다.
최초 콘텐츠 페인트 (FCP)
FCP는 첫 번째 콘텐츠 조각(텍스트 또는 이미지)이 화면에 그려지는 시점을 나타냅니다. LCP와는 다릅니다. FCP는 무엇이든 처음 그려지는 시점을 측정하고, LCP는 가장 큰 요소를 측정합니다. 1.8초 미만이면 양호합니다.
총 차단 시간 (TBT)
TBT는 50ms보다 긴 JavaScript 작업으로 인해 메인 스레드가 차단된 시간을 측정합니다. TBT가 높으면 화면이 준비된 것처럼 보여도 페이지가 응답하지 않는 것처럼 느껴집니다.
개선 기회 섹션 읽기
Lighthouse는 예상 절감 시간과 함께 '개선 기회'를 나열합니다(예: '렌더링을 차단하는 리소스 제거: 1.2초'). 절감 시간을 기준으로 정렬하여 가장 큰 항목부터 수정하면 효과를 극대화할 수 있습니다.
일반적인 개선 기회
자주 적용하는 개선 방법은 중요하지 않은 스크립트의 defer/async 적용, 중요 CSS 인라인 처리, 주요 요청 미리 로드, CDN 사용, 텍스트 압축(Brotli/gzip) 활성화, 최신 이미지 형식 제공입니다.
Lighthouse CLI
스크립트로 감사 작업을 실행하려면 명령줄에서 Lighthouse를 실행합니다.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"GitHub Actions에서 Lighthouse CI 실행하기
모든 풀 리퀘스트에서 감사를 실행하고 점수가 임계값 아래로 떨어지면 빌드를 실패하게 만듭니다.
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
audit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci && npm run build
- uses: treosh/lighthouse-ci-action@v11
with:
configPath: ./lighthouserc.jsonLighthouse 설정: 점수 검증 조건
lighthouserc.json에 검증 조건을 정의하여 점수가 하락한 풀 리퀘스트가 실패하도록 설정합니다.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}네트워크 제한 및 기기 시뮬레이션
Lighthouse는 기본적으로 느린 4G 네트워크와 중급형 모바일 CPU를 시뮬레이션합니다. 이는 의도된 동작입니다. 실제 기기를 사용하는 프로덕션 사용자는 개발 머신보다 느리기 때문입니다.
점수 변동 — 점수가 흔들리는 이유
JavaScript 실행 시간의 변동 때문에 Lighthouse 점수는 실행할 때마다 달라집니다. 감사를 3~5회 실행하고 중앙값을 사용하십시오. Lighthouse CI의 numberOfRuns를 사용하면 중앙값을 자동으로 계산할 수 있습니다.
빠른 확인
긴 JavaScript 작업으로 인해 메인 스레드가 차단된 시간을 측정하는 Lighthouse 지표는 무엇입니까?
복습: Lighthouse
Lighthouse는 성능, 접근성, 모범 사례, SEO, PWA를 감사합니다. 성능 점수는 LCP, TBT, CLS, FCP, 속도 지수의 가중 평균입니다. 개선 기회 섹션은 예상 절감 시간을 기준으로 수정 항목의 우선순위를 정합니다. DevTools, CLI 또는 treosh/lighthouse-ci-action을 사용해 CI에서 실행할 수 있습니다. 점수 변동을 줄이려면 여러 번 실행한 결과의 중앙값을 사용하십시오.
자주 묻는 질문
“Lighthouse 감사와 점수” 강의는 무료인가요?
네 — “Lighthouse 감사와 점수” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Lighthouse 감사와 점수”에서 뭘 배우나요?
DevTools 또는 CI에서 Lighthouse를 실행하고 성능 점수와 진단 결과를 읽으며, 가장 큰 개선 효과를 얻을 수 있는 항목을 우선 처리합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“Lighthouse 감사와 점수” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.