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/DevOps_and_Security/Page Experience Algorithm.md
+140 -64
View File
@@ -2,92 +2,168 @@
id: wiki-2026-0508-page-experience-algorithm
title: Page Experience Algorithm
category: 10_Wiki/Topics
status: needs_review
status: verified
canonical_id: self
aliases: [P-Reinforce-AUTO-6A1F2E]
aliases: [Google Page Experience, Core Web Vitals ranking, INP]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
tags: [auto-reinforced]
verification_status: applied
tags: [seo, web-performance, core-web-vitals, google]
raw_sources: []
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - Page Experience Algorithm"
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: N/A
framework: Google Search Ranking
---
# [[Page Experience Algorithm|Page Experience Algorithm]]
# Page Experience Algorithm
## 📌 한 줄 통찰 (The Karpathy Summary)
> Page Experience Algorithm(페이지 경험 알고리즘)은 구글(Google)이 검색 순위를 결정할 때 사용하는 알고리즘입니다 [1]. 이 알고리즘은 실제 사용자의 웹페이지 경험을 측정하는 표준화된 지표인 코어 웹 바이탈([[Core Web Vitals|Core Web Vitals]])을 주요 랭킹 신호(Ranking signals)로 사용합니다 [1, 2]. 이 알고리즘의 기준을 충족하는 것은 검색 순위를 방어하거나 향상시키고 사용자 유지율을 높이는 데 필수적입니다 [1, 3].
## 매 한 줄
> **"매 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.
## 📖 구조화된 지식 (Synthesized Content)
- **핵심 평가 지표 (Core Web Vitals):** 페이지 경험 알고리즘은 실제 사용자 경험의 핵심 측면을 측정하며, 주로 세 가지 차원에 집중합니다. 첫째는 콘텐츠가 나타나는 속도를 측정하는 로딩 성능(LCP), 둘째는 사용자 작업에 페이지가 얼마나 빨리 반응하는지를 나타내는 상호작용성(INP, 기존 FID에서 대체됨), 셋째는 요소가 로드되는 동안 레이아웃이 얼마나 안정적으로 유지되는지를 나타내는 시각적 안정성(CLS)입니다 [2, 4].
- **검색 순위 및 사용자 경험과의 상관관계:** 이 알고리즘에서 요구하는 '우수(Good)' 임계값을 충족하는 페이지는 검색 결과에서 더 나은 순위를 기록하고 사용자를 더 효과적으로 유지하는 경향이 있습니다 [1]. 반대로 이 알고리즘이 평가하는 지표가 나쁘면 높은 이탈률과 사용자 불만으로 이어지는 상관관계를 보입니다 [1].
- **데이터 수집 방식:** 구글은 이 알고리즘의 평가를 위해 크롬 사용자 경험 보고서([[CrUX|CrUX]])를 통해 수집된 실제 사용자의 현장 데이터(Field data)를 활용하여 사용자가 페이지를 실제로 어떻게 경험하는지 평가합니다 [1].
- **한계:** 제공된 소스에는 페이지 경험 알고리즘이 코어 웹 바이탈을 랭킹 신호로 취급한다는 점은 명시되어 있으나, 그 외에 알고리즘의 구체적인 가중치, 내부 구조 및 기타 평가 요소에 대한 세부적인 관련 정보가 부족합니다.
## 매 핵심
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Programming & Language 분야의 자동 자산화 수행.
### 매 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**.
## 🔗 지식 연결 (Graph)
- **Related Topics:** [[Core Web Vitals|Core Web Vitals]], INP (Interaction to Next Paint), LCP (Largest Contentful Paint), CLS (Cumulative Layout [[Shift|Shift]])
- **Projects/Contexts:** Google [[Search|Search]] Ranking, [[Chrome|Chrome]] User Experience Report (CrUX)
- **Contradictions/Notes:** 소스에 코어 웹 바이탈 지표들 외에 페이지 경험 알고리즘의 내부적인 작동 원리나 코어 웹 바이탈 이외의 추가적인 구성 요소에 대한 관련 정보가 부족합니다.
### 매 추가 signal
- HTTPS 적용.
- Mobile-friendly (responsive).
- No intrusive interstitial (popup ad coverage).
- (deprecated 2024-03) Safe Browsing — 매 separate signal.
---
*Last updated: 2026-04-19*
### 매 측정 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.
---
### 매 응용
1. SEO ranking 향상.
2. Conversion rate 개선 (slow → bounce).
3. AdSense ad serving quality.
4. Discover feed 노출 자격.
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
## 💻 패턴
**언제 이 지식을 쓰는가:**
- *(TODO)*
### 1. web-vitals.js 측정
```ts
import { onLCP, onINP, onCLS } from 'web-vitals';
**언제 쓰면 안 되는가:**
- *(TODO)*
onLCP((metric) => sendToAnalytics('LCP', metric));
onINP((metric) => sendToAnalytics('INP', metric));
onCLS((metric) => sendToAnalytics('CLS', metric));
## 🧪 검증 상태 (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
function sendToAnalytics(name: string, metric: any) {
navigator.sendBeacon('/rum', JSON.stringify({
name, value: metric.value, id: metric.id, rating: metric.rating
}));
}
```
## 🤔 의사결정 기준 (Decision Criteria)
### 2. LCP 최적화 — preload hero image
```html
<link rel="preload" as="image"
href="/hero.webp"
fetchpriority="high"
imagesrcset="/hero-800.webp 800w, /hero-1600.webp 1600w"
imagesizes="100vw">
```
**선택 A를 써야 할 때:**
- *(TODO)*
### 3. INP 최적화 — long task break
```ts
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
}
}
}
```
**선택 B를 써야 할 때:**
- *(TODO)*
### 4. CLS 방지 — explicit dimensions
```html
<img src="/photo.webp" width="800" height="600" alt="...">
<iframe src="..." width="560" height="315"></iframe>
**기본값:**
> *(TODO)*
<!-- 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>
```
## ❌ 안티패턴 (Anti-Patterns)
### 5. Defer non-critical JS
```html
<script src="/analytics.js" defer></script>
<script type="module" src="/app.js"></script>
<script src="/legacy.js" nomodule defer></script>
```
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
### 6. Resource hints
```html
<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)
```sql
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]] · [[Google Search Ranking]]
- 변형: [[Lighthouse]] · [[Speed Index]] · [[TTFB (Time to First Byte)]]
- 응용: [[Core Web Vitals]] · [[CrUX (Chrome UX Report)]] · [[INP (Interaction to Next Paint)]]
- Adjacent: [[Real User Monitoring]] · [[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 |