wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

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

サイトの表示速度を1秒でも短くすることで、ユーザービリティは大きく向上します。そこで今回は初心者でも簡単にワードプレスのサイト表示を高速化する方法や、その際のおすすめプラグインなどについてご紹介します。

ワードプレス(wordpress)を高速化する手順!まずはサイト表示速度のユーザービリティチェック

laptop 593673 640 530x342 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

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

もしかしたら、あなたのサイトもユーザーからは同じように思われているかもしれません。ユーザーにとっての使いやすさを考える上でも、表示速度の高速化は重要です。「自分のサイトは表示速度が早い!」と思っている方もいらっしゃるかもしれませんが、実はそれはあなたの環境の時だけ早い可能性があります。

実際の表示速度には、回線速度やサーバーまでの距離など、細かな要素が全て関係してきます。例えば3G回線などがあることも考えると、あなたの環境とユーザーの環境が同じと考えるのは危ないでしょう。

testmysiteを利用して自分が運営しているサイトの表示速度をチェック!

e623d3065b9924683f46814ed0174f4c - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

 

そこで、まずはサイトの表示速度を「testmysite」で、自分のサイトの表示速度を調べることをオススメします。このサイトにURLを貼るだけで、サイトの表示速度をチェックできます。

AMPとは?

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

特にモバイルの高速化が主流で「AMP」などの導入をしているサイトも複数あります。簡単に言うと、「モバイル端末でWebページを高速表示できる仕組み」のことです。(「AMP」を日本語に訳すと、「加速化モバイルページ」となります。)なお、AMPについての詳細は、こちらの記事を参考にしてみてください。

nginxとは?

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

ワードプレス(wordpress)の高速化に必要な4つのステップ

office 625892 640 530x352 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

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

例えば、

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

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

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

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

wordpressをレンタルサーバーで運営している場合、サーバーの容量・スピード・phpのバージョンなどに左右されます。つまり、サーバー選びをした時点で、高速化の限界がある程度決まってきます。

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

fbf33c49111feb0082a4d8c87cedc350 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

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

そのため、例えばですが、さくらのレンタルサーバーやロリポップなどの、格安サーバーはできれば避けておきたいです。レンタルサーバーは共用なので、見かけは自分しか使用していないように見えても、複数人が同じサーバーを使用しています。

わかりやすいイメージでお伝えすると、シェアハウスをしているような感じです。それぞれ個人の容量が異なるのは、シェアハウスの部屋のサイズが違うみたいなイメージを持ってください。その辺りを考えると、無難なレンタルサーバーは表示も早く料金も安いエックスサーバーかなと思われます。

当サイトもエックスサーバーでサイトを運営していますが、表示速度はそのおかげもあって十分なスピードとなっています。

エックスサーバーの公式サイトへ0 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

エックスサーバーでワードプレスを始める方法はこちら

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

続いて、転送するコンテンツはできる限り少なくします。これは、画像などを圧縮して容量を小さくするということも含めます。

また、CSSファイルやJSファイルの重さも含めます。先程の画像のcontent downloadが、コンテンツを読み込んでいるのにかかっている時間です。

content - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

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

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

あなたのサイトのユーザーが、サイトを訪れた時はもちろんですが「サーバーにサイトのデータを取りに行って欲しい」というリクエスト(HTTPリクエスト)が飛びます。そのリクエストに応じて、適切なファイルをサーバーが送ってくれることをHTTPレスポンスといいます。

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

37f7311819b4d3919fbf6664309ac2a8 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

「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を高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

上の画像などはいい例で、このタイミングでトップページを読み込んでいます。レンダリング遅延・再レンダリングがある場合は、このようになります。簡単に言うと「処理待ち」です。CSSファイルをbodyの下部で読み込んだりすると同じようにレンダリング遅延が起こったりします。

ワードプレスの表示が遅い時はレンタルサーバー移行を検討するのも一手

05c6b6cd7a0cae4756e929236f112bc0 530x267 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

【公式サイト】https://www.xserver.ne.jp/

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

ただし、実際のところもともとのレンタルサーバーの質が悪いと、どんなに頑張ってもなかなかサイト表示が高速化されないことはあります。当サイトが実際に利用しているレンタルサーバーは、エックスサーバーのX10プランです。

初期費用3000円込みで年間16,500円で利用することができます。翌年度からは大体13000円程度で済みますし、長期契約にするほど料金は安くなります。以前は当サイトはさくらサーバーで運用していましたが、エックスサーバーに切り替えてから表示速度も大分改善されたように思います。0 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

実際のところ表示がかなり遅いとユーザーのストレスが溜まりますし、運営者にとってもデメリットしかありません。表示が遅いサイトはグーグルの評価も低くなってしまいますし、せっかくコンテンツが良くても検索結果で上位表示されなくなってしまう可能性もあります。

他にも料金が安いレンタルサーバーにはロリポップ!があります。筆者は別サイトはロリポップ!で運営していますが、やはり単純に表示速度や、アクセス数が増えた時でも問題なく表示されるかどうかに関して言えば、コスパが一番良いエックスサーバーかと思います。

当サイトもすでに2年以上実際にエックスサーバーで運用しており、これまでサーバー障害もなく安定してサイト表示ができています。エックスサーバーは最初に10日間の無料お試し期間もありますので、どんなものか比較したい方はまずは無料お試し期間で利用されてみるのはおすすめです。

サーバー移行はALL IN ONE WP MIGARTIONのプラグインを使えば簡単に完了しますので、そんなに初心者にとっても難しいものでもありません。

エックスサーバーの公式サイトへ0 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

エックスサーバーでワードプレスを始める方法はこちら

WordPressの高速化にオススメのプラグイン2つを厳選紹介

email 4044165 640 530x335 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

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

① 圧縮系プラグイン:EWWW Image Optimizer

ec6046fa2b6bb20e60a11b0ea0a9f42b - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

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

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

② キャッシュ系プラグイン:WP Fastest Cache

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

特に理由が無ければ、WP Fastest Cacheを使うのがおすすめです。全てのチェックボックスにチェックを入れれば設定もほぼOKのため、初心者でも簡単です。上記のEWWW Image Optimizer と WP Fastest Cacheを利用した所、webcodeの表示速度はこんな感じで3秒縮みました。

74ab3dfa09b2b7247a9596ff81a85230 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

ちなみに「WP Super Cache(※)」は昔は有名なキャッシュプラグインだったのですが、筆者が運用しているwordpress全てにおいてエラーが起こります。バージョンの問題だと思うのですが、現在はあまり使用しない方がオススメです。

参考情報:「.htaccess」を書き換えて高速化する方法もある

続いて、.htaccessの内容でgzip圧縮と呼ばれる、コンポーネントの圧縮を試みることが出来ます。具体的には下記の内容を、.htaccessに追記してください。

※ある程度プログラミングを理解している方におすすめの作業です。

WordPressの管理画面が遅い場合はかなりまずいので早急に対応を…!

woman 2937201 640 530x353 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

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

WordPressの管理画面だろうと、今までの内容のようなHTTPレスポンスやコンポーネントの転送などが行われています。ただし、管理画面まで表示速度が遅くなるというのは、結構ユーザーにとっては表示速度が遅い証拠です。

実際のサイトを見ているユーザーは大変かもしれませんので、早急に対応しましょう。以上になりますが、表示速度を考える上で重要になってくるポイントをおさらいします。

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

もし、まだサーバーを準備していない方は、利用するサーバーにも考慮されるのがおすすめです。費用や表示速度など総合的なことを考えると、WordPressの運用はエックスサーバー0 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説が一番おすすめです。

エックスサーバーの公式サイトへ0 - wordpressを高速化する方法!おすすめプラグイン2つとユーザービリティ向上の4STEPを解説

エックスサーバーでワードプレスを始める方法はこちら

おすすめの記事