[Google Fonts] 日本語フォントの読み込みを高速化する実装方法

https://fonts.googleapis.com/css2?family=Noto+Sans+JP&text=こんにちは

/**
 * 指定されたコードポイント範囲の文字をSetに追加する補助関数
 * @param start - 開始コードポイント
 * @param end - 終了コードポイント
 * @param charSet - 文字を追加するSet
 */
function addCharRange(start: number, end: number, charSet: Set<string>): void {
  for (let codePoint = start; codePoint <= end; codePoint++) {
    const char = String.fromCodePoint(codePoint);
    charSet.add(char);
  }
}

function extractUniqueChars(data: { title: string; content: string }[]): string {
  const uniqueCharsSet = new Set<string>();

  // 基本的なASCII文字、ひらがな、カタカナなど
  // 基本セットとして一般的な文字を追加
  addCharRange(0x0030, 0x0039, uniqueCharsSet);

  // 英大文字 (A-Z): U+0041 - U+005A
  addCharRange(0x0041, 0x005a, uniqueCharsSet);

  // 英小文字 (a-z): U+0061 - U+007A
  addCharRange(0x0061, 0x007a, uniqueCharsSet);

  // ASCII記号: U+0020 - U+002F, U+003A - U+0040, U+005B - U+0060, U+007B - U+007E
  addCharRange(0x0021, 0x002f, uniqueCharsSet); // !"#$%&'()*+,-./
  addCharRange(0x003a, 0x0040, uniqueCharsSet); // :;<=>?@
  addCharRange(0x005b, 0x0060, uniqueCharsSet); // [\]^_`
  addCharRange(0x007b, 0x007e, uniqueCharsSet); // {|}~

  // ひらがな: U+3041 - U+3096
  addCharRange(0x3041, 0x3096, uniqueCharsSet);

  // カタカナ: U+30A1 - U+30FA
  addCharRange(0x30a1, 0x30fa, uniqueCharsSet);

  // 全角英数記号（必要な場合）: U+FF01 - U+FF5E
  addCharRange(0xff01, 0xff5e, uniqueCharsSet);

  // データから文字を抽出
  for (let i = 0; i < data.length; i++) {
    processStringAndAddToSet(data[i].title, uniqueCharsSet);
    processStringAndAddToSet(data[i].content, uniqueCharsSet);
  }

  // 文字をカテゴリごとに分類・ソート
  const sortedChars = Array.from(uniqueCharsSet).sort((a, b) => {
    return getCharPriority(a) - getCharPriority(b);
  });

  return sortedChars.join('');
}

function processStringAndAddToSet(str: string, charSet: Set<string>): void {
  let insideCodeTag = 0; // ネスト対応のためカウンタを使用
  let match;
  let lastIndex = 0;

  while ((match = REGEX_CODE_TAG.exec(str)) !== null) {
    // <code> までの部分を処理
    if (insideCodeTag === 0) {
      addCharactersToSet(str.substring(lastIndex, match.index), charSet);
    }

    // <code> の場合はカウント増加, </code> の場合は減少
    if (match[0].startsWith('</')) {
      insideCodeTag = Math.max(0, insideCodeTag - 1);
    } else {
      insideCodeTag += 1;
    }

    lastIndex = REGEX_CODE_TAG.lastIndex;
  }

  // 残りの文字列を処理
  if (insideCodeTag === 0) {
    addCharactersToSet(str.substring(lastIndex), charSet);
  }
}

/** 絵文字を判定する関数 */
const isEmoji = (char: string): boolean => /\p{Emoji}/u.test(char);

/**
 * 文字列から個別の文字をSetに追加（大文字小文字を区別）
 * @param str - 追加する文字列
 * @param charSet - 文字を格納するSet
 */
function addCharactersToSet(str: string, charSet: Set<string>): void {
  for (const char of str) {
    if (!/\s/.test(char) && !isEmoji(char)) {
      charSet.add(char); // 大文字小文字をそのまま維持
    }
  }
}

(async () => {
  const data = getPosts();
  const uniqueStrings = extractUniqueChars(data);
  const file = `export default ${JSON.stringify(uniqueStrings)};`;

  await writeFile(`${PATH.to}/uniqueChars.ts`, file);
})();

import uniqueChars from '~/dist/uniqueChars';

/** Google Fontsが受け付けられる限界文字数があるため8000文字程度に制限する */
const MAX_URL_LENGTH = 8000;
const BASE_URL = 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400..900&display=swap';

export const GoogleFontLinks = () => {
  const links: string[] = [];
  let currentChunk = '';

  for (const char of uniqueChars) {
    // 現在の chunk に新しい文字を追加した場合、エンコード後の長さが制限を超えるかをチェック
    if (encodeURIComponent(currentChunk + char).length > MAX_URL_LENGTH) {
      links.push(`${BASE_URL}&text=${encodeURIComponent(currentChunk)}`);
      currentChunk = ''; // 新しい chunk を開始
    }
    currentChunk += char;
  }

  // 最後の chunk を追加
  if (currentChunk) {
    links.push(`${BASE_URL}&text=${encodeURIComponent(currentChunk)}`);
  }

  return (
    <>
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      {links.map((url, index) => (
        <link
          key={`preload-${index}`}
          href={url}
          rel="preload"
          as="style"
          fetchPriority="high"
          crossOrigin="anonymous"
        />
      ))}
      {links.map((url, index) => (
        <link key={`stylesheet-${index}`} href={url} rel="stylesheet" />
      ))}
      <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap" rel="stylesheet" />
    </>
  );
};

<link rel="preconnect" href="https://fonts.googleapis.com" />

<link key={`preload-${index}`} href={url} rel="preload" as="style" fetchPriority="high" crossOrigin="anonymous" />