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.5 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

Page Experience Algorithm

매 한 줄

"매 Google 의 ranking signal 으로서 의 매 user perceived UX metric". 매 2021 Page Experience update 매 mobile 적용, 매 2022 desktop 확장, 매 2024-03 매 FID → INP 교체. 매 2026 의 매 core signal: LCP / INP / CLS + HTTPS / mobile-friendly / no-intrusive-interstitial.

매 핵심

매 Core Web Vitals (2026)

LCP (Largest Contentful Paint): 매 viewport 의 매 largest element render 시간. Good < 2.5s.
INP (Interaction to Next Paint): 매 모든 interaction 의 매 max latency (75th percentile). Good < 200ms.
CLS (Cumulative Layout Shift): 매 unexpected layout shift 누적 score. Good < 0.1.

매 추가 signal

HTTPS 적용.
Mobile-friendly (responsive).
No intrusive interstitial (popup ad coverage).
(deprecated 2024-03) Safe Browsing — 매 separate signal.

매 측정 source

CrUX (Chrome UX Report): 매 28-day rolling RUM data, 매 actual ranking signal.
PageSpeed Insights: 매 lab + field 결합 view.
Search Console > Core Web Vitals report.
web-vitals.js: 매 self-RUM library.

매 응용

SEO ranking 향상.
Conversion rate 개선 (slow → bounce).
AdSense ad serving quality.
Discover feed 노출 자격.

💻 패턴

1. web-vitals.js 측정

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP((metric) => sendToAnalytics('LCP', metric));
onINP((metric) => sendToAnalytics('INP', metric));
onCLS((metric) => sendToAnalytics('CLS', metric));

function sendToAnalytics(name: string, metric: any) {
  navigator.sendBeacon('/rum', JSON.stringify({
    name, value: metric.value, id: metric.id, rating: metric.rating
  }));
}

2. LCP 최적화 — preload hero image

<link rel="preload" as="image"
      href="/hero.webp"
      fetchpriority="high"
      imagesrcset="/hero-800.webp 800w, /hero-1600.webp 1600w"
      imagesizes="100vw">

3. INP 최적화 — long task break

async function processLargeList(items: Item[]) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 50 === 0) {
      await scheduler.yield();  // 매 2026 Scheduler API
    }
  }
}

4. CLS 방지 — explicit dimensions

<img src="/photo.webp" width="800" height="600" alt="...">
<iframe src="..." width="560" height="315"></iframe>

<!-- font swap reserve space -->
<style>
  @font-face {
    font-family: "Inter";
    src: url(/inter.woff2) format("woff2");
    size-adjust: 100%;
    ascent-override: 90%;
    font-display: swap;
  }
</style>

5. Defer non-critical JS

<script src="/analytics.js" defer></script>
<script type="module" src="/app.js"></script>
<script src="/legacy.js" nomodule defer></script>

6. Resource hints

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://api.example.com">
<link rel="modulepreload" href="/critical-module.js">

7. CrUX API query (BigQuery)

SELECT
  origin,
  largest_contentful_paint.histogram.density AS lcp_density,
  interaction_to_next_paint.histogram.density AS inp_density
FROM `chrome-ux-report.materialized.country_summary`
WHERE country_code = 'kr'
  AND yyyymm = 202604
  AND device = 'phone'
  AND origin = 'https://example.com';

매 결정 기준

상황	Priority
LCP > 4s	Hero image preload + fetchpriority=high (매 first)
INP > 500ms	React 18+ concurrent + scheduler.yield() (매 2번째)
CLS > 0.25	Image dimensions + font swap stabilization (매 quick win)
All green but slow ranking	Beyond CWV — content quality matters
Mobile-only fail	Test 매 mobile network throttle (Slow 4G)

기본값: web-vitals.js + Lighthouse CI + CrUX field monitoring 의 매 weekly review.

🔗 Graph

부모: SEO · Web Performance
변형: Lighthouse
응용: Core Web Vitals Optimization (INP, LCP, CLS)
Adjacent: Lighthouse CI · PageSpeed Insights

🤖 LLM 활용

언제: 매 SEO-driven traffic 매 critical (e-commerce, news, blog). 매 ranking 매 stagnant + 매 lab metric 양호 한 경우. 언제 X: 매 internal tool / B2B SaaS (organic search 매 minor). 매 ranking 의 매 dominant signal 의 X — 매 content 매 first.

❌ 안티패턴

Lab metric 만 monitor: 매 PageSpeed score 100 + 매 field CrUX poor — 매 real users 의 perspective 누락.
75th percentile 무시: 매 mean / median 매 deceiving — 매 long tail 매 ranking 결정.
INP 의 무시: 매 2024-03 부터 매 FID 대체 — 매 legacy site 매 INP regression 매 routine.
CLS shift container 매 transform 으로 회피: 매 actual layout 매 jarring — 매 reserved space 가 매 정답.
Preload 의 abuse: 매 모든 image preload → 매 critical asset 매 starve.

🧪 검증 / 중복

Verified (web.dev/vitals 2026-05, Google Search Central 공식 docs, CrUX dataset).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — INP-replaces-FID + 2026 Scheduler API yield pattern

5.5 KiB Raw Blame History