Adobe Fontsの設定を最適化してブログを高速化する

2022年06月08日 / 2025年04月05日

WordPressでブログを始めようとデザインを作り出して数か月…開発の方に一生懸命になって、最近やっと記事を書き出すまでこぎ着けました。

ブログを書き出して気になったのが、インストールしたSite Kit by Googleのプラグインで表示される【速度】の部分。

スマホでの表示パフォーマンスが異常に低い…。

しばらくは、この速度回復のための調整が必要そうです。

今回は、スマホの速度回復のためにAdobeフォントの設定を見直しました。

Adobe FontsをWebフォントとして使うと重くなる？！

このブログは、Adobe Fontsの小塚ゴシックProを使用しています。　(現在は、別のフォントに変更しています)

Webフォントは、OS・ブラウザに関係なく共通したデザインを表示できるメリットがありますが、日本語フォントは他国のフォントに比べて文字数が多いため重くなるようです。

確かに、日本語って【かな／カタカナ／漢字】と多いですもんね。

PageSpeed Insghtsで速度の警告がでるのも、そのせいかなとAdobe fontsを確認してみました。

Adobe Fontsの最適化方法

1．Adobe FontsのサイトからWebフォントの設定を見直す方法

Adobe Fontsのサイトから【フォントを管理】をクリックします。

フォントの管理ページから上部のタブ【Webプロジェクト】を選択して、該当のWebプロジェクト部分にある【プロジェクトを編集】を押して設定変更することができます。

2．必要最低限のフォントに絞ってチェックする

使用しているフォントは１つでしたが、太さの種類ほとんどにチェックが入っていました(汗)

大は小を兼ねる根性で、使うかも！？とほとんどにチェック入れてたんですね。

CSSを見直しながら、細字と太字１種類づつに絞りました。

3.フォントの表示設定を変更する

フォントの種類の次は、表示設定を変更します。

変更前はAutoになっていました。デフォルトのまま使用しているとAutoになります。

これを【swap】に変更します。

swapについてはAdobe fontsの説明から引用します。

Web フォントがダウンロードされるまで、CSS で設定したフォールバックフォントを表示します。Web サイトにアクセスしたユーザーには、このオプションで、スタイルなしのテキストを示す Flash、つまり FOUT が表示される場合があります。font-display settings を使用した Web フォントのパフォーマンスのカスタマイズ (adobe.com)

デフォルトのAutoの場合、Webフォントがダウンロードされるまで適用された文字は読み込まれません。しかし、swapを選択するとWebフォントがダウンロードされるまでは代替フォントを使って表示します。

設定変更はこれで終了です！

最後にもう一度、PageSpeed Insightsを確認してみる

変更前のスクショを取り忘れた(汗)ので、比較はできませんが60台でした。

Googleのサイト順位を決定する基準の中で、表示スピードは重要な項目のひとつです。

まだまだ改善する所はありますが、ひとつずつやっていくしかないですね。ガンバロー