Divi サイトの高速化 フォントの変更とAutoptimizeプラグイン

実は Divi で作成した日本語サイトは、初期設定のままでは極端に重く遅いのです。今回はいくつかの設定を変更することにより高速化を行います。極端に重い一番の理由は下記で詳しく説明しますが、非常に重い日本語のフォントを読み込んでいるためです。それ以外にも高速化のために行っておいた方が良いことがありますので、ここにまとめておきます。

サイトの速度の確認には、Googleの PageSpeed Insights を用います。速度の計測とともに改善点の提案をしてくれるので、非常に使い勝手が良いサイトです。

使い方も、ページスピードインサイトにアクセスして、自身のWebサイトのアドレスを入力して「分析」をクリックするだけです。

分析を実行すると、

また、画面をスクロールすると、詳細な分析結果が表示され、処理速度をアップするための提案を表示してくれます。今回は設定した高速化の成果をこのサイトを利用して比較することにします。

Divi はテーマのオプションに高速化のための設定がいくつかあります。その設定がなされているかまずは確認してみましょう。

ワードプレスのダッシュボードから、

「General」（一般）を表示します。

下記の２つが有効になっていることを確認します。無効であれば有効化してください。

「ビルダー」＞「詳細設定」を表示して、静的CSSファイルの生成が有効化されているのを確認してください。無効であれば有効化してください。

テーマのオプションの設定を変更したら必ず、

グーグルスピードインサイトでサイトの速度を分析すると、 Divi 標準状態での速度は、モバイルで 21 、パソコンで 45 という非常に遅い状態であることがわかります。

残念な結果になってしまったので、設定の変更を行い高速化をはかることにします。

え？フォント？って思いますよね。でも実はこのフォント設定の変更が、非常に効果が大きいのです。

グーグルスピードインサイトで、結果表示の改善提案を確認していると、「過大なネットワークペイロードの回避」の項目が異常に大きいことに気づけます。詳細を表示すると、

NotoSansJP… というフォントファイルが、非常に大きなサイズであることがわかります。上記の赤枠の部分ですが、極端に桁が違います。まずこれを対処しましょう。

これがどこに使われているかというと、自身のサイトを表示して、ページのソースを確認していくと「 body, h1, h2, h3, h4, h5, h6, input, textarea, select 」に使われていることが確認できます。

変更するには、ワードプレスダッシュボードの、

フォントを Mac 標準のメイリオに変更する場合、

body,h1,h2,h3,h4,h5,h6,input,textarea,select{
 font-family:"メイリオ", sans-serif
;}

あるいは、フォントを Windows 標準の游ゴシックに変更する場合、

body,h1,h2,h3,h4,h5,h6,input,textarea,select{
　font-family:"游ゴシック", sans-serif
;}

フォント変更後の速度は、モバイルで 69 、パソコンで 84 と大幅に改善されました。これだけ改善されるのですから、フォントの変更は必ず行った方が良いです。エレガントテーマさん、使っている日本語フォントが重すぎですよね。

以上までの設定は、必ず行っておいた方が良いでしょう。

Divi にはもともと、すでに説明した Javascript と CSS の最小化と圧縮の機能があるのですが、実は Autoptimize プラグインを利用することで更なる圧縮と高速化が可能です。

※ プラグインの使用でかなり点数が上がったので、高速化されたものと思いましたが、実は Autoptimize による最適化は無料で利用できる範囲では、 Divi サイトの高速化についてはそれほど効果が大きくないことが判明しました。すでに Javascript も CSS も圧縮され、静的コンテンツのキャッシュもされているからです。

Autoptimize は、ワードプレスダッシュボードの「プラグイン」＞「新規追加」で検索しインストール可能です。「Autoptimize」と入力して下記のプラグインを検索してください。

Autoptimize を設定するには、

タブを切り替えて設定を行います。

「JS、CSS ＆ HTML」で Javascript と CSS および HTML の最小化と圧縮を設定できます。

「Images」で画像の遅延読み込みを設定できます。※画像の遅延読み込みを設定すると写真ギャラリープラグインがうまく動かなくなることがあります。

「追加」では追加の最適化ができます。 Google フォントと、絵文字、クエリー文字列の最適化を設定します。

Autoptimize 設定後の速度は、モバイルで 76 、パソコンで 91 とさらに追加で改善されました。

※実際の表示スピードを、前後で比較したのが下記になります。だいぶ点数もあがり、改善の提案も減るのですが、実はそれほど大きな速度の改善になっていないとは残念です。逆に言えば、Divi はその標準の機能でかなり高速化されているということです。