今回はワードプレスの Divi テーマで作成しているサイトの高速化をはかりたいと思います。以前にフォントを変更することによる高速化を紹介しましたが、また別の方法を提案したいと思います。さらにキャッシュも導入することによりさらなる高速化を目指します。
ワードプレス Diviの高速化 2019 正式版Googleフォントへの変更と WP Super Cache
１．正式版 Google フォントへの変更により高速化
前回、追加 CSS の設定でフォントを変更し、高速化する方法について説明しましたが、今回は、そもそも Divi が読み込んでいる Google フォントを変更して高速化することにします。
Divi で日本語サイトを作成すると、標準で読み込むファイルは早期アクセス版の Google フォント「Noto Sans Japanese」になっています。これがファイルサイズが大きくて非常に重いのです。GoogleSpeed Insights の改善提案でも下記のように指摘されます。
１）Google フォントの変更
(1) Google フォントの場所
 | 「Familiy Selected」と表示されます。そこをクリックします。 |
 | 選んだフォントファミリーの詳細が表示されるので「CUSTOMIZE」をクリックします。 |
 | 「Japanese」にチェックを入れます。※ 日本語のサブセットです。 Latin は英語表示のために必要です。 |
 | 「EMBED」をクリックして前のページに戻ると、link と CSS が確認できます。 |
(2) サイトに設定する
① head に link を貼り付ける
サイトのテーマのオプションでフォントの利用を設定します。
 | 「Divi」＞「テーマのオプション」をクリックします。 |
「統合」をクリックして表示します。
「コードをブログの <head> に追加する」の枠に Google フォントの link を貼り付けます。
 | 「変更を保存」をクリックします。 |
② 追加 CSS にフォントを貼り付ける
CSS でフォントを設定するには、
 | 「外観」＞「カスタマイズ」をクリックします。 |
追加 CSS にフォントを入力します。
 | 「追加 CSS」をクリックします。 |
 | 追加 CSS の入力枠を表示して、Google フォントの CSS を下記のようにして貼り付けます。 |
body,h1,h2,h3,h4,h5,h6,input,textarea,select{
font-family: 'Noto Sans JP', sans-serif;
} | 入力したら「公開」をクリックします。 |
２）Google フォント変更による高速化の前後比較
速度はまず GoogleSpeed Insights で比較します。Google フォントの変更前は下記のように低い点数です。フォントが過大なペイロードとして改善提案されるのは上で述べたとおりです。
 |  |
Google Chrom のデベロッパーツール表示でも下記のように、 NotoSansJP という非常に重いフォントファイルをダウンロードしており、時間がかかっているのがわかります。
フォントを上述した手順で変更することで、下記のように大幅に改善されます。
 |  |
改善の提案から過大なペイロードの項目が消えます。
ページの読み込み速度も大幅に改善されます。すばらしい。
大幅に改善されると今度は、サーバー応答時間（TTFB）が異様に遅いのが気になります。サーバーを乗り換えるのも一つの手ですが、せっかく便利に利用出来ているので、応答時間の短縮化を試してみることにします。
２．WP Super Cache の設定により高速化をはかる
ワードプレスにサイトのキャッシュプラグインを設定して、さらなる高速化を目指します。キャッシュプラグインを設定すると、 Web サイトの表示命令（HTML リクエスト）がサーバーにきた際に、都度コンテンツの作成を行う代わりに、すでに先の問い合わせにより作成された HTML をしばらくキャッシュしておき、それ（HTML レスポンス）を返すようになり、サーバーの応答時間が高速化されます。
１）WP Super Cache のインストールと設定
WP Super Cache をインストールします。
(1) WP Super Chache のインストール
WP Super Chache をインストールするには、ワードプレスダッシュボードの、
 | 「プラグイン」＞「新規追加」をクリックします。 |
プラグインの新規追加の画面で、「WP Super Cache」と入力して下記を検索します、
 | 「今すぐインストール」をクリックしインストールされたら、「有効化」します。 |
WP Super Cache がインストールされると、下記のように表示されるので、「プラグインの管理ページ」をクリックして設定画面を開きます。
２）WP Super Cache の設定
WP Super Cache を設定するには、ワードプレスダッシュボードの、
 | 「設定」＞「WP Super Cache」をクリックします。 |
(1) 簡易設定での利用
簡易設定にて利用するには、
 | 「簡易」タブの「キャッシング利用（推奨）」を選んで「ステータスを更新」をクリックするだけです。 |
(2) プリロードモードでの利用
あるいはさらに高速なプリロードモードで利用しても良いかもしれません。プリロードモードにするには、キャッシュを有効化した後に、
 | 「プリロード」タブの「プリロードモード」にチェックを入れて「設定の保存」をクリックします。 |
３）WP Super Cache による高速化の前後比較
速度はまた GoogleSpeed Insights で比較します。Google フォントの変更により大幅に高速化されていましたが、さらに改善されました。
 |  |
プリロードモードではさらに点数が上がります。
 |  |
改善の提案から、サーバー応答時間（TTFB）が無事に消えました。
Google Chrom のデベロッパーツールで表示を見ると、TTFB が２～３秒かかっていたものが、キャッシュを入れることで 225ms に、さらにプリロードモードであれば 170ms に短縮されました。
全体の速度も改善されました。
Web サイトの種類（商品販売とか）によってはキャッシュによる高速化は使えませんが、静的サイトであれば非常に効果の高い結果を得ることができます。今回もさらなる高速化が実施できました。
