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

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

1.速度の確認方法:PageSpeed Insights

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

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

分析を実行すると、

Divi-pagespeed-insights

結果画面で、サイトの速度が数値で表示されます。100が最も早く、数値が少ないほど遅い状態です。

モバイルとパソコンの両方で分析してくれます。

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

2.Divi 標準の高速化設定と速度の確認

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

1)テーマのオプションで高速化設定

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

divi-thme-option「Divi」>「テーマのオプション」をクリックします。
(1) Javascript と CSS の最小化と圧縮

「General」(一般)を表示します。

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

  • Minify And Combine Javascript Files :Javascriptの最小化と圧縮

  • Minify And Combine CSS Files :CSSの最小化と圧縮

(2) 静的 CSS ファイルの生成

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

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

「変更を保存」をクリックして保存してください。

2)現状(Divi 標準)での速度

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

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

3.フォントの変更で高速化

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

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

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

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

1)フォントの変更方法

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

「外観」>「カスタマイズ」をクリックします。
「追加 CSS」をクリックします。
「追加 CSS」のコード入力欄に、フォントの変更のコードを下記のように設定します。

フォントを 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
;}
変更したら「公開」をクリックして設定を保存します。

2)フォント変更後の速度

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

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

4.Autoptimize プラグインで高速化

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

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

1)Autoptimize プラグインのインストールと有効化

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

「今すぐインストール」をクリックし、インストールされたら「有効化」してください。

2)Autoptimize を設定する

Autoptimize を設定するには、

「設定」>「Autoptimize」をクリックします。

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

(1) JS、CSS & HTML の最適化

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

① Javascript の最適化

JavaScript コードの最適化」をチェックして有効化します。

Aggregate JS-files?」のチェックも入れたままにします。

 

② CSS の最適化

CSS コードを最適化」をチェックして有効化します。

Aggregate CSS-files?」のチェックも入れたままにします。

インラインの CSS を連結」のチェックも入れたままにします。

 

③ HTML の最適化
「HTMLコードを最適化」をチェックして有効化します。
④ その他オプション
「ログイン中のユーザーも自動化しますか?」のチェックを外します。
「変更を保存」をクリックして保存します。
(2) Images の最適化(画像の遅延読み込み)

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

Lazy-load images?」をチェックして有効化します。
「変更を保存」をクリックして保存します。
(3) 追加の最適化

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

① Google Fonts
「Google フォントの削除」をクリックし選択します。
 絵文字を削除
「絵文字を削除」をチェックします。
静的リソースからクエリー文字列を削除
静的リソースからクエリー文字列を削除」をチェックします。
「変更を保存」をクリックして保存します。

3)Autoptimize 設定後の速度

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

 

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

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-tips-asy-table-of-contents-logo

Divi サイトに目次機能を追加 Easy Table of Contents の設定

Divi で作成している Web サイトに目次機能を追加するのに、便利なプラグインとして「 Easy Table of...
divi-tips-sns-monarch-logo

ワードプレス Divi MONARCH インストールと設定

Divi を開発している Elegant Themes にはSNSとの連携をより容易にすることができるプラグイン MONARCH もあります。Divi を購入していると...
divi-tips-before-after-images-logo

Diviチップス Before + After Images のインストール

ワードプレス(WordPress)で作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。...

Pin It on Pinterest