ClaudeCodeLab
Advanced

Implementation: Claude Code 활용 가이드

implementation: Claude Code 활용. 실용적인 팁과 코드 예시를 포함합니다.

Web폰트の최적화で표시速度を改善

Web폰트はデザインの品質を高めますが、최적화しないと표시速度に大きく影響します。Claude Code를 활용하면 폰트のサブセット化からロード戦略まで효율적으로구현할 수 있습니다。

font-displayの적절한설정

> Web폰트の로딩を최적화して。
> FOUTとFOITを防ぎ、사용자体験を損なわない설정にして。
/* font-displayの使い分け */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* テキストを即座に表示し、フォント読み込み後に差し替え */
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ヒーロー見出しなどの重要フォント */
@font-face {
  font-family: 'Display Font';
  src: url('/fonts/display.woff2') format('woff2');
  font-weight: 700;
  font-display: optional; /* ネットワークが遅い場合はシステムフォントで代替 */
}

Preload에 의한先読み

<head>
  <!-- クリティカルなフォントをpreload -->
  <link rel="preload" href="/fonts/NotoSansJP-Regular.woff2" 
        as="font" type="font/woff2" crossorigin />
  <link rel="preload" href="/fonts/NotoSansJP-Bold.woff2" 
        as="font" type="font/woff2" crossorigin />
</head>

日本語폰트のサブセット化

> 日本語폰트を必要な文字だけにサブセット化して。
> JIS第一水準・第二水準と常用漢字をカバーして。
// scripts/subset-font.ts
import { execSync } from 'child_process';
import { readFileSync, writeFileSync } from 'fs';

// pyftsubset를 사용한サブセット化
function subsetFont(inputPath: string, outputPath: string, unicodeRange: string) {
  execSync(
    `pyftsubset ${inputPath} ` +
    `--output-file=${outputPath} ` +
    `--flavor=woff2 ` +
    `--layout-features='*' ` +
    `--unicode-range="${unicodeRange}"`
  );
}

// Unicode範囲の分割（チャンク化）
const chunks = [
  { name: 'latin', range: 'U+0000-007F,U+2000-206F,U+2070-209F' },
  { name: 'kana', range: 'U+3000-303F,U+3040-309F,U+30A0-30FF,U+FF00-FFEF' },
  { name: 'kanji-1', range: 'U+4E00-5FFF' },
  { name: 'kanji-2', range: 'U+6000-7FFF' },
  { name: 'kanji-3', range: 'U+8000-9FFF' },
];

for (const chunk of chunks) {
  subsetFont(
    'src/fonts/NotoSansJP-Regular.ttf',
    `public/fonts/NotoSansJP-${chunk.name}.woff2`,
    chunk.range
  );
}
/* Unicode-rangeによる分割読み込み */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-latin.woff2') format('woff2');
  unicode-range: U+0000-007F, U+2000-206F;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-kana.woff2') format('woff2');
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-kanji-1.woff2') format('woff2');
  unicode-range: U+4E00-5FFF;
  font-display: swap;
}

可変폰트（Variable Fonts）の활용

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 400;
}

/* 1つのファイルで全ウェイトをカバー */
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
.caption { font-weight: 300; }

フォールバック폰트のメトリクス調整

/* CLSを防ぐためのサイズ調整 */
@font-face {
  font-family: 'Adjusted Arial';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

body {
  font-family: 'Noto Sans JP', 'Adjusted Arial', sans-serif;
}

폰트로딩状態の監視

// Font Loading APIで로딩완료を検知
async function waitForFonts() {
  if ('fonts' in document) {
    await document.fonts.ready;
    document.documentElement.classList.add('fonts-loaded');
  }
}

// 特定폰트の로딩を확인
async function loadCriticalFont() {
  const font = new FontFace(
    'Noto Sans JP',
    'url(/fonts/NotoSansJP-Regular.woff2)'
  );
  
  try {
    const loaded = await font.load();
    document.fonts.add(loaded);
    console.log('フォント読み込み完了');
  } catch (err) {
    console.error('フォント読み込み失敗:', err);
  }
}

정리

폰트최적화は성능최적화の中でも특히効果が大きい施策です。Claude Code를 활용하면 サブセット化スクリプトからunicode-range分割まで효율적으로구현할 수 있습니다。이미지최적화と並行して取り組むことで、페이지の표시速度を大幅に改善할 수 있습니다。Google Fontsの최적화에 대해서는web.dev도 참고하세요.

#Claude Code #フォント最適化 #performance #Web Fonts #表示速度

Related Posts