【SANGOユーザ必見】FontAwesomeの高速化でGoogleAdSenseの審査に通りました。

GoogleAdSenseの審査に通過するために色々な高速化を試しましたが、最後に残ったのがFontAwesomeの高速化でした。

ふーみん

審査通らなかった時の腕組みおじさんを何度見たことか。。

FontAwesomeを利用している人が少なくて高速化の方法がわからずに苦労したので記事にします。

この記事はこんな人にオススメです。

この記事では次の通り、ページ速度の計測の仕方からFontAwesomeの読み込みを高速化する方法を紹介します。

それでは解説していきます。

１．ページ速度の計測方法

googleが提供するサービスで、PageSpeed Insights（ページスピードインサイト）というWebサイトがあります。

PageSpeed Insights (web.dev)

PageSpeed Insightsで自分のブログの計測したいページのURLを入力すると表示速度が数字でわかります。

携帯電話とデスクトップの両方を計測できますが、携帯電話の方が表示速度が出にくいです。

私は携帯電話の表示速度のパフォーマンスを上げた結果、GoogleAdSenseの審査に通過することができました。

初め計測した際のパフォーマンスは42しかなかったですが、高速化によって95まで上げることができました。

色々な高速化をしましたが、ここではFontAwesomeの読み込みの高速化を紹介します。

その他の高速化は他の記事で紹介します。

FontAwesomeで読み込みに時間がかかっている場合は、計測結果の「レンダリングを妨げるリソースの除外」を見ればわかります。

次の通り、css/all.css（use.fontawesome.com）の減らせるデータ量が930msと出ていてかなり時間がかかっています。

これがなかなか消えないのですが、２つの対応で解消できました。

次の通り、css/all.css（use.fontawesome.com）が無くなればOKです。

それでは２つの方法について順番に説明します。

２．FontAwesomeをサーバ内で読み込む

FontAwesomeは利用される人は下記URLをヘッダに追加して、CDN経由で取得していることが多いと思います。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

自動で内容が更新されるメリットがある一方で、毎回通信するためページ速度が遅くなるデメリットがあります。

速度を重視するのであればローカルサーバ内にFontAwesomeを置いて高速化しましょう。

やることは次の２つです。

１つ目について説明します。

まずは下記のFontAwesomeのダウンロードページにアクセスします。

Download Font Awesome Free or Pro for the Web or Desktop | Font Awesome

次に下図のように「Free For Web」のボタンを押下してFontAwesomeをダウンロードします。

ダウンロードできたら圧縮されたファイルを解凍します。

次に解凍したフォルダの中にある「css」、「webfonts」の２つのディレクトリを、ローカルサーバの子テーマディレクトリ配下にコピペします。

私のようにwordpressやSANGOのテーマを利用している場合は、下記のような構成になります。

　/public_html/liberalhumin.com/wp-content/themes/sango-theme-child/css

　/public_html/liberalhumin.com/wp-content/themes/sango-theme-child/webfonts

次にcssのフォルダ内を「all.mi.css」のみになるようにファイルを削除します。

２つ目について説明します。

先ほどローカルサーバに配置したall.min.cssを読み込むために、ヘッダに下記のようにコードを追加します。

<link rel="stylesheet" href="/wp-content/themes/(子テーマ)/css/all.min.css" type="text/css">

SANGOを利用している場合は下記になります。

<link rel="stylesheet" href="/wp-content/themes/sango-theme-child/css/all.min.css" type="text/css">

３つ目について説明します。

CDN経由でFontAwesomeを読み込んでいる場合はヘッダから下記コードを削除します。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

以上でCDN経由ではなく、ローカルサーバのFontAwesomeを読み込むようになります。

大抵の人はこれだけでPageSpeed Insightsのパフォーマンスが向上します。

３．SANGOでのFontAwesomeの読み込み削減

SANGOの有料テーマを利用している場合は注意が必要で、SANGOのテーマでもFontAwesomeを読み込んでいます。

SANGOのテーマのFontAwesomeの読み込みの高速化は設定変更だけでできます。

WordPressにログイン後、「外観」→「カスタマイズ」→「詳細設定」と遷移します。

その中に「FontAwesomeの読み込み方法」という項目があるので、「SANGOで利用されている最低限のフォントを読み込む」を選択します。

これで設定は完了で、PageSpeed Insightsの計測結果からcss/all.css（use.fontawesome.com）が消えて高速化完了です。

まとめ

以上、ページ速度の計測化方法とFontAwesomeの高速化の方法２つの紹介でした。

色々高速化をしてもGoogleAdSenseの審査に通らず、最後にFontAwesomeの高速化したら審査に通ったので、FontAwesomeやSANGOを使っている人はぜひ試してみてください！