【WordPress】サーバの応答速度が遅い! 改善のためにやったこと5つ、やらなかったこと3つ

2020年12月19日

サーバの応答速度が異様に重い、重い、重すぎないか?なんだこれ…と思っていませんか?

僕も同じ気持ちです。

こんにちわ、きみひこです。

このページでは、ページの表示スピードの遅さが気になってスピードテストで調査した結果、サーバの応答速度に異様に時間がかかっていて、結果的にページの表示スピードが激しく遅くなっていることを知った僕が

サーバの応答速度…ひいてはページの表示速度を改善するために

  • やったこと5つ
  • やらなかったこと3つ

を書きました。

同じく悩んでいる方の参考になればと思い、実際にやった経験をもとに書きました。

何をやるべきか、何をやらないでおくべきかの判断材料にしてもらえると嬉しいです。

それではいってみましょう!

サーバの応答速度が遅い

前から気になってたのですが、当ブログの読み込みが遅いんですね。

WEB PAGE TESTというツールでのテスト結果が以下です。

2020-12-15_13h25_15

きみひこ
きみひこ
なにこれ…めっちゃ遅い

ひとつめのブルーのバーを見てください。

これはページが読み込まれる前のサーバの応答速度を示しています。画像とかHTMLとかCSSのデータが読み込まれる前の時間ですね。

サーバの応答までに5秒以上。ページを読み込む前が激しく遅いのは何なんだろうか…。

僕の使っているレンタルサーバーは、さくらインターネットのスタンダードプランです。

一般的で比較的メジャーですし、サーバ性能がそこまで悪いとも思えない。不思議でした。

サーバの応答速度なんだから、サーバ側の問題化と思いますよね? ところが同じサーバで運営している別のサイトは、もっと高速なんですよね。

なのでサーバの性能によってサーバの応答速度が遅いというのが疑わしい気がしてきました。

色々やってみた結果を、書いていきます。

改善のためにやったこと5つ

試してみたことで、結果的に高速化に効果があったように思われるのは、以下の通りです。

  • 不要なプラグインの停止及び削除
  • 不要なウィジェットは完全削除
  • 不要な画像などの読み込みを物理的に減らす。
  • 画像はlazyload(遅延ロード)する
  • WordPressのキャッシュをオンにする

ひとつひとつ解説します。

不要なプラグインの停止及び削除

よく言われることですが、プラグインが多くなるとwordpressの動作速度は遅くなっていきます。

サーバの応答速度に関連しているのかは不明ですが、とりあえず不要なプラグインは停止しました。

また停止だけでなく削除までしたほうが、よりよい気がしたので、とにかく不要なものは削除しました。

注意プラグインを停止したあとで「やっぱり使いたくなった」ということはゼロじゃない思います。その場合削除までしてしまうと面倒なので、不安な方はとりあえず停止のみでOKです。僕もモノによっては無効化だけにして残してますし。

不要なウィジェットは完全削除

ウィジェットとは、言い換えるとブログのパーツのことです。部品ですね。

新着記事の表示パーツとか、カテゴリ表示パーツとか、そういうパーツです。

僕の環境では、ウィジェットの編集画面上でたくさんのウィジェットを配置しているものの、ほとんどのウィジェットが現在は非表示状態(設定として残しているだけで、ページには表示していない状態)でした。

物理的にこれらウィジェットはすべて削除すると、かなりスピードアップしました。

600_FireShot Capture 103 - ウィジェット ‹ ハウツー野郎 — WordPress - tech2.kimihiko.jp

(閲覧注意)上記は不要なウィジェットを削除する前の様子です( ◜ᴗ◝)

ひろ
ひろ
あかんやろこれ

改めてみると、あかんかもねこれ…
きみひこ
きみひこ

メモ「ウィジェットのロジック」というプラグインにより、条件文を書いて、大量のウィジェットの中から、ページに表示するウィジェットと、表示しないウィジェットを出し分けていたのですが、これにより保存するウィジェットの数が膨大になり、結果的にwordpressの動き自体をかなり遅くしていたのかも。

不要な画像などの読み込みを物理的に減らす。

読んで字のごとくですが、画像の読み込みを減らすと高速化します。

画像はテキストと比べると、何倍も重いデータですから…。

というわけで、あっても無くても同じような画像や、広告表示を減らしました。

ここでひとつ注意なのですが、CSSを用いてページに表示しないようにすれば良いだろう、という考え方はNGです。

たとえばCSSの display:none; を使って非表示にしても、内部的にはデータをロードしているので、高速化の効果はありません。

ひろ
ひろ
ねえねえ、小さな画像だったら、減らしても減らさなくても関係なくない?

良い質問!
きみひこ
きみひこ

小さな画像の場合、重さ的には影響が少ないかもですが、数が多い場合は注意が必要です。

ウェブページを表示の際、ブラウザはHTMLの内容(指示)に従って、画像の数だけ繰り返し呼び出しています。

この呼び出しをリクエストと言いますが、リクエスト数が多くなればなるほど、読み込みが遅くなります。

なので小さな画像でも沢山あればリクエスト数が増え、速度に影響するので数を減らせるながら減らした方がよいです。

もしくは、次に説明するlazyloadを使いましょう。

画像はlazyload(遅延ロード)する

前の「不要な画像などの読み込みを物理的に減らす。」でも書きましたが、画像はウェブページの読み込み速度に大きな影響を及ぼします。

なので、不要な画像等の外部データは読み込まないようにしましょうと書きました。

とはいえ、画像があったほうが目をひいたり、説明しやすかったり、、スピードアップのためとはいえ、画像を減らすのにも限界があるでしょう。

画像を徹底的に排除するのは、現実的じゃありません。

そこで現実的な解決方法として、lazyload(画像の遅延ロード)という機能を使います。画像を後から読み込むという機能です。

ざっくり説明すると、通常、ページ内のすべてのデータが読み込まれてからページを表示しますが、画像は後回しにして、まずページを表示してから画像はブラウザで表示している範囲のところから、徐々に読んでいきます。

結果的に、画像の多いページほど、ページの表示スピードが高速化を実感できますよ。

ただし便利な反面、プラグインによってはSEO的に不利になったり、画像表示に不具合が出るなどもあるので、導入には一定の注意はしたほうがよいでしょう。

不具合の実例は別ぺージに書いたので参考にしてください。(以下の関連リンクです)

とはいえ、正しいLazyloadは、デメリット無く高速化につながるので、出来る限りやったほうがいいと僕は思います。

WordPressのキャッシュをオンにする

WordPressのキャッシュとは、WordPressがキャッシュを作成して、再訪問者に向けてキャッシュ済みの静的なページを表示することで、ページ表示を高速化する仕組みです。

ぼくはルクセリタスというテーマを使っていますが、キャッシュに関する設定の「バッファリングの逐次出力を有効にする」を有効化にすることで、明らかにページの表示がスピードアップしましたよ。

WordPressキャッシュを有効にするには他にもプラグインでも色々提供されてます。ググってお気に入りのものを探してみてください。

キャッシュに関してはブラウザキャッシュというキャッシュもあり、概念が分かりづらいと思います。

外部サイトで分かりやすい説明がありましたので、気になる方は以下ページも参考にしてください。

注意点

これまでにご紹介した「lazyload」や「キャッシュ」による高速化を行う方法としては

  • プラグインを使う方法
  • テーマの持つ設定を使う方法

があります。

さらにプラグインを使うにしても、様々な種類のプラグインがあります。

それぞれの機能を併用した場合、機能が競合して意図せず高速化しない場合があるので注意しましょう。

とくに、併用していることに気づかないまま導入してしまうこともあるので、高速化の動作が何かおかしい…と感じたら、同様の機能がどこかにあり、有効になっていて、それが原因となっていないか調査してみましょう。

きみひこ
きみひこ
色々調べて理解していくしかないですね

改善のためにやらなかったこと3つ

やると高速化するかもですが、やらなかったことも挙げておきますね。

  • 画像を圧縮し直すこと
  • データベースの最適化
  • サーバのリプレイス

ひとつひとつ解説します。

画像を圧縮し直すこと

すでにそこそこ画像をアップロードしている場合、画像のサイズを圧縮してアップロードし直すなんて、考えただけでもめんどくさいですよね…。

ということで、僕はもう画像に関しては、今回のこのタイミングでは特に何もしませんでした。

とはいえ、画像の圧縮(軽量化)に関しても、便利なプラグインが色々あるので、いろいろ試されるとよいと思います。

僕はちょっとめんどくさくてやらなかっただけなので…( ◜ᴗ◝)

データベースの最適化

WordPressはデータベースを使った動的なサイトです。

データベースの重さも、サイトの表示スピードに影響を及ぼします。

もしかするとサーバの応答速度にも影響を及ぼすのかなと…探ってみました。

調査したところ、現在のところこのサイトのデータベース容量は100MB台でした。

軽くもないですがめちゃくちゃ重いというわけでもないので、今回の高速化では触れませんでした。

メモデータベースの肥大化対策としては、既に Optimize Database after Deleting Revisions というプラグインを導入して、リビジョンが増えすぎないようにしてます。

注意データベースはwordpressにおいて、とくに重要な部分です。腕に自信のない方は、直接触るのは避けましょう。(最悪の場合、再起不能になります。)データベースの容量削減(最適化)を行いたい場合は、プラグインを探して使ってみましょう。

サーバのリプレイス

これはもうなんですかね。

最終手段だと思っているので…。やってません(笑)

そもそもそんなにアクセスが多いサイトだとも思ってませんし( ◜ᴗ◝)

(このサイトは2020年12月現在では月間3万PVくらいです)

おしまいに

色々やってみまして、結果的に7~9秒ほどかかっていたページが1~3秒程度で表示できるようにになりました!!

気になっていたサーバの応答速度の部分も、時間がかなり短縮されていました。

このあたりのスピードなら、まぁ許容範囲なのかなと。

(ページによっては、0秒台も出ました。)

「サーバの応答速度が遅い」というのが気になって色々やってきたわけですが、設定のチューニングでのみで高速化したので、結果的にサーバの性能に起因するものではなかったのかなと思います。

なので、サーバの応答速度が遅い、と言われてもサーバの性能に直接関係しているわけではないこともある、というのが今回の一番の学びだったかもですね。

また、とくに高速化に大きくつながったのは以下でした。

  • 不要なウィジェットは完全削除
  • lazyload(画像の遅延ロード)
  • WordPressのキャッシュをオンにする

不要なウィジェットに関しては、前述したとおり、僕がウィジェットを異様に増やしていたので、もしかするとこれが大きな原因だったかもですね( ◜ᴗ◝)

lazyloadやキャッシュによる高速化は定番の対策だと思いますが、これらにプラスして、画像の容量削減も行えば、さらにスピードアップにはつながるでしょう。

とはいえ、追求しだすとキリがないので、僕はいったん気が済んだのでこのあたりにしておきました。

( ◜ᴗ◝)

それに世の中のネット回線のスピードは今後も上がり続ける一方だと思っているので、そこまでシビアになる必要もないのかなと楽観的に思ってたりします。

もちろん、ページが軽いに越したことはないですが、どこかで折り合いをつけてバランスを取るしかないんじゃないでしょうか。

スピードも大事ですが最も大事なのはコンテンツですしね。

ひろ
ひろ
自戒ね?

そう…自戒…
きみひこ
きみひこ
この記事は役に立ちましたか? 役立った 役立たなかった
0 人中 0 人がこの記事は役に立ったと言っています。

★新記事下ハイブリッドads