The LCP Burden of CJK Sites
An English site's web font is done with a single 30-50KB woff2. CJK is different — a full glyph set exceeds 1.5MB even after woff2 compression (Hangul alone spans 11,172 syllables; Chinese far more).
Pretendard's dynamic-subset CSS dynamically loads only the characters that actually appear on the page. First-screen CJK body text averages 60-200 characters — which drops to under 80KB.
Six Changes
1. `font-display: swap` — Pretendard CSS already applies swap. It renders immediately with a fallback font (system-ui), then swaps. CLS is minimized via metric fallback mapping.
2. `` — pre-establish a connection pool to `cdn.jsdelivr.net`. Saves 1 RTT (about 80-150ms from East Asia to a nearby CDN edge).
3. `` — mark Pretendard CSS as critical. Next.js injects it into the head automatically.
4. `next/font/google` for Inter / JetBrains Mono — the auxiliary Latin fonts are self-hosted at build time. Zero external RTT.
5. CSS variable fallback chain — the Tailwind preset's `fontFamily.sans = ['Pretendard Variable', 'Pretendard', 'var(--font-inter)', 'system-ui']`. Even if Pretendard fails to load, it degrades gracefully to the next step.
6. Adopt dynamic-subset — instead of the full character set (1.5MB+), load only the characters that actually appear (60-200KB). The first screen gets lighter.
Results (Lighthouse, 4G mobile, ko-KR)
| Metric | Before | After | |------|--------|-------| | LCP | 2.4s | 2.0s | | CLS | 0.08 | 0.04 | | INP | 220ms | 180ms | | Total transfer | 850KB | 540KB |
Next Steps (Phase 1B)
- Self-host the Pretendard woff2 files to `public/fonts/` (remove the CDN dependency) - Split critical/non-critical by character (inline base64 for the Hero area only?) - Image optimization — clean up the `next/image` profile