ロリポップでWordPressが重いので試してみたこと備忘録

HTMLもCSSもPHPもよくわからないのですが、このブログはWordpressを利用して書いています。

サーバーは、安くて初心者向けのマニュアルが豊富なロリポップ。スタンダードプランを利用しています。

WordPressを利用している人はエックスサーバーを利用している人が多いみたいで、わたしもサーバの乗換えを検討していますが、いかんせん月々のサーバ利用料が上がるのがネックで。

月間7万PVしかないブログ運営で月額1,000円のサーバってハイスペックじゃないですか?

ということで、現在のサーバでもなんとかWordpressの表示スピードを速くしたいと試行錯誤してみました。

スピードチェックで利用したサイト

サイトのスピードチェックで有名なのがこの2つです。

PageSpeed Insightsで測定してみると、モバイルが50点台、PCが60点台と散々な結果でした。

GTmetrixで測定してみると、speed scoreがDで、YSlow ScoreがEでした。

WordPressでチェックした項目

とりあえず、高度なことはできないので簡単なところだけ、わたしでも改善できそうなところをやってみました。

  1. 不要なプラグインを削除
  2. ウィジェットの見直し
  3. CSSの圧縮のためにAutoptimizeを入れる
  4. ブラウザのキャッシュ設定を.htaccessへ追加
  5. function.phpにcontact formの読み込み設定を追加
  6. デバッグモードで確認してエラーが出ている箇所を調べる

不要なプラグインを削除

いろんなプラグインを入れていると、プラグイン同士の相性もあって不具合が出ることが多いですし、入れたことを忘れてしまっているプラグインもあったので、整理しました。

P3キャプチャ

WordPressに負荷をかけているプラグインを調べられるプラグイン「P3 (Plugin Performance Profiler)」で調べてみたところ、プラグインロードタイムは0.373。

これは遅いんでしょうか?

ウィジェットの見直し

サイドバーと記事下に忍者adとpittaという広告を入れていました。

しかし、Google Adsenseだと非同期(async)の設定ができるので問題ないのですが、忍者adとpittaはasyncの設定ができません。

どうせたいした稼ぎになっていませんので、忍者adもpittaもはずしました。

それから、twitterのタイムラインを表示させるウィジェットもつけていたのですが、これがまた毎回読み込みにいって重いのでこちらも一旦はずしました。

結構殺風景になってしまいましたが、とりあえず今回は表示速度を速くしたいので、重さの原因となりそうなものは削除していきます。

ブラウザのキャッシュ設定を.htaccessへ追加

キャッシュのプラグインもたくさんあるのですが、今利用しているsimplicityはキャッシュ系のプラグインと相性が悪いようなので、キャッシュ系のプラグインは入れていません。

参考 [改訂版] .htaccess の見直しでWebページ高速化

simplicityを利用していてプラグインではなく.htaccessでプロキシサーバキャッシュやブラウザキャッシュを利用する方法があるようなので、参考サイトの記述を.htaccessへ追加しました。

CSSの圧縮のためにAutoptimizeを入れる

あんまりプラグインを増やすと不具合の原因になるというのでプラグインはあまり増やしたくないのですが、PageSpeed InsightsがCSSとjavascriptを最適化するようにうるさくいうのでAutoptimizeというプラグインを入れました。

本当はプラグインなしで手動でやった方がいいのでしょうが、そんな知識はわたしにはありません。

Autoptimizeを入れて、設定画面でチェックを入れるだけでのHTML、CSS、JavaScriptの縮小、最適化をしてくれます。

わたしの場合はCSSだけチェックを入れました。

JavaScriptにチェックを入れると「TOPへ戻る」のボタンが動かなくなってしまうので、JavaScriptはいまのところ放置です。

function.phpにcontact formの読み込み設定を追加

お問い合わせにページで利用しているcontact formですが、どうやら固定ページだけで読み込まれているかと思いきや、すべてのページで読み込まれているようなのです。

すべてのページで読み込む必要はないので、固定ページだけで読み込むように変更しました。

参考 【WordPress】プラグイン[Contact Form 7]で必要なときだけスクリプトとスタイルシートを読み込む方法。

参考サイトのソースをfunction.phpに入れました。

デバッグモードで確認してエラーが出ている箇所を調べる

それでもやっぱり読み込みに時間がかかります。画面が表示される前の時間が長いような気がするんですよね。

WordPressにはデバッグモードというのがあって、エラーログをとることができます。

もしかしたらphpでエラーがでているのかもしれないと、ログをとってみることにしました。

参考 WordPressでのデバッグ – WordPress Codex 日本語版

WordPress Codexにあるように、wp-config.php ファイルを編集してログをとります。

 // WP_DEBUG モードを有効化
define( 'WP_DEBUG', true );

// /wp-content/debug.log ファイルへのデバッグログの出力を有効化
define( 'WP_DEBUG_LOG', true );

// エラーと警告の画面への表示を無効化
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

// 「開発版」のコア JavaScript と CSS ファイルを使用 (これらのコアファイルを変更する場合のみ必要)
define( 'SCRIPT_DEBUG', true );

wp-config.phpに挿入するとすべてのエラー、通知、警告が wp-content ディレクトリ下のファイル debug.log に出力されます。

エラーログを確認したところplugins/syntax-highlighterでエラーがでていました。

どうやら、以前利用してたソースコードを装飾するプラグインの SyntaxHighlighter でエラーがでていたようなんです。

もう5年も更新されておらず、今のWordpressのバージョンには非対応だったのにそのままにしていたみたい。

SyntaxHighlighterプラグインは削除しました。

スピードテストをしてみた

結構苦労したのですが、少しは速く表示されるようになったのでしょうか。

GTmetrixの結果

GTmetrix結果

GTmetrixの方は、かなり成果が出ていて最初の結果よりも大幅に改善されました。

PageSpeedの結果

pagespeed結果

モバイルが67
パソコンが82

まだまだですね…。

サーバーの応答時間を短縮する
Google のテストでは、お使いのサーバーは 1.3 秒で応答しました。

とあるので、もう少し他に対策ができるかどうか調べてみたいと思います。有益な情報がありましたらコメント欄にでも、SNSでも構いませんのでコメントよろしくお願いします。

シェアする

フォローする

ロリポップでWordPressが重いので試してみたこと備忘録
この記事をお届けした
節約主婦ブログ myu's blogの最新ニュース情報を、いいねしてチェックしよう!