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

렌더링 차단 리소스 (Render-blocking Resources)

매 한 줄

"매 render-blocking = First Paint 까지 매 다운로드/parse 필수 리소스". 매 head 안 sync <script> + 매 default <link rel="stylesheet"> — 매 둘 다 차단. 매 2026 modern = 매 critical CSS inline + defer/async script + media query split + 매 LCP 최적화.

매 핵심

매 차단 리소스

<script src> (no defer/async) — 매 HTML parse 차단.
<link rel="stylesheet"> — 매 render 차단 (parse 차단 의 X).
@import in CSS — 매 추가 차단.
Web fonts — 매 FOIT/FOUT 매 paint 지연.

매 비차단 만들기

<script defer> — DOMContentLoaded 직전 실행, parse 차단 X.
<script async> — 다운로드 즉시 실행, parse 차단 가능.
<link rel="preload"> — early discovery.
media attribute — 매 print/non-matching media — 매 비차단.
Critical CSS inline + 매 rest async load.

매 영향 metric

FCP (First Contentful Paint).
LCP (Largest Contentful Paint).
TBT (Total Blocking Time).

💻 패턴

Defer vs async

<!-- 매 GOOD — 매 page-essential, parse 비차단 -->
<script defer src="/app.js"></script>

<!-- 매 GOOD — 매 independent (analytics) -->
<script async src="https://analytics.example.com/track.js"></script>

<!-- 매 BAD — 매 parse 차단 -->
<script src="/app.js"></script>

Critical CSS inline

<head>
  <style>
    /* 매 above-the-fold 만 — 매 14KB 이하 — 매 1RTT */
    body { margin: 0; font-family: system-ui; }
    .hero { min-height: 60vh; background: #111; color: #fff; }
  </style>
  <link rel="preload" href="/main.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/main.css"></noscript>
</head>

media query split

<!-- 매 print — 매 즉시 비차단 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 매 wide screen 만 — small 매 비차단 -->
<link rel="stylesheet" href="desktop.css" media="(min-width: 1024px)">

Preload critical font

<link rel="preload" href="/fonts/Inter.var.woff2" as="font"
      type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter.var.woff2') format('woff2-variations');
    font-display: swap;  /* 매 FOUT — 매 paint 차단 X */
  }
</style>

Modulepreload (ES modules)

<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>

Resource hints

<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

Speculation Rules (Chrome 121+)

<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/article/*" }, "eagerness": "moderate" }]
}
</script>

Fetch priority

<img src="hero.webp" fetchpriority="high" alt="...">
<script src="non-critical.js" defer fetchpriority="low"></script>

매 결정 기준

리소스	처리
Critical CSS (above fold)	inline `<style>`
Non-critical CSS	preload + onload swap, OR media query split
App JS (DOM-dependent)	`defer`
3rd-party analytics	`async`
Web font (critical)	preload + `font-display: swap`
LCP image	`fetchpriority="high"`
Below-fold image	`loading="lazy"`

기본값: Critical CSS inline (≤14KB), 매 script defer, font preload + swap, LCP image high priority.

🔗 Graph

부모: Web Performance · Critical Rendering Path (CRP)
변형: Critical CSS
응용: Core Web Vitals Optimization (INP, LCP, CLS)
Adjacent: Speculation Rules

🤖 LLM 활용

언제: Lighthouse audit 분석, "render blocking" 경고 해결, critical CSS 추출. 언제 X: 매 specific framework SSR config — 매 framework docs 매 더 정확.

❌ 안티패턴

모든 CSS head sync: 매 critical 만 inline.
<script> head sync: 매 defer 의 사용.
@import chain: 매 sequential 차단 — 매 <link> 의 사용.
font-display: block (default): 매 FOIT 매 3s — 매 swap.
preload 남발: 매 5개+ — 매 priority 무의미 — 매 critical 만.

🧪 검증 / 중복

Verified (web.dev, MDN Performance, Lighthouse audits, Chrome DevRel).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — defer/async + critical CSS + preload

5.0 KiB Raw Blame History