【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

本サイトは「WordPress」を利用して作っていますが、サイトの表示が非常に遅いと感じています。

そもそも本サイトは手順が多く、且つわかりやすいように「画像」を多用して作っていますが、それはすべて「エンジニアの自分のため」という目的でした。

しかしいくら「自分のためのサイト」と言っても、自分が閲覧する際に非常にストレスを感じてしまいます。

そこで今回は、非常に遅い本サイトの表示速度を上げるために様々なプラグインを導入してみます。

 

 

改善前のベンチマーク

最初に表示速度が非常に遅い本サイトのベンチマークを取っておきます。

Google が提供している「PageSpeed Insights」というサイトでパフォーマンスを測定しておきます。

 

https://developers.google.com/speed/pagespeed/insights/?hl=ja

 

 

最初は「モバイル」タブを開いています。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

想像以上に悪い結果となりました。

あまり見たことがない「速度スコア」「31」です。

 

 

次に「パソコン」タブを開きます。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

パソコンに関しては、まあまあの「58」です。

「中の下」といったところでしょうか。

 

 

 

WordPress プラグインを試してベンチマークを取得し確認する

以下の WordPress プラグインをインストールしてベンチマークを取得し確認してみます。

 

 

ただ、私自身以前にもいくつか試してみたとこがありましたが、環境により不具合が発生することがあるので、1つ1つ試して非常によいスコアを出したプラグインはそのまま使い続けることとします。

 

ベンチマークは PageSpeed Insight で取得する

ベンチマークは「PageSpeed Insight」で取得します。

 

PageSpeed Insight

https://developers.google.com/speed/pagespeed/insights/?hl=ja

 

 

使い方は非常に簡単で、下図の白い入力欄にベンチマークを取得したい URL を入力して「分析」ボタンをクリックするだけです。

数十秒でベンチマークを取得できます。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

Lazy Load を導入する

WordPress のばっしゅボードより「プラグイン」「新規追加」をクリックして「Lazy Load」で検索したところ、下図の「a3 Lazy Load」がヒットしました。

 

当初予定の「Lazy Load」もありますが、まずは「a3 Lazy Load」を試してみます。

 

 

 

 

 

「今すぐインストール」ボタンをクリックします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

「有効化」ボタンをクリックします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

設定は全部デフォルトのままにします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

a3 Lazy Load プラグイン導入後のベンチマーク

「a3 Lazy Load」プラグインを導入後、再度「PageSpeed Insights」でサイトの表示速度を確認した結果、なんと「モバイル」のスコアが「54」まで上がりました!

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

「パソコン」「モバイル」同様、あっという間に「72」までスコアが上がりました!

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

ここまで改善されると今までは何だったのかと思います。。

 

 

 

EWWW Image Optimizer を導入する

a3 Lazy Load だけで個人的には満足ですが、さらに「EWWW Image Optimizer」を導入してみます。

たくさんプラグインをインストールすれば、その分効果も上がるとは限らないのですが、ベンチマークがどれくらい変わるのか見てみたいので「EWWW Image Optimizer」を導入します。

 

 

WordPress ダッシュボードより「プラグイン」「新規追加」をクリックし、検索ウィンドウに「EWWW Image Optimizer」と入力します。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

インストールが完了したら「有効化」ボタンをクリックして有効化します。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

EWWW Image Optimizer プラグイン導入後のベンチマーク

「EWWW Image Optimizer」プラグインを導入後、再度「PageSpeed Insights」でサイトの表示速度を確認した結果、逆に「モバイル」のスコアが「47」まで下がりました。

 

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

「パソコン」でも「71」と若干スコアが下がりました。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

そのため、一旦「EWWW Image Optimizer」プラグインを削除(アンインストール)しました。

相性などあるので、必ずしもすべてのサイトに当て嵌まるわけではありません。

 

 

 

Head Cleaner(wp_head() cleacer) プラグインを導入する

次に「Head Cleaner」プラグインを試してみます。

WordPress に「Head Cleaner」プラグインを導入したところ、WordPress のサイト表示速度が上がったとの声がインターネット上に結構あったので、私も試してみようと「Head Cleaner」の導入をしようとしましたが、下図のように「最終更新:2年前」の記載がありました。

つまり、現在は完全に開発がストップしている状態です。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

更新が止まっているプラグインは、仮に脆弱性が発見されたとしても対応してくれないので、最初からインストールしない方がいいです。

ということで「Head Cleaner」プラグインは導入しないことにしました。

 

 

 

同じく「wp_head() cleaner」という wp_head() で使用していないタグを削除するプラグインがあり、且つ定期的に更新しているようなので、こちらを試してみました。 

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

インストールしたら「有効化」ボタンをクリックしてプラグインを有効化します。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

wp_head() cleaner プラグイン導入後のベンチマーク

「モバイル」のスコアは「52」です。

※a3 Lazy Load は効果が高いのでインストール&有効にしたままの状態です。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

「パソコン」のスコアは「67」です。

※a3 Lazy Load は効果が高いのでインストール&有効にしたままの状態です。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

スコアが若干低くなり、効果がないと考えたため「wp_head() cleaner」プラグインも削除(アンインストール)しました。

 

 

 

W3 Total Cache プラグインを導入し検証する

最後に「W3 Total Cache」プラグインを導入し検証します。

※a3 Lazy Load は効果が高いのでインストール&有効にしたままの状態です。

 

 

 

WordPress ダッシュボードより「プラグイン」「新規追加」をクリックして、検索欄に「W3 Total Cache」と入力します。

下図のように検索結果に「W3 Total Cache」が表示されたら「今すぐインストール」ボタンをクリックします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

「有効化」ボタンをクリックします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

以下のように設定します。

WordPress ダッシュボードより「Perfomance」「General Settings」をクリックします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

General の Preview mode では「Enable」になっています。(つまり、デフォルトでは「有効」になっています)

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

「Page Cache」「Enable」にします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

 

「Minify」は特に変更しません。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

「Opcode Cache」は特に設定しません。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

「Database Cache」「Enable」にします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

「Object Cache」「Enable」にします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

それ以降はデフォルトのままで「Save all settings」ボタンをクリックします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

W3 Total Cache プラグイン導入後のベンチマークで障害発生!

「W3 Total Cache」プラグイン導入後のベンチマークで異常な数値が出て障害が発生していることが分かりました!

 

 

「モバイル」がありえない「100」です。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

「パソコン」はエラーが出力されています。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

サイトを確認したら error が出力された

ブラウザでアクセスしたところ、下図のように「Fatal error: Allowed memory size of 209715200 bytes exhausted(tried to allocate 4096 bytes) in /home/xxxx/gojourney/go-journey.club/public_html/wp-includes/wp-db.php on line 1343」のメッセージが出力されました。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

スマホから確認しても同じように「Fatal error: Allowed memory size of 209715200 bytes exhausted(tried to allocate 4096 bytes) in /home/xxxx/gojourney/go-journey.club/public_html/wp-includes/wp-db.php on line 1343」のメッセージが出力されました。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順

 

 

 

 

エラーの原因はメモリが足りないため

「Fatal error: Allowed memory size of 209715200 bytes exhausted(tried to allocate 4096 bytes) in /home/xxxx/gojourney/go-journey.club/public_html/wp-includes/wp-db.php on line 1343」

の原因ですが、簡単に日本語に訳すと「致命的なエラー、割り当てられたメモリ209MBが枯渇しました」となります。

 

 

エックスサーバーの割り当てられたメモリを確認してみます。

「memory_limit」「200M」です。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

エックスサーバーのコントロールパネルからメモリ割り当てを変更する

このサイトは「エックスサーバー」で運用しています。

「memory_limit」「200M」から「512M」へ増やします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

「memory_limit」「512M」に設定して「確認画面に進む」ボタンをクリックします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

設定内容を確認し「変更する」ボタンをクリックします。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

設定変更完了画面を確認します。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

エックスサーバーは上記のようにPHPの設定(php.ini)を自由にカスタマイズできます。

そのため、自分で調べてレンタルサーバーをカスタマイズしたい方には特におすすめです。

(レンタルサーバー初心者の方でもデフォルトで使いこなせます)

 

 

エックスサーバー(XSERVER)を徹底研究

 

 

【レンタルサーバー初心者向け】 エックスサーバーで「無料独自SSL」を導入してサイトを「https化」してみた

 

 

 

 

エックスサーバーのコントロールパネルからメモリ割り当て後の動作確認

以下のようにサイトが表示されることを確認しました。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

W3 Total Cache プラグイン導入後の再度のベンチマーク

php の設定を変更後、サイトが表示されることを確認し再度ベンチマークを取得してみました。

 

 

 

「モバイル」「44」と悪いスコアが出ました。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

「パソコン」「74」とまあまあのスコアが出ました。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

「a3 Lazy Load」だけに比べて「W3 Total Cache」も追加するとモバイルのスコアが落ちるため、プラグインは停止することにしました。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

サイト表示高速化プラグインを導入した際に気を付けたいこと

今回、いくつかのサイト表示高速化プラグインを導入した際に、スマホからサイトの確認チェックをした際に、以下のように画面全体が黒くなり、何も表示されなくなる現象がありました。

 

スマホの場合だけですが、新しいページにアクセスした際に下図のように画面が真っ黒になり、何も表示されなくなる現象がありました。

しかし、ページが全く表示されないわけではなく、画面をタッチするとページが表示されます。

ただ、しばらく待っていればページが表示されるかといえばそうではなく、画面をタッチしない限りは絶対にページが表示されません。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

初めてアクセスした方は、サイトに何か不具合があるのではないかと感じると思います。

(もちろん、アクセス数も下がることになると思います)

 

 

 

状況によっては画面が真っ白になり、画面をタッチするまでずっと白い画面のままになっていることもありました。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

上記のようにプラグイン導入後に画面が真っ黒もしくは真っ白になったプラグイン

以下の3つのプラグインを導入すると、スマホからのアクセスで「画面が真っ黒」、もしくは「画面が真っ白」になりました。

 

まったくスマホからのアクセスで「画面が真っ黒」、もしくは「画面が真っ白」にならなかったのは「a3 Lazy Load」だけでした。

 

 

結論

ということで結論としては「a3 Lazy Load」だけを導入することとしました。

最後に再度「a3 Lazy Load」だけを導入したサイトの速度です。

 

モバイルは「54」のスコアです。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

 

 

パソコンは「79」のスコアです。

【WordPress】WordPress サイトの表示が遅い場合に、表示速度を上げてサクサクと閲覧できるように設定する手順【WordPressサイトの高速化】

 

 

 

a3 Lazy Load プラグインを入れた際の参考値

 

 

 

 

 

 

 

 

 

Posted by 100%レンタルサーバーを使いこなすサイト管理人