WordPressを高速化する方法 - 表示速度を上げるテクニック

記事内に商品プロモーションが含まれる場合があります

今回はWordPressで作られたサイトを高速化する方法をまとめて紹介します。

サイトの表示速度を上げるメリット

読み込み速度を上げることには、大きなメリットがあります。

メリット1：ユーザービリティの向上

ユーザービリティの向上

Googleの公式調査で紹介されていた、2017年のGoogle/SOASTAによるモバイルページの分析では、「読み込み時間」と「直帰率」の関係は以下のように報告されました。現在の全サイトで同じ結果になる保証ではありません。元資料：2017年のGoogle/SOASTA資料（PDF）

読み込みが1秒から3秒になると、直帰率は32%上がる
読み込みが1秒から5秒になると、直帰率は90%上がる
読み込みが1秒から6秒になると、直帰率は106%上がる
読み込みが1秒から10秒になると、直帰率は123%上がる

待ち時間が長いと、内容が表示される前に離脱するきっかけになり得ます。ただし、直帰率だけから「5秒待って遅いから帰った」などの理由や滞在時間を決めつけることはできません。

メリット2：SEO的にもGOOD

Googleはページ体験を評価する際にCore Web Vitalsなどを使いますが、良い数値だけで上位表示になるわけではありません。
「モバイルファーストインデックス」は、モバイル版の内容を主にクロール・インデックスに使う仕組みです。以下は掲載当時に紹介した解説です（詳細）。表示速度の改善と、モバイル版に必要な内容を揃えることを区別して確認しましょう。

WordPress高速化を考える上で知っておきたいこと

やるべきことを理解しやすくするために、図を用意してみました。完全に理解する必要はないと思いますが、ざっくりと何をやっているのかだけイメージできるようにしましょう。

ページが表示される超ざっくりとした流れ

ページの表示のされ方のイメージ

こちらは、WordPressを使っている場合のページの表示のされ方のイメージです（かなりざっくりですが）。まず、ブラウザから「このページ見せて！」とサーバーにリクエストを送ります。すると、サーバーにひそむWordPressは、ページデータを作ってそれを送り返します。
それをブラウザが読み込んで、華やかなWebページとして表示するわけですね。

大きく２つに分けて考えてみる

この中で読み込み速度を改善すべきポイントは２つあります。

1つめは、サーバー側でページデータを用意する速度を上げることです。のちほど具体的なイメージとやるべきことを詳しく説明します。

2つめは、ブラウザがページのデータ（画像やCSSなど）を読み込む速度を上げることです。

WordPressでのページデータ準備の高速化

サーバー側でページデータを用意する速度を上げる

それでは、まず「ページデータ」を準備する速度の向上方法を見ていきましょう。

ページデータを生成する

WordPress君は、ページデータを作るために色々なことをしています。複数のプログラムを実行し、PHPファイルをつなぎ合わせていきます。さらにデータベースというところに記事の情報（本文やカテゴリー情報などなど…）を取りに行きます。
これらを組み合わせて1つのページを作っているのです。このあたりの処理の速度を上げることが1つめのポイントですね。

対処法1：プラグインを見直してみる

まずはプラグインの役割と負荷を見直します。有効化しているプラグインが、ページデータを準備する処理へ影響する場合があります。不要なものを整理し、必要なものは停止する前にバックアップと動作確認の準備をしましょう。
以下の２つは掲載時に挙げた例です。現在の負荷はバージョン・設定・サイト規模によって異なるので、製品名だけで重いと決めつけないでください。

テーマや導入済みプラグインに同じ機能がある場合は、重複を確認します。例えばSANGOの設定機能とSEOプラグイン、人気記事機能の役割を確認し、必要な機能を残して整理しましょう。

対処法2：PHPのバージョンを見直してみる

WordPressはPHPというプログラミング言語で動いています。サーバーで設定されたPHPのバージョンは性能や互換性に影響します。下のPHP5とPHP7の比較は、掲載当時に紹介した過去の測定です。

PHP7は、PHP5に比べ2倍以上の実行速度を誇り、メモリ使用量が大幅に改善されています

xserver.ne.jp

現在はサポート中のPHPバージョンから、WordPress・テーマ・プラグイン・サーバーが対応するものを選びます。最新番号へ無条件に上げず、バックアップと復旧方法を用意し、テスト環境で互換性と性能を確認してから変更してください。

対処法3：サーバーを見直してみる

そもそもの話ですが、サーバーの性能も重要なポイントです。サーバーの性能が悪いと、同時にアクセスがあったときに処理速度が遅くなってしまうのです。

対処法4：キャッシュ系プラグインを活用する

「WP Super Cache」や「W3 Total Cache」などは、ページの保存データを再利用して応答を改善できる場合があります。既存のサーバー・テーマのキャッシュと重複させず、バックアップを用意して、設定後の表示と更新の反映を確認しましょう。

これらのプラグインがどういう仕組みかというと、さきほど触れたように、通常WordPressでは「このページを見せて！」とリクエストがあったときに、ページデータを作る処理をいちいち行っています。

この処理に時間がかかっているのなら前作ったページデータをそのまま返せばいいじゃんと思いますよね。つまり、1度作ったページデータを一時的に保存（キャッシュ）しておいて、しばらく使いまわすわけです。

これによりサーバーの応答が速くなる場合があります。効果は構成や保存方式によって異なり、設定が合わないと表示や更新に問題が出ることもあります。
記事を変えても古い表示が残る場合は、利用しているキャッシュの削除・更新方法を確認します。設定画面や削除手順は製品・バージョンにより異なります。

W3 Total Cache

参考W3 Total Cacheの簡単設定方法寝ログ

掲載時に参考にした設定記事です。W3 Total Cacheには複数の設定項目があるため、現在の設定画面と自分のサーバー構成を確認し、必要な機能だけを使いましょう。

WP Super Cache

WP Super Cacheも掲載時に紹介した選択肢です。筆者は当時、比較的シンプルな設定画面を理由に使用していました。現在の対応環境・更新状況・設定項目を確認し、自分の構成で効果と動作を確かめてください。

会員登録のあるサイトでは、ログイン状態・個人情報・カートなど個人別のページを共有キャッシュから除外します。機能があるだけで一律に使えないわけではなく、利用する仕組みの除外設定と、別ユーザーへ情報が漏れないことを確認してください。

対処法5：余計なリビジョンなどのデータを消す

リビジョン

WordPressでは「下書き」や「リビジョン（記事内容の更新履歴）」が自動で保存されていきます。「気がついたら下書きの数が200以上に…」なんてことも。また、ゴミ箱に削除記事がたくさん溜まることもありますね。上の管理画面は掲載当時の例です。
量や構成によっては処理へ影響することがありますが、データがあるだけで遅い原因と断定できません。まずデータベースの状態と処理時間を確認しましょう。

データ削除プラグインを使う場合

「Optimize Database after Deleting Revisions」は掲載時に紹介した削除用の例です。実行前にデータベースをバックアップし、残したい更新履歴や下書きが削除対象に含まれないことを確認します。利用中のバージョンの分析・設定を確認し、不要と判断したデータだけを削除してください。下の記事は掲載時の参考資料です。

参考Optimize Database...の使い方いわしブログ

ブラウザでのページデータ読み込みの高速化

ブラウザがページデータを読み込む速度を上げる

次にブラウザがページデータを読み込む時間を短縮する方法を見ていきましょう。

画像やCSS、Javascriptを読み込む時間を短縮

ここで表示速度を遅くする原因は主に「画像」や「CSS」「JavaScript」などのファイルの読み込みにあります。なるべく読み込むファイル数を少なくする、そして読み込むファイルの容量を軽くすることが基本的な方針になります。

対処法6：画像の容量を小さくする

言うまでもなくページに貼り付けられている画像の容量が大きいほど、読み込むのに時間がかかります。以下の2点は意識しておきましょう。

画像をサクッと最適化

以下のツールは画像の寸法や形式を調整するための例です。WebPなどへ変換すると容量を減らせる場合がありますが、効果や画質は画像と設定によって異なります。対象ブラウザの対応と、変換後の見た目・容量を確認しましょう。

参考画像をWebP形式にまとめて変換saruwakakun.com 参考画像をまとめてリサイズsaruwakakun.com

対処法7：ブラウザのキャッシュを活用する

こちらは、さきほどのサーバー側のキャッシュとは別物です。ブラウザのキャッシュのイメージを図にしてみました。

ブラウザのキャッシュ

画像やCSSファイルなどをページを見てくれる人のブラウザに保存しておくことで、もう一度訪れてくれたときや別のページを見てくれたときに、保存しておいたものをパッと表示することができます。

ブラウザキャッシュの設定方法

次はApacheでmod_expiresが利用でき、.htaccessによる設定が許可されている環境の例です。サーバー内にある.htaccessというファイルへ設定します。編集前に保存し、既存設定との重複を確認してください。Nginxや管理サービスなどでは、その環境の設定方法を使います。

Apacheの構成によっては.htaccessが、 wp-contentや wp-adminなどがある階層に置かれています。場所・編集権限・接続方法はサーバーの案内で確認してください。

.htaccess

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpeg "access plus 14 days"
    ExpiresByType image/png "access plus 14 days"
    ExpiresByType image/gif "access plus 14 days"
    ExpiresByType image/svg+xml "access plus 14 days"
    ExpiresByType image/webp "access plus 14 days"
    ExpiresByType text/css "access plus 7 days"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
</IfModule>

この設定は、指定したMIMEタイプの応答に有効期限を設定する例です。実際のレスポンスヘッダーを確認しましょう。ファイルを更新しても期限内の旧データが残ることがあるため、内容変更時にURLやバージョンを変える運用と保存期間を併せて考えます。access plus ◯◯の部分で保存する期間を指定しています。ここは必要に応じて調整して頂ければと思います。

なお、キャッシュの詳しい解説と削除方法については下の記事で解説しています。

対処法8：コードを圧縮する

HTML/CSS/JavaScriptのファイルの容量が重いと表示スピードが遅くなります。また、読み込むファイル数が多いと、その分だけ取得に時間がかかります。
WordPressのプラグインによっては、専用のCSSやJavaScriptが用意されています。とくに装飾系のプラグインを有効にしていると、そのぶん読み込むCSS/JavaScript数が増え、気づかないうちに表示速度を遅くする原因になっていたりします。

圧縮プラグインの定番はAutoptimize

WordPressのコード圧縮系のプラグインといえばAutoptimizeが人気です。複数のCSSファイル/JavaScriptを結合してそれぞれ1つにする機能と、不要な空白や改行を減らしてファイルサイズを軽くする機能があります。圧縮と結合は別の処理です。HTTP/2・HTTP/3では結合を無条件に勧めず、現在の設定機能と実測結果を確認してください。

利用中のテーマにも最適化機能がある場合は重複を確認します。サルワカのWordPressテーマSANGOでもCSS圧縮などの設定を確認します。同じ処理を複数の機能で重ねず、変更後に表示・操作・読み込み時間を確かめましょう。

対処法9：JavaScriptをフッターで読み込む

JavaScriptが初期表示を妨げている場合は、読み込み位置や実行タイミングを検討します。掲載当時のPageSpeed Insightsには「レンダリングをブロックしているJavaScript/CSSを排除する」という案内がありましたが、フッターへ移すだけで全問題が解決するわけではありません。

ざっくり言うと、最初の表示に必要な処理と、後から実行できる処理を分ける考え方です。依存関係や実行順も確認します。

古い導入例と現在の読み込み設定

掲載時には「JavaScript to Footer」や「Head Cleaner」を紹介していました。Head Cleanerは2022年にセキュリティ上の理由で公開停止となっており、旧JavaScript to Footerも古い対応状況のため、ここでは導入を勧めません。現在はテーマの対応する設定や、wp_enqueue_scriptのin_footer・deferなどを検討し、依存関係を保って読み込みを調整します。