WordPress

wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

traffic 332857 1920 - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

最近のサイト運営のトレンドで、「高速化」というものがあります。WordPressでも、それは一緒です。

サイトの表示速度を1秒でも短くすることで、ユーザービリティは大きく向上するので、今回扱う「高速化」のトピックをしっかり実践しておくのはオススメです。

wordpressを高速化しよう

例えばネットサーフィンなどをしている時に、サイトの表示速度が遅くてブラウザの「戻る」ボタンを押した経験や、「×ボタン」を押した経験はありませんか?

もしかしたら、あなたのサイトもユーザーからは同じように思われているかもしれません。

ユーザーにとっての使いやすさを考える上でも、表示速度の高速化は重要です。

まずはサイトの表示速度のユーザービリティチェック

「自分のサイトは表示速度が早い!」と思っている方もいらっしゃるかもしれませんが、実はそれはあなたの環境の時だけ早い可能性があります。

実際の表示速度には、回線速度やサーバーまでの距離など、細かな要素が全て関係してきます。

例えば3G回線などがあることも考えると、あなたの環境とユーザーの環境が同じと考えるのは危ないでしょう。

testmysiteを利用してサイトの速度をチェック!

e623d3065b9924683f46814ed0174f4c - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

そこで、まずはサイトの表示速度を「testmysite」で、自分のサイトの表示速度を調べることをオススメします。

このサイトにURLを貼るだけで、サイトの表示速度をチェックできます。

高速化のトレンドは?AMPとは?

高速化を手助けしてくれるツールなどは、毎年出ているため流行りのツールなどもあります。

特にモバイルの高速化が主流で「AMP」などの導入をしているサイトも複数あります。ななお、AMPについては、下の記事を参考にしてみてください。

あわせて読みたい
lightning 199651 1920 - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ
WordPressでプラグインでAMP対応するには?メリット・デメリットは?あなたのWebサイトにはAMPが導入されているでしょうか? AMPを導入することによって、モバイルページの表示速度を高速化させるこ...

nginxでのwordpress運用

また、これはサーバーレベルでの話のため該当しない方もいるかもしれませんが、Apacheよりも早い処理速度を出すことができるnginx(エンジンエックス)というものがあります。

このnginxを使って、wordpressを運用することもできます。良くわからない方は気にしないでOKです。

wordpressの高速化に必要なこと

続いて、Wordpressのサイトの高速表示を考える場合、意識すべきことがあります。

例えば、

  1. サーバーの応答時間を短くすること
  2. 転送するコンテンツはできるだけ容量を少なくすること
  3. HTTPレスポンスの回数を減らすこと
  4. レンダリング遅延・再レンダリングをしないこと

などです。それでは一つ一つ詳細を確認します。

① サーバーの応答時間を短くする

まずは、サーバーの応答時間を短くすることです。これは例えば、処理の早い言語を用いるといったことも含みます。

wordpressをレンタルサーバーで運営している場合、サーバーの容量・スピード・phpのバージョンなどに左右されます。

つまり、サーバー選びをした時点で、高速化の限界がある程度決まってきます。

ちなみに、サーバーの応答時間は下の画像のTTFBという所に影響してきます。※この図はデベロッパーツールで「Network」を選択することで表示できます。

fbf33c49111feb0082a4d8c87cedc350 - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

実は、このサーバーの応答時間が遅いと色々と問題があるのですが、それは後述しますね。

格安サーバーはできれば避けたい…

そのため、例えばですが、さくらさーばーやロリポップなどの、格安サーバーはできれば避けておきたいです。

レンタルサーバーは共用なので、見かけは自分しか使用していないように見えても、複数人が同じサーバーを使用しています。

わかりやすいイメージでお伝えすると、シェアハウスをしているような感じです。

それぞれ個人の容量が異なるのは、シェアハウスの部屋のサイズが違うみたいなイメージを持ってください。

その辺りを考えると、無難なレンタルサーバーは表示も早く料金も安いエックスサーバーじゃないかなとは思います。0 - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

② 転送するコンテンツは出来る限り少なくすること

これは、画像などを圧縮して容量を小さくするということも含めます。また、CSSファイルやJSファイルの重さも含めます。

先程の画像のcontent downloadが、コンテンツを読み込んでいるのにかかっている時間です。

content - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

この容量ができるだけ小さい程、読み込みも速くなります。

③ HTTPレスポンスの回数を減らすこと

用語を使うと難しいですが、あなたのサイトのユーザーが、サイトを訪れた時はもちろんですが「サーバーにサイトのデータを取りに行って欲しい」というリクエスト(HTTPリクエスト)が飛びます。

そのリクエストに応じて、適切なファイルをサーバーが送ってくれることをHTTPレスポンスといいます。

この回数を減らすと何故良いのかを説明していきますね。まずはこの画像の赤枠内に「Request/Response」と書いてある事を確認してください。

37f7311819b4d3919fbf6664309ac2a8 - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

「Request sent」から、Waiting(TTFB)になります。つまり、リクエストの回数だけWaiting(TTFB)が起こると思ってください。

そして、Waiting(TTFB)はサーバーの応答時間に依存します。

この説明はざっくりし過ぎていて、正確ではないですが「HTTPレスポンス数 x サーバーの応答時間」がかなり表示速度に効いてきます。

HTTPレスポンスが1回のサイトであれば、そこまで影響しないですが、基本的には複数回起こります。

例えば、

  1. ページ自体のHTMLソースリクエスト(HTTPレスポンス1回目)
  2. HTMLソースに記載のCSSファイル①リクエスト(HTTPレスポンス2回目)
  3. HTMLソースに記載のCSSファイル②リクエスト(HTTPレスポンス3回目)
  4. HTMLソースに記載のJSファイル①リクエスト(HTTPレスポンス4回目)

このような感じになります。

そのため、どれだけCSSファイルとJSファイルを纏めていても3回はリクエストが起こるということですね。だからこそ、サーバーの応答速度に拘る必要があります。

④ レンダリング遅延・再レンダリングをしないこと

最後に、レンダリングとは、データを解析して実際にページとして表示する処理だと思ってください。

もちろんサイトはHTMLのみの場合と、HTML+CSSの場合で表示が変わります。この時、前者と後者でレンダリングの処理が変わるということになります。

CSSがある場合は、HTMLのみの場合と異なりCSSの内容を踏まえてHTMLデータの解析を再度行います。これがレンダリング遅延です。

この時、HTTPレスポンスが再度起こっていることにも注意しましょう。

6d44557105cdc5c90f923f1f2f3852ec - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

上の画像などはいい例で、このタイミングでトップページを読み込んでいます。レンダリング遅延・再レンダリングがある場合は、このようになります。

簡単に言うと「処理待ち」です。CSSファイルをbodyの下部で読み込んだりすると同じようにレンダリング遅延が起こったりします。

WordPress高速化にオススメのプラグインを比較

ここまでの内容で、ある程度高速化の為に必要なことはわかりましたでしょうか?

それでは続いて、プラグインを利用して、コンテンツ容量を下げる方法もあるので紹介していきます。

圧縮系プラグイン

まずは、圧縮系のプラグインです。画像の圧縮などが行えます。

EWWW Image Optimizer

EWWW Image Optimizer

これは、画像圧縮で有名なプラグインです。今まで「メディア」に保存していた画像を一括最適化もできます。

ec6046fa2b6bb20e60a11b0ea0a9f42b - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

キャッシュ系プラグイン

次は、キャッシュ系のプラグインです。キャッシュを用いることで、ユーザーのブラウザ内にデータを残すことが出来、表示するのにかかる時間を削減できます。

WP Fastest Cache

WP Fastest Cache

特に理由が無ければ、WP Fastest Cacheを使うのがおすすめです。全てのチェックボックスにチェックを入れれば設定もほぼOKのため、初心者でも簡単です。

上記のEWWW Image Optimizer と WP Fastest Cacheを利用した所、webcodeの表示速度はこんな感じで3秒縮みました。

74ab3dfa09b2b7247a9596ff81a85230 - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップ

WP Super Cache(※)

こちら、昔は有名なキャッシュプラグインだったのですが、僕が運用しているwordpress全てにおいてエラーが起こります。

バージョンの問題だと思うのですが、現在はあまり使用しない方がオススメです。

.htaccessを書き換えて高速化

続いて、.htaccessの内容でgzip圧縮と呼ばれる、コンポーネントの圧縮を試みることが出来ます。

具体的には下記の内容を、.htaccessに追記してください。

WordPressの管理画面が遅い場合はかなりまずい…

稀に、Wordpressの管理画面を開くのさえ、めちゃくちゃ遅くなることがあります。

WordPressの管理画面だろうと、今までの内容のようなHTTPレスポンスやコンポーネントの転送などが行われています。

ただし、管理画面まで表示速度が遅くなるというのは、結構ユーザーにとっては表示速度が遅い証拠です。

実際のサイトを見ているユーザーは大変かもしれませんので、早急に対応しましょう。

WordPressの高速表示方法に関するまとめ

以上になりますが、表示速度を考える上で重要になってくるポイントをおさらいします。

  • サーバーの応答時間を短くすること
  • 転送するコンテンツはできるだけ容量を少なくすること
  • HTTPレスポンスの回数を減らすこと
  • レンダリング遅延・再レンダリングをしないこと

もし、まだサーバーを準備していない方は、利用するサーバーにも考慮されるのがおすすめです。

費用や表示速度など総合的なことを考えると、Wordpressの運用はエックスサーバー0 - wordpress高速化とプラグイン比較!ユーザービリティ向上の4ステップが一番おすすめです。