2nd/10_Wiki/Topics/AI_and_ML/PageSpeed Insights.md

---
id: wiki-2026-0508-pagespeed-insights
title: PageSpeed Insights
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [PSI, Google PageSpeed, Lighthouse]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [pagespeed, lighthouse, core-web-vitals, performance, web]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: lighthouse, web-vitals
---

# PageSpeed Insights

## 매 한 줄
> **"매 lab + field, mobile-first, CWV-driven"**. Google PSI = Lighthouse (lab simulation) + CrUX (real Chrome user data). 매 SEO ranking 의 official signal — Core Web Vitals (LCP, INP, CLS) score 의 결정. 2026 standard: INP replaced FID as interactivity metric.

## 매 핵심

### 매 두 가지 data
- **Lab data (Lighthouse)**: 매 controlled simulation — emulated mobile, throttled 4G CPU. Reproducible, 매 dev iteration 에 적합.
- **Field data (CrUX)**: 매 real Chrome users 의 28-day rolling aggregate. 매 actual user experience 반영. 매 SEO ranking 에 사용.

### 매 Core Web Vitals (2026)
- **LCP (Largest Contentful Paint)**: largest visible element render. Good ≤ 2.5s.
- **INP (Interaction to Next Paint)**: 75th percentile interaction responsiveness. Good ≤ 200ms. (replaced FID in 2024)
- **CLS (Cumulative Layout Shift)**: visual stability score. Good ≤ 0.1.

### 매 Lighthouse score weighting (v11+)
- FCP 10%, LCP 25%, TBT 30%, CLS 25%, SI 10%.
- Score: 0-100 — 매 90+ green, 50-89 orange, <50 red.

### 매 응용
1. SEO optimization (CWV signal in Google ranking).
2. Conversion rate (faster site → 매 7% lift per 100ms).
3. CI/CD performance budgets.
4. Marketing site audits.

## 💻 패턴

### CLI Lighthouse audit
```bash
npm install -g lighthouse
lighthouse https://example.com --output=html --output-path=./report.html \
  --preset=desktop --chrome-flags="--headless"
```

### PageSpeed Insights API
```javascript
const KEY = process.env.PSI_API_KEY;
const url = 'https://example.com';
const r = await fetch(
  `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${url}&key=${KEY}&strategy=mobile&category=performance`
);
const data = await r.json();
console.log('LCP:', data.lighthouseResult.audits['largest-contentful-paint'].displayValue);
console.log('INP (field):', data.loadingExperience.metrics.INTERACTION_TO_NEXT_PAINT?.percentile);
```

### web-vitals (real user monitoring)
```javascript
import { onLCP, onINP, onCLS } from 'web-vitals';

function send(metric) {
  navigator.sendBeacon('/analytics', JSON.stringify(metric));
}
onLCP(send);
onINP(send);  // replaces onFID in v4+
onCLS(send);
```

### Optimize LCP
```html
<!-- Preload hero image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<img src="/hero.webp" fetchpriority="high" loading="eager" decoding="async">
```

### Optimize INP
```javascript
// Break long tasks with scheduler.yield() (2026 baseline)
async function processItems(items) {
  for (const item of items) {
    process(item);
    if (navigator.scheduling?.isInputPending()) {
      await scheduler.yield();
    }
  }
}
```

### Optimize CLS
```css
/* Reserve space for images */
img { aspect-ratio: 16/9; width: 100%; height: auto; }

/* Avoid late-injected content shifting layout */
.ad-slot { min-height: 250px; }
```

### CI performance budget (Lighthouse CI)
```yaml
# lighthouserc.yml
ci:
  collect:
    url: ['http://localhost:3000']
    numberOfRuns: 3
  assert:
    assertions:
      'categories:performance': ['error', { minScore: 0.9 }]
      'largest-contentful-paint': ['error', { maxNumericValue: 2500 }]
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Dev iteration | Lighthouse lab (Chrome DevTools) |
| Production health | CrUX field data (PSI API) |
| Regression detection | Lighthouse CI in pipeline |
| Real user monitoring | web-vitals library + analytics |
| SEO impact | CrUX 28-day field — Google's actual signal |

**기본값**: Lighthouse CI for regression + web-vitals RUM for production reality.

## 🔗 Graph
- 부모: [[Web-Performance]] · [[Core Web Vitals Optimization (INP, LCP, CLS)|Core-Web-Vitals]]
- 변형: [[Lighthouse]]
- 응용: [[SEO]] · [[RUM]]
- Adjacent: [[CDN]] · [[Code Splitting]]

## 🤖 LLM 활용
**언제**: 매 web app perf optimization, SEO improvement, CI regression catching.
**언제 X**: 매 native mobile app, backend API perf (use APM tools instead).

## ❌ 안티패턴
- **Lab-only optimization**: 매 99 score in lab, terrible field data — 매 real users 가 다른 hardware/network.
- **Ignoring INP**: 매 still tracking only FID — 매 deprecated in 2024.
- **Score fixation**: 매 chasing 100 score 가 user-visible improvement 없음.
- **Mobile ignored**: 매 PSI mobile-first, 매 mobile score < desktop typically.
- **No field data check**: 매 lab green, CrUX red — 매 real users hurt.

## 🧪 검증 / 중복
- Verified (Google PSI docs, web.dev/vitals, Chrome DevRel).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — INP-aware, CWV optimization patterns |