Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

5.1 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

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.

매 응용

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

💻 패턴

CLI Lighthouse audit

npm install -g lighthouse
lighthouse https://example.com --output=html --output-path=./report.html \
  --preset=desktop --chrome-flags="--headless"

PageSpeed Insights API

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)

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

<!-- 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

// 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

/* 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)

# 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)
변형: 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

5.1 KiB Raw Blame History