wordpress(ワードプレス)の高速化!キャッシュ系プラグインとサーバー選定で、「遅い(重い)表示速度」を改善するエンジニアの転職情報サイト現役のjavaエンジニアが運営する転職情報サイトです。更新日:2022-10-16wordpress(ワードプレス)の高速化!キャッシュ系プラグインとサーバー選定で、「遅い(重い)表示速度」を改善するwordpress(ワードプレス)の高速化は、サイトの管理者であれば必須の要件です。WordPressは、ページを表示する際に、データベースから動的にコンテンツを取ってくる仕組みになっています。静的なページと比べると、大幅に遅くなってしまいます。ページの表示速度が遅いと、下記のような損失を招いてしまいます。ユーザーは、Webページの表示に待てるのは最大2秒で、3秒以上かかると40%以上のユーザーは離脱してしまう。参考元:海外SEO情報ブログ:最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPSあなた自身も、表示の遅いサイトにイライラしてページを離れた経験があるでしょう。このように、ページの表示速度が遅いと、最悪の場合「離脱」といった機会損失になってしまいます。Googleは、サイトの表示速度が「検索順位」を決める重要な要素であることを明言しています。表示速度の低下は、SEO的にも悪い影響も与えます。SEO対策とは上記の点からも、いかに、サイトの高速化が重要かが分かるでしょう。Wordpressの表示速度を高速化させる対策ですが、大きく以下の6つになります。今回の記事では、これら6つの高速化対策の手順を、順に解説していきます。以下、目次になります。画像サイズの軽量化(圧縮)と、読み込みタイミングの最適化ワードプレス・ページのソース内容を最適化するWordPress(ワードプレス)の、利用ウィジェットの見直しWordPressの高速化に必須の「サーバー選定」:ロリポップと、Xserverの比較スポンサード・リンクWordPressの高速化実績!遅い(重い)「表示・読み込み速度」の改善結果まずは、当ブログを例に、高速化対策を行った結果「これだけ、はやくなりました!」っていう実績を示したいと思います。以下に、高速化対策をおこなう前と、おこなった後の「TOPページの表示速度」を挙げてみます。※利用ツールは、下記の2つ。Metrics」これらのツールを利用して、表示速度を計測しました。https://viral-community.com以上です。Cacheなど)WordPressの高速化対策:一つ目は、「キャッシュ」の設定です。重要な項目となります。Cache今回は、これらを利用して、設定していくのですが、その前に「キャッシュ」について理解しておきましょう。キャッシュとは・・・「一時的に保持するデータ」という意味で、このデータ(キャッシュ)を、Wordpressページの表示時に利用することで、本来は「動的」に生成しなければいけないコンテンツを、「静的」なコンテンツとして表示することができます。することで、動的にページを生成する工程をカットすることができ、表示速度を格段にアップさせる事ができます。Webサイトには、静的ページと動的ページの2種類があります。動的ページとは、ユーザーからのアクセスの度に、HTMLを構成するところから始めるページのことです。要は、最初から作られているファイルなのか、、、それとも、ユーザーからの要求の度に、生成されるファイルなのか、、、この違いです。最初から作られている「静的ページ」の方が表示速度がはやいのは、明白です。結果、ユーザーからの要求ごとに発生する、プログラムの稼働やデータベースへのアクセスが不要となり、その分、Webページの表示速度が大幅にアップするんですね。キャッシュの種類についてまた、一口に「キャッシュ」といっても、様々な種類が存在します。WordPressブログを管理するサーバー間の、主要なキャッシュの種類になります。上図のとおり、WordPressで扱う主要なキャッシュは、4つになります。順に解説していきましょう。【ページキャッシュ】ページキャッシュは、Wordpressにて、動的に生成された「HTMLページ」を丸ごとキャッシュして、サーバー側で保持します。することで、1度「ページキャッシュ」を作っておけば、次回以降のユーザーからのリクエスト時には、キャッシュされたHTML(静的ページ)を表示することができます。これによって、動的にページ生成する工程が無くなるので、高速化になるわけですね。キャッシュが作られ・・・と繰り返すわけです。【データベース・キャッシュ】データベース・キャッシュとは・・・DBに対しての、クエリ要求による「出力結果(返答結果)」を、1時的に保持するキャッシュになります。WordPressは、記事を表示するとき、MySQL(DB)からデータ(記事情報)を取り出すのですが、その取り出したデータを、キャッシュにするわけです。することで、次回以降、わざわざDBにクエリを投げて、データを取得する。いった工程を削減できるわけですね。【オブジェクトキャッシュ】オブジェクト・キャッシュとは・・・PHPなどのプログラミング言語で扱う「変数」の値を、1時的に保持するキャッシュになります。「変数に値を設定する」といったプログラムによる処理を削減することができます。「変数」に、DBから取得したデータを格納する場合もあるので、DBとのやりとりも削減対象となります。【ブラウザキャッシュ】ブラウザ・キャッシュとは・・・ユーザー側のブラウザに、ページの表示結果を1時的に保持するキャッシュになります。そのユーザーの次回以降のアクセス時は、そのキャッシュが利用されるので、サーバー側でページ情報を生成して表示する。いった工程が丸々無くなり、表示速度の高速化につながります。上図のように、2回目以降のユーザーからのリクエストは、「キャッシュ」が有効(最新)かどうかをサーバに問い合わせ、最新であれば、ブラウザに保存されたキャッシュが表示されます。最新データでなければ、サーバ側で再度「HTMLファイル」を生成して表示します。Modified」というレスポンスを返します。このレスポンスが返ることで、キャッシュの有効性が担保され、そのまま表示される。いった流れになるわけです。ブラウザ・キャッシュは、このようにサーバー側で、HTMLファイルを生成したり、そのファイルを送信(レスポンス)するといった工程が無くなるので、サーバ・リソースの大幅な節約にもなります。以上、Wordpressで扱われる、主要なキャッシュでした。WordPressキャッシュ系プラグインの比較とサイトに適した選び方では、お待たせしました。次は、これらのキャッシュを設定・利用する「プラグイン」の紹介と、その設定手順を解説していきます。・・・キャッシュによって「Wordpressブログ」の表示速度を上げる、超有名プラグインです。Cache」だけでしょう。Cache」のインストールや設定手順については、下記記事にてまとめているので、ぜひ参考にしてください。Cache(Wordpress)のインストール・設定手順(使い方)と、スマホ対応によるエラーについて以上です。Cache」が、最もおすすめですが、他にもいくつか主要なモノがあります。Cache」は、Wordpressのインストール時に、デフォルトで付いていて、非常に有名かつ一般的なプラグインです。Cache」を利用できない場合もあるでしょう(WordPressに特化したレンタルサーバーの「wpX」など)このような場合は、以下のキャッシュ系プラグインを利用することをおすすめします。※ブラウザキャッシュについては、手動にて「.htaccess」を設定する(設定手順については、後述しています)上記を見たら分かるように、それぞれのプラグインが対象とするキャッシュ機構は、1つのみです。Cache」みたいに、主要キャッシュ機構全てに対応していないので、複数のプラグインを利用する必要があります。それぞれの使い方(設定手順)について、順に解説していきます。・・・「ページ・キャッシュ」の生成(設定)プラグインになります。ページキャッシュなので、静的なHTML(キャッシュ・データ)がそのまま表示されることで、動的にページ生成している工程がカットされ、その分の表示速度・高速化につながります。ファイルの圧縮・最適化機能(HTML/CSS/JavaScript)や、CDN(コンテンツ・デリバリー・ネットワーク)との連携機能も搭載されています。具体的はインストールや設定手順については、下記記事にて解説しています。・・・データベース・キャッシュを生成するプラグインになります。データベースのクエリによる「取得結果」をキャッシュすることで、データベースとのやりとりがカットされるので、その分の高速化につながります。Fix」の設定画面にて、キャッシュの有効化を「ON」にするだけで使えます。その他、詳細な設定手順については、下記記事にて解説されています。・・・オブジェクト・キャッシュを生成するプラグインになります。次回以降、「その変数に値を設定する」といったプログラム処理をカットすることができるので、その分、表示速度の高速化につながります。Cache」を選択します。Cache」の設定画面が開くので、下図のとおりに設定してください。上図から、キャッシュファイルの場所(パス)や、管理画面にログイン中のキャッシュ機能を「OFF」にする。設定ができるようになっています。【ブラウザ・キャッシュの設定】キャッシュ機構において、「ブラウザ・キャッシュ」は、非常に重要な一つです。設定しておく必要があります。ブラウザ・キャッシュの設定自体は、わざわざプラグインを利用しなくても、手動で「.htaccess」ファイルを設定することで実現できます。.htaccessとは?.htaccessで、できる事と設定手順についてまとめてみたブラウザ・キャッシュの具体的な設定手順については、下記記事にてまとめられているので、参考にしてください。Cache」を利用しない場合の、インストールしておくべきプラグインと、その設定内容でした。WordPressの高速化に必須!「CDN」との連携CDNとは・・・コンテンツ・デリバリー・ネットワークの略で、ウェブコンテンツを配信するのに最適化されたネットワークのことを意味します。具体的には、Webサイトにある画像や動画・CSSなどの静的コンテンツを、Webサイトが管理されている「サーバー」とは、別のサーバーにて管理しそのサーバーが、代わりに配信することで、負荷が分散され、Webサイトの表示速度の向上にもなる仕組みになります。ここでいう「別のサーバー」を、「CDNサーバー」といいます。Cache」も、その一つです。Flare」を利用すべきです。Flare」と連携する手順については、下記記事にてまとめているので、ぜひ参考にしてください。一般的なWEBページのコンテンツは、大まかにいえば「テキスト」・「画像」で出来ています。JPG形式なら数十KB、PNG形式なら数百KB上記から、テキストサイズと比べたとき、いかに「画像データ」の容量が大きいかが、分かるでしょう。サイズの大きい画像データは、それだけ表示速度にマイナスの影響を与えます。そこで、Webサイトの管理者は、画像データを扱う際に、下記二点の対策をやっておくべきです。metrics」にて計測。このように、スコア・読み込み速度、共にアップしました。それぞれの手順について、順に解説していきます。Optimizer」プラグインが便利です。過去にアップロードした画像も、まとめて圧縮することができる、大変便利なプラグインになります。Optimizer」を利用することで、JPGファイル:平均15%、PNGファイル:平均50%ほど、画像サイズを圧縮することができます。具体的な設定手順や使い方については、下記記事にて解説されているので、参考にしてください。Optimizer」は、レンタルサーバーの環境によっては、利用できない場合があります。現状確認されているのは、「wpXレンタルサーバー」では利用できない模様。これは、画像の圧縮処理を実行する際に「exec関数」を利用しているのですが、この関数が、サーバー側で実行できない事が原因のようです。ちなみに、当ブログは「ロリポップ」を採用していて、このプラグインを利用していますが、特に問題は起きていません。上述しているとおり、「画像データ」は、テキストに比べて大幅にサイズが大きいので、表示に時間が掛かってしまいます。画像データの読み込みタイミングを最適化する必要があります。具体的には、Webページを表示する際、画面上の可視領域についてのみ画像を読み込み、画面外の画像の読み込みは行いません。下部にスクロールするたびに画像を、動的に読みこんでいきます。することで、何十枚写真が設定されていようが、可視領域のみの読み込みのため、ユーザーにストレスを与えることなく、ページを表示させることができます。ページ表示時のスピードが大幅に高速化されるでしょう。Load」というプラグインです。Load」を追加して(下図、参考)プラグインを有効化したら、これで基本「OK」なのですが、一点変更しておくべき箇所があります。状態だと、画面下部の「200px」を読み込み対象としますが、ちょっと余裕を持たせるために「400px」にしています。以上、これで設定完了です。Load」が有効になっていないようなので、当ブログでも停止しました。Load」の文字列があれば使われているということ。ワードプレス・ページのソース内容を最適化するWebページのソースは、大きく下記3つの要素で構成されています。【JavaScript】このうち、読み込み時間に影響してくるのが、「CSS」と「JS」です(テキストデータに関しては、容量も微々たるもので、特に気にする必要は無い)なので、Webページの表示速度:高速化のために、ソースを最適化する場合、「CSS」と「JS」が対象となります。具体的には、CSS、JSの圧縮(軽量化)CSS、JSの読み込み順序の変更この2点が必要になります。1点目は、単に容量を削減することで、その分表示速度を高速化させます。通常、CSS・JavaScriptは、共にソース上の「headタグ」内に記述されています。これだと、ページを表示する際、「headタグ」内から読み込まれていくため、CSSやJSの読み込みが終わるまで、ページ表示に関する処理は、一旦ストップしてしまいます。これが、ページの表示において、非常にボトルネックとなるため、「headタグ」内でなく、「bodyタグ」の終了直前に、これらのファイルを配置してやります。することで、ボトルネックが無くなり、ユーザーの体感速度が大幅に改善します。Cleaner」というプラグインを使うことで、これらの事を簡単に実現してくれます。CSSとJSを中心に、ページを構成するソースを最適化して、表示速度の高速化を目的としたプラグインになります。具体的な設定手順については、下記記事にて解説しているので参考にしてください。WordPress(ワードプレス)の、利用ウィジェットの見直しWordPressの高速化を考えるにあたって、利用しているウィジェットの見直しも必要になります。画面上に表示されている「ウィジェット」は、当然ページの表示速度にも影響を及ぼしています。以下に該当する「ウィジェット」は、利用を再検討した方が良いでしょう。SNS連携のもの(各ソーシャルメディアとの通信処理で、時間が掛かる)追尾式のもの画面上部のもの当ブログでも、上記要件を考慮したうえで、以下を施しました。SNS連携かつ追尾式のモノ。こちらは「LinkWithin」を無効化して、手動にて、カテゴリごとの固定記事を表示させるようにした※「LinkWithin」は、ページを読み込む度に、関連記事を動的に取得しているので、固定記事を表示させるのと比較して、時間が掛かってしまう。TimeLine」は、10以上のツイート・リツイート内容を動的に取得しているため、「フォローボタン」と比較して、読み込みに時間が掛かってしまう。してくれているユーザーの名前やアイコン・リンクを、動的に取得しているため、「Like(イイね)ボタン」と比較して、読み込みに時間が掛かってしまう。※Wordpressブログを運営する上で、SNS連携のウィジェットは、必ず必要なモノです。ページの高速化を考えた場合、ユーザーが容易に分かるモノであれば良く、必要以上なモノは表示させない事を理解しておきましょう。あなたのWordpressブログのウィジェットも、一度見直してみてください。WordPress(ワードプレス)の高速化に必須の「サーバー選定」:ロリポップと、Xserverの比較Webサイトの表示速度は、サーバーも当然関係してきます。個人でWebサイトを運営している方は、ほとんどが「レンタルサーバー」を利用しているでしょう。この「レンタルサーバー」ですが、月額数百円~数千円のモノは、ほとんどが「共有サーバー」となっています。共有サーバーとは、名前のとおり、1台のサーバーを、複数人で共有して利用する形態のサーバーになります。共有している人数が多く、一人あたりの利用可能なリソースが少なくなります。管理側からしたら、1台のサーバーに、詰め込めるだけ詰め込んだほうが、コストが掛からないですからね。安いレンタルサーバーというのは、ほとんどが、このような状態になっているわけです。同じサーバーに割り当てられた、他のユーザーのWebサイトにアクセスが殺到すると、サーバーに負荷がかかり、そのサーバーを使っている、すべてのユーザーに影響が出てしまいます。表示スピードが大幅に遅くなってしまう、、、などですね。安易に「安いサーバー」を選んでしまうと、上記のようなリスクが存在し、自らの首を絞めてしまうのです。あるサイトでは、月額約200円といった格安のロリポップサーバーと、月額1000円の中規模サイト用のエックスサーバー。サーバーの性能で表示速度は変わる上記だと、応答時間に「3倍」近くの差が出ています。応答時間だけではなく、レンタルサーバーを選定する上で、もう一つ重要な指標があります。それが、「転送量の上限」です。転送量とは、ユーザーからのリクエストに対する、「レスポンス(Webページの表示)の通信データ量」のことです。各レンタルサーバー会社では、この「転送量の上限」が決められています。上記のように、定められているそうです。これを基に計算していくと、下記が、1日あたりのPV上限数になります。上記から、ロリポップでも、5万ものPV数が上限となっているので、1日あたり数百や数千レベルのサイトの場合は、特に気にする必要はないでしょう。1日」ほどのアクセスで、特に問題なく運用されています(上限数を超えたら、503エラーが出ますが、滅多に出ないので)※503エラーとは・・・転送量の上限数を超えているため、閲覧を制限している。いった旨のエラーです。上限数に達していなくても、このエラーが頻繁に出るようであれば、サーバーのグレードアップが必要でしょう。※レンタルサーバーの選定については、下記記事にもまとめているので、ぜひ参考にしてください。・レンタルサーバーを選定する際の9つの軸で、3つのおすすめサーバーを比較してみる以上です。コメントをキャンセルメールアドレスが公開されることはありません。~未経験者へのおすすめも。~未経験者についても。~求人情報の見方や注意点も。