SWELLのフォントをNoto Sans JPを設定する人は注意が必要です。
SWELLのデフォルトのCDNから読み込むとリクエスト数がかなり大きく、表示速度を損なうことがあるからです。
例えばGTmetrixで計測すると以下の通り、27リクエスト数も発生して、しかもブロッキング（ベージュ色）も起こしています。
検証からソースを見てみると以下のように読み込まれているのが確認できます。
どうしてもNoto Sans JPを使いたい場合は、フォント数を抑えたサブセットがありますので、そちらを使って高速化しつつ、Noto Sans JPを使ってみたいと思います。
その備忘録です。
結果を書いておきますが、サブセットを使うとリクエスト数が27→3まで減らせます。
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の子テーマにフォントを格納しましょう。
今回はファイルマネージャーからインポートします。
プラグインを有効にしたら管理画面の WP File Manegerのメニューを開きます。
あとは子テーマまでアクセスして、Fonsというフォルダを作成します。
ここに使いたいフォントをドラッグ＆ドロップします。
今回は下記の2種類を選びました（通常の文字と太文字のみ）
- NotoSansCJKjp-Regular.woff2
- NotoSansCJKjp-Bold.woff2
SWELLのNoto Sans JPの読み込みをやめる
カスタマイズ ＞ サイト全体設定 ＞ 基本デザインからベースのフォントを游ゴシックに変えておきます。
フォントの読み込み
サブセット化されたフォントをCSSを使って読み込み＆設定しましょう。
以下のコードを貼り付けるだけです。
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: url('/wp-content/themes/swell_child/fonts/NotoSansCJKjp-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
src: url('/wp-content/themes/swell_child/fonts/NotoSansCJKjp-Bold.woff2') format('woff2');
}
body {
font-family: "Noto Sans JP", sans-serif;
}確認
最後にフォントが表示されているか確認しましょう。
元のNoto Sans JPが表示されていればOKです。
リクエスト数も27→3まで減少しました！
まとめ
サイトの高速化で画像やコードを最適化するのも大事ですが、意外とWebから参照しているフォントも重いです。
これは漢字も含めた日本語の文字数が多いことにも起因するので、サブセット（最適化したフォント数）を使うと高速化に繋がります。