메뉴
Font optimization for WSH 2026 — font-display swap, font subsetting, WOFF2 conversion, and preloading for ReiNoAreMincho and KaTeX fonts.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Crok AI chat rendering optimization — SSE debouncing, ChatMessage memoization, Markdown re-render prevention
DM page and flow optimization — afterSave hook, message rendering, unread count queries for WSH 2026
Home page performance optimization — Post defaultScope, SSR data reduction, lazy media hydration for WSH 2026 CaX app
Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer
SSE streaming optimization — batching char-by-char events and debouncing React re-renders for Crok AI chat performance
Runs Visual Regression Testing (VRT) locally to prevent disqualification in Web Speed Hackathon. Captures screenshots, compares against baselines, updates snapshots, and validates visual integrity after performance optimizations. Use when optimizing WSH apps, running VRT checks, updating VRT baselines, or investigating VRT failures.
| name | wsh-font-optimization |
| description | Font optimization for WSH 2026 — font-display swap, font subsetting, WOFF2 conversion, and preloading for ReiNoAreMincho and KaTeX fonts. |
The project uses two large OTF font files (13.2MB total) with font-display: block, causing invisible text until fonts load. KaTeX fonts add another 1MB.
Use this skill when optimizing font loading, converting formats, or subsetting fonts.
/* Before */
@font-face {
font-family: "Rei no Are Mincho";
font-display: block;
src: url(/fonts/ReiNoAreMincho-Regular.otf) format("opentype");
}
/* After */
@font-face {
font-family: "Rei no Are Mincho";
font-display: swap;
src: url(/fonts/ReiNoAreMincho-Regular.woff2) format("woff2");
}
Impact: FCP improvement — text visible immediately with fallback font, swaps when loaded
WOFF2 provides ~30-50% better compression than OTF.
# Using fonttools (pip install fonttools brotli)
pyftsubset ReiNoAreMincho-Regular.otf \
--output-file=ReiNoAreMincho-Regular.woff2 \
--flavor=woff2 \
--layout-features='*'
Or use an online converter / woff2_compress tool.
Impact: 6.5MB OTF → ~3-4MB WOFF2
Subset to only characters used in the app. Japanese fonts can be subset to JIS X 0208 or commonly used characters.
pyftsubset ReiNoAreMincho-Regular.otf \
--output-file=ReiNoAreMincho-Regular-subset.woff2 \
--flavor=woff2 \
--text-file=used-characters.txt
Impact: 6.5MB → potentially <1MB if subset aggressively
<link rel="preload" href="/fonts/ReiNoAreMincho-Regular.woff2" as="font" type="font/woff2" crossorigin>
| Pitfall | Symptom | Fix |
|---|---|---|
| Missing characters in subset | Tofu (□) characters | Include all characters used in the app |
| WOFF2 not served with correct MIME | Font fails to load | Ensure server sends font/woff2 |
| font-display: swap CLS | Layout shift when font swaps | Use size-adjust or fallback font matching |
| Change | Visual Impact | Mitigation |
|---|---|---|
| font-display: swap | FOUT (Flash of Unstyled Text) during load | VRT waits for load, should be fine |
| WOFF2 conversion | Identical rendering | Safe |
| Subsetting | Missing glyphs | Test all pages thoroughly |
application/public/fonts/application/client/src/index.css