MENU

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

高速化

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

SWELLのデフォルトのCDNから読み込むとリクエスト数がかなり大きく、表示速度を損なうことがあるからです。

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

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

どうしてもNoto Sans JPを使いたい場合は、フォント数を抑えたサブセットがありますので、そちらを使って高速化しつつ、Noto Sans JPを使ってみたいと思います。

その備忘録です。

結果を書いておきますが、サブセットを使うとリクエスト数が27→3まで減らせます。

目次

著者

motokiのアバター motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

WordPressテーマ「SWELL」専門の...
カスタマイズの依頼・相談

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から参照しているフォントも重いです。

これは漢字も含めた日本語の文字数が多いことにも起因するので、サブセット（最適化したフォント数）を使うと高速化に繋がります。

高速化
  • URLをコピーしました！
目次