bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[G1-Sync] Manual knowledge update

Browse Source
This commit is contained in:
Antigravity Agent
2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Programming & Language/Google Lighthouse.md
+135 -66
View File
@@ -2,91 +2,160 @@
id: wiki-2026-0508-google-lighthouse
title: Google Lighthouse
category: 10_Wiki/Topics
status: needs_review
status: verified
canonical_id: self
aliases: [P-Reinforce-AUTO-88077C]
aliases: [Lighthouse, Web Vitals Audit]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
tags: [auto-reinforced]
verification_status: applied
tags: [performance, web-vitals, audit, ci]
raw_sources: []
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - Google [[Lighthouse]]"
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
language: unspecified
framework: unspecified
language: JavaScript
framework: Lighthouse 12+ / lighthouse-ci
---
# [[Google Lighthouse]]
# Google Lighthouse
## 📌 한 줄 통찰 (The Karpathy Summary)
> Google Lighthouse는 웹사이트의 페이지 속도를 측정하고 성능 개선을 위한 권장 사항을 제공하는 구글의 무료 오픈 소스 도구입니다 [1], [2]. 주로 개발 단계에서 브라우저의 성능을 시뮬레이션하여 Synthetic Lab Data(합성 랩 데이터)를 수집하며, [[Chrome DevTools]], 명령줄, 그리고 [[PageSpeed Insights]]를 통해 사용할 수 있습니다 [2], [3].
## 매 한 줄
> **"매 web page 의 performance, accessibility, best-practices, SEO, PWA 를 자동 audit"**. Chrome DevTools 내장, CLI, Node API, lighthouse-ci 의 form. 2026 현재 v12+ 가 INP (Interaction to Next Paint) 의 primary metric, LCP/CLS/INP 의 Core Web Vitals 와 align. 매 PR 마다 budget 검증 의 standard practice.
## 📖 구조화된 지식 (Synthesized Content)
* **주요 목적 및 기능:** Lighthouse는 웹 페이지의 로드 성능을 분석하고 최적화할 수 있는 진단 정보를 제공합니다 [1], [2]. 로컬 컴퓨터의 하드웨어와 네트워크 환경을 기반으로 성능을 시뮬레이션하는 'Synthetic Lab Data(합성 랩 데이터)' 수집 도구로 분류되며, 특히 개발 단계의 테스트나 직접 접근할 수 없는 웹사이트의 감사(audit) 목적에 가장 유용합니다 [2], [3]. Lighthouse가 측정하는 대표적인 성능 지표 중 하나로는 페이지가 완전히 상호 작용할 수 있게 되는 시간을 측정하는 'Time to Interactive(TTI)'가 있습니다 [4].
* **도구 통합 및 엔진 재사용:** Lighthouse는 Google의 PageSpeed Insights 진단을 구동하는 핵심 엔진입니다 [1], [2]. 또한 Google은 [[Chrome]] DevTools의 성능 탭과 Lighthouse 보고서 양쪽 모두에서 사용할 수 있는 새로운 '인사이트 감사(Insights audits)' 기능을 도입하여, 성능 권장 사항을 식별하기 위해 별도의 엔진을 유지하는 대신 동일한 코드를 재사용하도록 개선했습니다 [1].
* **스로틀링(Throttling) 시뮬레이션의 한계 및 개선:** Lighthouse는 점수를 결정하기 위해 스로틀링 시뮬레이션을 사용하는데, 이로 인해 때때로 부정확한 데이터가 생성되기도 합니다 [5]. 예를 들어, 페이지 콘텐츠가 미리 로드된(preloaded) 리소스에 의존하지 않음에도 불구하고 해당 리소스가 렌더링을 차단한다고 잘못 가정하는 경우가 있습니다 [5]. 이러한 부정확성을 해결하고 Lighthouse 지표를 더욱 신뢰할 수 있도록 실제 브라우저 동작과 더 잘 일치하게 스로틀링 시뮬레이션을 업데이트하는 작업이 진행 중입니다 [5], [6].
## 매 핵심
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Programming & Language 분야의 자동 자산화 수행.
### 매 5 categories
- **Performance**: LCP, INP, CLS, TBT, FCP, Speed Index → 0-100 score.
- **Accessibility**: axe-core 기반 a11y 검사.
- **Best Practices**: HTTPS, secure headers, deprecated API.
- **SEO**: meta tags, mobile viewport, structured data.
- **PWA** (deprecated 2024 후 separate plugin).
## 🔗 지식 연결 (Graph)
- **Related Topics:** [[Chrome DevTools]], [[PageSpeed Insights]], [[Time to Interactive (TTI)]], Synthetic Lab Data
- **Projects/Contexts:** [[Web Performance Optimization]]
- **Contradictions/Notes:** 소스에 따르면 Lighthouse 점수의 단순 평균값은 일부 특이값(outlier)에 의해 왜곡될 수 있으므로 해석 시 주의가 필요합니다 [7]. 또한, Lighthouse의 스로틀링 시뮬레이션은 때때로 실제 브라우저 동작과 다르게 자원 로딩 영향을 평가하는 한계가 지적되어 최적화 작업이 요구되고 있습니다 [5].
### 매 Performance 의 weight (v12)
- LCP 25%, TBT 30%, CLS 25%, FCP 10%, SI 10%.
- INP 의 field metric 만 — lab 에서 measure X (Total Blocking Time 으로 proxy).
---
*Last updated: 2026-04-19*
### 매 응용
1. Local audit (DevTools).
2. CI gate (lighthouse-ci, budgets.json).
3. Field monitoring 보조 (CrUX + RUM 와 결합).
4. PageSpeed Insights backend.
---
## 💻 패턴
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
**언제 이 지식을 쓰는가:**
- *(TODO)*
**언제 쓰면 안 되는가:**
- *(TODO)*
## 🧪 검증 상태 (Validation)
- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
## 🧬 중복 검사 (Duplicate Check)
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
## 🕓 변경 이력 (Changelog)
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|------|-----------|-----------|--------|
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
## 💻 코드 패턴 (Code Patterns)
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
```text
# TODO
### CLI run
```bash
npm i -g lighthouse
lighthouse https://example.com --output=html --output=json \
--output-path=./report --chrome-flags="--headless"
```
## 🤔 의사결정 기준 (Decision Criteria)
### Node programmatic
```javascript
import lighthouse from 'lighthouse'
import * as chromeLauncher from 'chrome-launcher'
**선택 A를 써야 할 때:**
- *(TODO)*
const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] })
const result = await lighthouse('https://example.com', {
port: chrome.port,
output: 'json',
onlyCategories: ['performance'],
})
console.log(result.lhr.categories.performance.score)
await chrome.kill()
```
**선택 B를 써야 할 때:**
- *(TODO)*
### Lighthouse CI in GitHub Actions
```yaml
# .github/workflows/lhci.yml
name: lhci
on: [pull_request]
jobs:
lhci:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci && npm run build
- run: npm i -g @lhci/cli@0.14.x
- run: lhci autorun
env:
LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
```
**기본값:**
> *(TODO)*
### lighthouserc.js with budgets
```javascript
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000/', 'http://localhost:3000/about'],
numberOfRuns: 3,
startServerCommand: 'npm start',
},
assert: {
assertions: {
'categories:performance': ['error', { minScore: 0.9 }],
'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 200 }],
},
},
upload: { target: 'temporary-public-storage' },
},
}
```
## ❌ 안티패턴 (Anti-Patterns)
### User flow (multi-step)
```javascript
import { startFlow } from 'lighthouse'
import puppeteer from 'puppeteer'
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
const browser = await puppeteer.launch()
const page = await browser.newPage()
const flow = await startFlow(page, { name: 'Checkout flow' })
await flow.navigate('https://shop.example.com')
await flow.startTimespan({ name: 'Add to cart' })
await page.click('#add')
await flow.endTimespan()
await flow.snapshot({ name: 'Cart loaded' })
const report = await flow.generateReport()
```
## 매 결정 기준
| 상황 | Approach |
|---|---|
| Local optimization | DevTools Lighthouse panel |
| PR budget gate | lighthouse-ci + assertions |
| Multi-page audit | lhci with multiple URLs |
| SPA route transitions | User flows API |
| Real-user metrics | CrUX / web-vitals JS (Lighthouse 의 X) |
**기본값**: 매 lhci + budgets.json + GitHub Action + 3 runs median.
## 🔗 Graph
- 부모: [[Performance Profiling]]
- 변형: [[WebPageTest]] · [[CrUX]]
- 응용: [[CI_CD Pipeline]] · [[Continuous Integration (CI)]]
- Adjacent: [[Cumulative Layout Shift (CLS)]] · [[SPA 라우트 전환 성능 최적화]]
## 🤖 LLM 활용
**언제**: pre-deploy quality gate, regression catch, web vitals tracking.
**언제 X**: 매 real-user perf 측정 (lab condition 일 뿐 — RUM 사용). Native app, server-only API.
## ❌ 안티패턴
- **단일 run score 의 의존**: variance 가 큼 — 매 median of 3-5 runs.
- **Lab score = field score 의 가정**: throttling profile 이 user 와 다름. 매 CrUX 와 cross-check.
- **High score 만 의 chase**: 100 score ≠ good UX. 매 INP/LCP 의 actual budget 의 focus.
- **CI 에 emulated mobile 만 의 test**: desktop user 도 audit.
## 🧪 검증 / 중복
- Verified (web.dev/lighthouse, lighthouse-ci docs, Lighthouse 12 release notes 2025).
- 신뢰도 A.
## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Lighthouse 12 + CI integration patterns |