SWELL│Noto Sans JPのリクエスト数を下げて高速化する方法│サブセット

2024.08.222026.10.21

SWELLのフォントをNoto Sans JPを設定する人は注意が必要です。

SWELL 2.19.0のNoto Sans JP設定では、Android以外と判定された端末でGoogle FontsのCSSを読み込みます。Androidと判定された端末では、この設定によるGoogle Fontsの読み込みを省く実装です。

リクエスト数と転送量は取得されるフォントや使用文字によって異なるため、自分のページで比較してください。

例えばGTmetrixで計測すると以下の通り、27リクエスト数も発生して、しかもブロッキング（ベージュ色）も起こしています。

GTmetrixで計測した、デフォルトのCDN読み込みによるリクエスト数やブロッキングの発生状況。

検証からソースを見てみると以下のように読み込まれているのが確認できます。

この記事では、配布済みのサブセットを子テーマから読み込む手順を紹介します。

導入前後で使用文字、転送量、表示時間を比較し、必要な文字が欠けていないことも確認します。

その備忘録です。

以下の27→3は2024年の掲載画像に残した測定例です。同じ結果や高速化を保証する値ではありません。現在の環境では転送量、表示時間、使用文字の欠落を合わせて比較してください。

SWELLでNoto Sans JPのリクエスト数を下げて高速化する方法│サブセット

やり方は簡単です、子テーマにフォントを格納してCSSでフォントを指定するだけです。

サブセット化されたNoto Sans CJK JPをダウンロード

下記からサブセット化されたNoto Sans CJK JPをダウンロードします。

緑のCodeボタンからDownload ZIPを押して、フォントをダウンロードして解凍しましょう。

https://github.com/minoryorg/Noto-Sans-CJK-JP

ダウンロードしたフォントを子テーマに格納する

FTPまたはファイルマネージャーのプラグインを用いて、SWELLの子テーマにフォントを格納しましょう。

プラグインのファイルマネージャーを使用してSWELLの子テーマにフォントを格納する手順。

今回はファイルマネージャーからインポートします。

プラグインを有効にしたら管理画面の WP File Manegerのメニューを開きます。

子テーマの直下に、小文字でfontsというフォルダを作成します。下のCSSは、このfontsと同じ階層にある子テーマのstyle.cssへ追記する前提です。

ここに使いたいフォントをドラッグ＆ドロップします。

今回は下記の2種類を選びました（通常の文字と太文字のみ）

NotoSansCJKjp-Regular.woff2
NotoSansCJKjp-Bold.woff2

SWELLのNoto Sans JPの読み込みをやめる

カスタマイズ＞サイト全体設定＞基本デザインからベースのフォントを游ゴシックに変えておきます。

フォントの読み込み

サブセット化されたフォントをCSSを使って読み込み＆設定しましょう。

子テーマのstyle.cssへ次のCSSを追加します。url()はCSSファイルからの相対パスなので、追加CSS欄にはそのまま貼らないでください。追加CSS欄を使う場合は、実際に配置したフォントの完全URLへ置き換えます。WordPressがサブディレクトリにある場合も、/wp-content/から始まる決め打ちのURLは使いません。

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

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

body {
    font-family: "Noto Sans JP", sans-serif;
}

確認

最後にフォントが表示されているか確認しましょう。

見た目だけで成功と判断せず、開発者ツールのNetworkでwoff2が200になり、実際の使用フォントが切り替わったことを確認します。人名・地名・旧字体など、サブセットに含まれない文字の代替表示も調べてください。

以下は旧環境の測定結果です。今回の更新では現在のサイトの速度改善は測定していません。

SWELLの設定とGoogle Fontsの出力を照合する

スクロールできます

ベースのフォント設定	SWELL 2.19.0のhead出力
Noto Sans JP	Android以外と判定された端末でNoto Sans JPのGoogle Fonts CSSを出力
游ゴシック	このGoogle Fonts CSSを出力しない
明朝体（Noto Serif JP）	Noto Serif JPのGoogle Fonts CSSを出力

実際のSWELLのhead出力処理で、上の3設定を比較しました。

自己配信へ切り替えたつもりでもGoogle Fontsの通信が残る場合は、ベースのフォント設定と公開ページのlink要素を先に照合します。

テーマ設定の管理画面保存を今回試した結果ではありません。

掲載CSSのfonts/という相対URLは、子テーマのstyle.cssを基準に解決されます。

追加CSSへ貼る場合は、設置した2ファイルの完全URLに変更してください。

URLの基準についてはCSS url()の仕様も参照できます。

Google FontsのCSSが出なくなっても、自己配信フォントの表示成功や高速化は別に確認します。

Networkで通常・太字の2ファイルの取得を確認し、実際の使用フォントと必要な字形を調べてから、同じ条件で表示時間を比較してください。

まとめ

サイトの高速化で画像やコードを最適化するのも大事ですが、意外とWebから参照しているフォントも重いです。

サブセット化は収録する文字を減らす方法です。必要な文字が欠けると別のフォントで表示されます。提供元READMEにある収録範囲を確認し、ライセンスと配布条件も保持してください。元へ戻すには追加したCSSを削除し、変更前のSWELLフォント設定に戻します。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

font-displayの仕様に従い、例ではswapを指定しています。読み込み中は代替フォントを表示するため、切り替え時のレイアウト変化も確認してください。

よくある質問：SWELLでNoto Sans JPのリクエスト数を下げるときのポイント

SWELLでNoto Sans JPを使うと、なぜリクエスト数が増えるのですか？

SWELL 2.19.0では、Noto Sans JP設定でAndroid以外と判定された端末にGoogle FontsのCSSを読み込みます。Androidと判定された端末では、この読み込みを省きます。GTmetrixの計測例では27リクエストが発生し、ブロッキングも起きていました。リクエスト数と転送量は、取得されるフォントや使用文字によって異なります。

記事の方法では、何をしてリクエスト数を下げますか？

記事では、配布されているサブセット化済みのNoto Sans CJK JPをダウンロードし、子テーマに格納して、CSSでフォントを指定します。FTPまたはファイルマネージャーのプラグインで子テーマへ置きます。

「27→3」という数字は、必ず同じ結果になりますか？

なりません。記事では、27→3は2024年の掲載画像に残した測定例で、同じ結果や高速化を保証する値ではないとしています。現在の環境では、転送量、表示時間、使用文字の欠落を合わせて比較してください。

フォントを読み込むCSSは、どこに書きますか？

記事では、子テーマのstyle.cssへ追加します。url()はCSSファイルからの相対パスなので、追加CSS欄にはそのまま貼らないよう注意しています。追加CSS欄を使う場合は、実際に配置したフォントの完全URLへ置き換えます。WordPressがサブディレクトリにある場合も、/wp-content/から始まる決め打ちのURLは使いません。

自己配信にしたのにGoogle Fontsの通信が残るのは、なぜですか？

記事では、ベースのフォント設定によってSWELL 2.19.0のhead出力が変わると説明しています。Noto Sans JPはAndroid以外と判定された端末でGoogle FontsのCSSを出力します。明朝体（Noto Serif JP）はこのAndroid除外条件がなく、游ゴシックはこのGoogle FontsのCSSを出力しません。通信が残る場合は、ベースのフォント設定と公開ページのlink要素を先に照合します。なお、これはSWELLのhead出力処理での比較で、テーマ設定の管理画面保存を試した結果ではありません。