WordPressの表示速度が遅い時の原因と対処法11選

2023.05.22
2023.05.22

みなさんこんにちは!エンジニアの高澤です! 今回はWordPressの表示速度について、サイトが重くて表示速度が遅くなっている場合のデメリットや原因、また、その対処法などを、WordPress初心者のかたから上級者の方まで必見の内容をご提供したいと思います!

WordPressのサイトの表示速度とは?

そもそもサイトの表示速度とは何でしょうか? これは単純に「ページを開いた時にページの内容が全て表示されるまでの時間」と言っていいでしょう。

当たり前の話で恐縮ですが、本は開いたらすぐ次のページがびっしり全て内容があってすぐに読めます。ですが、ウェブサイト上のページはGoogleのChromeのようなブラウザから「https://〜」というURLを利用してアクセスする必要があります。

この時に、インターネットを通してパケット通信が行われ、サーバーからページのデータが送られてテキストや画像のデータを読み込んで…のように、ページを開く1つの動作だけでも、多くの複雑な技術を通して初めてウェブページを閲覧することができます。

詳しい内容は省きますが、このようなことからウェブサイトのページにはサイトごとのページによって表示速度が早い遅いの違いがあったりするのです。

WordPressの表示速度が速くなった時のメリット

WordPressの表示速度が速くなった時のメリットはかなり大きいものがあります。 その理由を一つひとつ説明いたします。

ユーザー体験が向上する

まず1つ目のメリットはユーザー体験が向上します。 ユーザー体験とは、いわゆるサイトを使った時の操作性や使いやすさのことをいいます。

開くまでの時間が遅いページというのは、大抵、ページ内でキーワードを入力して検索した時や、記事を絞り込むためにカテゴリーボタンを押したりしたときなど、何かしらの操作をした時にも遅くなる可能性が高いです。

WordPressで作られたページ(サイト)の速度を上げることで、このような「使いずらさ」を無くしてくれて、ユーザー体験が向上されることで多くの人に使われるサイトに繋がりやすくなります。

離脱率の低下につながる

2つ目のメリットは離脱率が低下することです。

そもそも「離脱率」とは、ある一つのページを訪れたユーザーがそのページからサイトを離れる割合のことを言います。 ページの表示速度が速くなると、ユーザーがページをすぐに離れる可能性が軽減されます。

その理由は、ページにアクセスしたときにページ全体が表示されるまでの時間が短いことによって、ユーザーの待ち時間がなくなりストレスがなくなるからです。

みなさんも体験したとこがあるかもしれませんが、想像してみてください、何か調べたいものがあって検索した時に表示される検索結果から自分の気になったページのリンクをクリックしページへアクセスします。その時に10秒、20秒経っても表示されないページに遭遇したらストレスを感じますし、すぐに別の記事を読みたくなりますよね?

10秒、20秒は極端かもしれませんが、実は本の2、3秒だけでもストレスを感じる人は多くの割合を占めているという調査結果が出ております。

ページの表示速度を改善することで、このような離脱を防いでくれてユーザー満足度に大きく貢献してくれます。

SEO対策になる

何と言ってもこれはかなり重要な項目ではないでしょうか? 3つ目はページ表示速度を上げることでSEO対策に繋がります。

実はGoogleなどの検索エンジンは、「ページの表示速度」を検索結果の表示順位の判定の要素としておいています。

ウェブサイトの存在目的はサイトごとに様々ですが、多くの人にサイトを見てもらって自分、自社を認知してもらいたい、そしてビジネスに繋げたいなどの目的を一番においているサイトが多いかと思います。 そのための手段の一つとしてSEO対策をし、ユーザーが気になったキーワードでブラウザから検索し、検索結果の並び順を上位に上げて目にとまりやすくするということは、ウェブサイトの運用にとっては必要不可欠なのではないでしょうか。

WordPressのサイトや管理画面の表示速度が遅くなる主な原因とは

さて、WordPressのサイトの表示速度が遅い原因をここで考えていきましょう。

画像の数、データ容量が多い

こちらはどちらかというとサイト上の表示速度に関係してくる話かと思いますが、画像の数やデータ容量が多いとそれだけ通信トラフィックが発生するので、その分表示の処理に時間がかかるため表示速度が下がる原因になります。 そのため、画像の圧縮をおこなったり画像のサイズ(解像度)を荒れない程度に下げて適切な対応をすることが重要です。

PHPのバージョンが古い

PHPのバージョンが古いというのは、PHP環境のPHP本体のバージョンが古いということをいいます。 筆者が案件でよく経験したのですが、「やけにページの表示が重いな…?」と思った時に問題となっていた主な原因の一つによくこのPHPのバージョンが古いということがありました。

後述の対応策でも同じ説明をしますが、ここでいうPHPのバージョンアップとは、WordPress本体とプラグインのバージョンを最新にし、PHPを適切なバージョンにすることをいいます。

例えば、2023年5月時点では、WordPressのバージョンが「6.2.2」であり、このバージョンに適したPHPのバージョンは「7.4以上」とされています。そのため、もしサーバーのPHPバージョンが「7.1」や「7.2」などとなっていた場合は、おそらく動作が重く表示速度が落ちていることかと思いますので、「7.4」に変更することで、WordPressの動きが全体的に早くなります。

WordPressの仕組みを前提に実装されていない

WordPressはデータベースと連携しデータの表示をおこなっています。 例えば、記事のタイトルや本文、サムネイル画像などのデータのことをいいます。

これらのデータの一つ一つを表示させるたびにトラフィックが発生するため、無制限にWordPressループなどでの一覧を表示させたり、とんでもないバイト量の画像データを複数表示するなどした場合は表示速度が遅くなります。

また、WordPressは動的ページを生成する仕様のため、サーバー負荷などの点についても気をつけなければなりません。

WordPressのサイトや管理画面の表示速度を改善する方法

ここからは実際にサイトの表示速度を速くするための改善方法を解説していきます。

【対策1】画像データの圧縮

まず一番簡単で手が回りやすいところで初めに「画像データの圧縮」について触れていきたいと思います。 画像データの圧縮とは「画像にあるメタデータを削除」することをいいます。

以外と知られていないのですが、画像にはメタデータといって、撮影日時や撮影したカメラの情報などが含まれています。

例えばEXIFデータが一つの例ですが、このメタデータを削除することによってこの分のデータ量が減って画像データが少し軽くなります。

【対策2】画像のサイズ(解像度)を変更する

画像のサイズ(解像度)を変更することもかなり画像を軽くすることにつながります。

おそらく画像系のスピード改善ではサイズ変更が一番効果が高いでしょう。こちらはシンプルに画像を小さくするイメージです。

例えば、横幅2000px、高さ900pxの解像度の画像があったとして、それを比率をそのままに横幅1400px、高さ630pxに小さくするなどのイメージです。

画像データ容量(バイト)も大きく削減され、最適な画像の大きさになりページの表示速度が速くなる可能性が高いです。

【対策3】複数の小さな画像を一つの画像に結合

複数の小さな画像を一つの画像に結合することも表示速度の改善につながります。

こちらにも理由がありまして、ウェブページでは画像一つひとつに対して読み込むためのHTTPリクエストという通信を行います。 そのため、当然画像の数が多くなるとその分HTTPリクエストが発生しページの読み込みが遅くなってしまいます。

そこで、小さな画像などはまとめて一つの画像にしてしまって、HTTPリクエストの数を減らすことが表示改善につながります。

ただし、これはケースバイケースで極端になんでも一つの画像にしてしまえば良いということではありません。適度にふさわしい箇所を一つの画像にすると良いでしょう。

【対策4】HTML・CSS・JavaScriptを圧縮する

サイトを構成するHTML、CSS、JavaScriptを圧縮することも表示速度の改善に効果があります。

圧縮とは、基本的にHTMLやCSS、JavaScriptはコード記述としてインデントや半角の空白などを用いて読みやすく保守しやすい形で綺麗なコードで記述されている場合があるかと思います。 ですが、このインデントや半角の空白など一見何もデータがないように思えますが、実は立派なテキストデータでデータとして容量が発生してしまいます。 そこで圧縮をおこなって、コードの中の空白など不要な文字を削除し極限まで詰めたコードにすることで、無駄な読み込みがなくなりデータ量が削減され、表示速度の改善につながります。

ただし特にJavaScriptを圧縮した時に不具合が発生しやすいためご注意ください。

【対策5】HTML・CSS・JavaScriptのコードの位置に気をつける

コードの位置とはそのままで、ウェブページのプログラムは基本的に上から読み込まれるようになっております。その仕組みを踏まえて、上から読み込まれる際にしばしば問題が発生するのが特定のコードが読み込まれる順番です。

特に筆者的にはCSSとJavaScriptのコードの位置、コード量、などがページの表示速度に大きく影響を与えることを経験上感じております。

結論どのように改善すれば良いかというと、「HTMLの下にCSS」「HTMLの下にJavaScript」を徹底して守ってください。

その理由は、基本的にCSSとJavaScriptはHTMLありきで動作するからです。 例えば、CSSの場合はHTMLが存在して初めてCSSで色やレイアウト、装飾などでデザインすることができますが、もし先にCSSが読み込まれてしまっていれば、CSS読み込み後の後のタイミングでHTMLが生成されて、CSSによるデザインはされますが一瞬デザインされていないただのHTMLコードがチラつきページ表示速度にも影響を与えてしまいます。

またJavaScriptの場合は、DOMといってHTMLのid属性やclass属性を利用してHTMLを取得し、その取得したHTMLに動きや機能を与えることができる特性があります。こちらもCSSと同じで、HTMLありきなので、先にHTMLを読み込み、対象物を取得してから動きを与える、というのが決まりになっています。 ここで注意点として、CSSでは後から読み込んでもHTMLをデザインしてくれますが、JavaScriptではしばしば動かないといった不具合が起こりやすいです。

【対策6】キャッシュを利用する

キャッシュを利用するとは、一時的に保存されるデータであるキャッシュの機能を用いてページを表示させるようにすることです。

キャッシュを説明しますと、ユーザーが一度ページを閲覧した場合そのページは一時的に保存され、次に同じページを閲覧したときはその保存されたページをブラウザから表示させる仕組みをキャッシュといいます。 つまり、一回ごとにデータベースからデータを取得してページを生成するという工程が省かれて、データトラフィックが削減されてページの表示速度が改善されるわけです。

WordPressではプラグインとして「WP Super Cache」というプラグインがあります。設定は簡単なのでぜひインストールしてお試しください。

【対策7】WordPressループなど一覧で表示させている数を減らす

筆者がWordPress案件でしばしばみられるのが、WordPressループなどでコンテンツを一覧で表示させる場合、繰り返しデータベースへデータを取得するためにアクセスしなければなりません。 その場合、アクセスの都度サーバーへの負荷はもちろん、ページへ表示するまでの時間がかかってしまい非常に重たいページの動きをしてしまう可能性があります。

その改善策として、一覧表示させる数を制限し、ページネーションなどを利用しましょう。 そうすれば、1ページごとの表示速度が改善し縦に長すぎなくすることができるので、ユーザー体験工場にもつながります。

また筆者の経験として、WordPressループで表示させた一覧をslick.jsやswiper.jsなどのカルーセルのjQueryプラグインを利用した時に数が非常に多いとそれなりに重くなってしまった経験がありますので注意しましょう。

【対策8】プラグインの数をできる限り減らす

WordPressでは大変便利な機能としてプラグインがあります。このプラグインの数を減らすことで表示速度の改善につながります。

その理由は、プラグインはそもそもWordPressの機能を拡張するプログラムのことをいいますが、PHPやJavaScriptなどのプログラミング言語で作られています。

PHPで作られているため、多くの場合WordPressと接続されたデータベース連携によるデータのやり取りが発生するかと思います。このデータベース連携によるデータのやり取りとりが発生するため、その分トラフィック量が増え、読み込みに時間がかかってしまいます。

またソースコードが膨大な量になり、シンプルにコード量が増えるとその分プログラムを読み込む時間が増えて読み込みに時間がかかってしまいます。

なので、プラグインは必要最低限の数にとどめておきましょう。筆者の感覚としては、多くても15個前後ぐらいが目安になるかと思います。

【対策9】PHPのバージョンをアップする

実は最もWordPressサイトの表示速度を改善できる手段がこちらになります…!PHPのバージョンを上げることによって、表示速度が速くなります。 ここでいうPHPとはPHP環境のことで、ご利用されているサーバー(レンタルサーバー等)から設定できます。

ただしここでいうPHPのバージョンアップとは、むやみにバージョンアップすればいいという訳ではなく、WordPress本体とプラグインのバージョンを最新にし、PHPを適切なバージョンにすることがここで説明したいことになります。

例えば、2023年5月時点では、WordPressのバージョンが「6.2.2」であり、このバージョンに適したPHPのバージョンは「7.4以上」とされています。 そのため、もしサーバーのPHPバージョンが「7.1」や「7.2」などとなっていた場合は、おそらく動作が重く表示速度が落ちていることかと思いますので、「7.4」に変更してください。

※PHPのバージョンを切り替えた際にプラグインやWordPress本体が古いバージョンなどによりエラーが起こってしまうことがよくあるので、事前に必ずバックアップや、サーバーの管理画面からいつでもPHPのバージョンを切り替え前に戻せる状態を作っておきましょう。

【対策10】コードやファイルで不要なものは削除する

こちらはシンプルにHTMLやCSS、PHPやJavaScriptなど不要なコードやファイルがあれば削除しましょう。 HTMLなどプログラムに関しては、記述がある以上基本的に読み込んでしまいますので、その分の余計なコードの処理をさせないという意味で、不要なコードがありましたら削除するようにしてください。

【対策11】そもそも利用しているサーバーを見直す

サーバーに関することも見直してみることも有効です。 多くの場合、レンタルサーバーをご利用いただいているかと思いますが、いろんなアプローチがあります。

例えばエックスサーバーやロリポップ、さくらレンタルサーバーなど多くのレンタルサーバーが提供されているかと思いますが、それぞれの料金やスペックによって適切なものを選定することが重要です。

また、このレンタルサーバー以外にも仮想プライベートサーバー(VPS)やAWSなどのクラウドサーバーなどがあるため、サーバーの種類自体を選定してみてもいいかもしれません。ただし、初心者には難易度が高いため、ご自身で手がつけられない場合は専門家に相談して慎重に進めることをお勧めいたします。

上級者向け!WordPressのキャッシュ系関数を利用する方法

WordPressではTransients APIやWP_Object_Cacheクラスなど、キャッシュ系の機能が備わっています。 エンジニア、プログラマー向けの内容ではありますが、当記事ではTransients APIを使ってWordPressループを実装してみましょう!

Transients APIとは

Transients APIとは、データを一時的に保存するキャッシュ機能を提供してくれるAPIです。データはデータベースに保存され、有効期限を設定することで一時的なデータの機能に利用することができます。 データベースアクセスや外部のAPIの呼び出しなど、時間がかかる処理などの結果をキャッシュさせて再利用するために使用されます。

このAPIによりページの表示速度やサイトのパフォーマンスを向上させることができます

キャッシュ系関数を利用したWordPressループを書いてみよう

それでは早速Transients APIをWordPressループに利用して、記事データを一覧表示してみましょう。

上記コードで使われているコードを解説いたします。 利用している関数は、下記のTransients APIの関数になります。

set_transient($transient, $value, $expiration) 内容:キャッシュの作成 パラメータの$transientはTransientのキー、$valueは保存する値、$expirationは有効期限を指定します。

get_transient($transient) 内容:キャッシュの取得 パラメータの$transientはTransientのキーです。Transientが存在しない場合や有効期限が切れている場合はfalseが返されます。

また、削除の関数は下記になります。

delete_transient($transient) 内容:キャッシュの削除 パラメータの$transientはTransientのキーです。

これらの関数をWordPressループと組み合わせることで、キャッシュ機能を持ったWordPressループを実装することができます。 ただし、関数で設定した有効期限が過ぎるまで、表示される内容が切り替わらないということが逆にデメリットになる場合があります。 その点に注意して使い所には注意しましょう。

まとめ

以上でWordPressの表示速度を改善する方法や遅くなる原因の解説を終わります。 当記事で解説した内容だけでもかなり表示速度が改善されたのではないでしょうか?

 

2023.05.22
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ