WordPressの表示速度が遅いときに見直すキャッシュ設定と画像最適化

はじめに

「自分のホームページをスマホで開くと、なんとなく待たされる」。そう感じている方は少なくありません。ただ、遅さの原因はひとつではなく、何から手を付ければよいかが分かりにくいのがWordPressの難しいところです。高速化プラグインを片っ端から入れて、かえって重くなってしまった、という相談も珍しくありません。

この記事では、WordPressの表示速度が遅いときに最初に見直すべき「キャッシュ設定」と「画像最適化」の2つに絞ります。手を付ける順番と、設定して壊れやすい箇所をあわせてお伝えします。読み終わる頃には、自分のサイトのどこを直せばよいかが判断できるようになります。

WordPressの表示速度が遅いと、何が起きるのか

対策の前に、遅さがどれだけ損を生むかを押さえておきます。ここが分かると、直す優先順位が自然に決まります。

3秒を超えるとスマホの半数以上が離れる

Googleの調査では、モバイルサイトの表示に3秒以上かかると53%の利用者がページを離れるとされています。また、表示時間が1秒から3秒に延びると離脱の確率は32%上がり、5秒になると90%上がるという数字も同じくGoogleから公表されています。

これを店舗にたとえると、入口の扉が重くて開くのに時間がかかる状態です。お客様は中の商品を見る前に、扉の前で帰ってしまいます。ホームページの遅さは、問い合わせフォームにたどり着く前に相手を帰してしまう問題なのです。

目安として、Googleが「良好」と判定する基準は、ページの主要な内容が表示されるまで2.5秒以内です。この数字を目標に置いて読み進めてください。

遅さの原因は4つに絞れる

WordPressが遅くなる原因は、大きく分けて次の4つです。

このうち、サーバーは契約の見直しが必要で、プラグインはサイトごとに事情が違います。一方で、キャッシュと画像は「どのサイトでも同じ手順で直せて、効果が大きい」という特徴があります。だからこそ、この記事はこの2つに絞ります。

キャッシュ設定の見直し方

キャッシュは、WordPressの高速化でもっとも効果が大きい設定です。ただし、仕組みを知らずに入れると、フォームやログインが正しく動かなくなることがあります。順番と注意点をセットで覚えてください。

キャッシュとは「作り置き」のこと

WordPressは、ページを開くたびにデータベースから記事や設定を取り出し、その場でHTMLを組み立てて返しています。飲食店でいえば、注文が入るたびに材料を切るところから調理を始める状態です。

キャッシュは、一度組み立てたページを保存しておき、次のお客様には保存済みのものをそのまま出す仕組みです。作り置きの料理を温めて出すようなもので、調理の時間がまるごと省けます。WordPressの表示速度が遅いと相談を受けるサイトの多くは、この「作り置き」がそもそも効いていません。

キャッシュは3層ある。順番はサーバー→ページ→ブラウザ

キャッシュには置き場所の違いで3つの層があり、それぞれ役割が異なります。

手を付ける順番は、この番号のとおりです。まずレンタルサーバーの管理画面を開いて、高速化やキャッシュの項目がオンになっているかを確認します。ここがオフのまま、プラグインだけを入れている例が本当に多いです。

サーバー側を確認したら、次にキャッシュプラグインを1つだけ入れます。使っているサーバーがLiteSpeedというWebサーバーなら、LiteSpeed Cacheが相性の点で第一候補です。それ以外なら、設定項目が少なく初心者でも扱いやすいWP Fastest Cacheから始めるとよいでしょう。ブラウザキャッシュは、これらのプラグインの設定項目の中に含まれているので、個別に何かを入れる必要はありません。

つまり、サーバーの設定を1つ確認し、プラグインを1つ入れる。キャッシュの見直しはこれで完了です。

キャッシュを入れると壊れやすい3つのもの

作り置きには弱点があります。「人によって出すものを変えたいページ」に向かないことです。キャッシュを有効にしたあと、次の3つは必ず動作を確認してください。

対処法は、キャッシュプラグインの「除外設定」に、フォームのページやログイン関連のページを登録することです。3つ目のスマホ判定は除外では防げません。テーマ側でCSSによる表示切り替えに変えるのが根本的な解決になります。ここは判断が難しいので、心当たりがあれば制作会社に相談したほうが早い箇所です。

画像最適化の見直し方

キャッシュの次は画像です。Webページの容量を継続的に調べているHTTP Archiveの統計では、ページ全体の容量のうち4割から5割を画像が占めます。ここを軽くすれば、キャッシュとは別の理由で確実に速くなります。

まず「寸法」を表示幅に合わせる

画像最適化というと圧縮を思い浮かべる方が多いのですが、先に見直すべきは寸法です。スマホで撮った写真は横幅4000ピクセルほどありますが、ホームページで表示される枠は広くても1200ピクセル程度です。

これは、6畳の部屋に20畳分のカーペットを敷き込んで、はみ出した部分を折りたたんでいるようなものです。見た目は6畳ぶんでも、運ぶ重さは20畳ぶんかかります。圧縮の前に、表示される幅に寸法を合わせるだけで容量は5分の1以下になります。

WordPress本体は、アップロード時に横幅2560ピクセル以上の画像を自動で縮小します。それでも表示幅の2倍以上あることがほとんどです。メディアライブラリで大きな画像を確認し、リサイズしたものに差し替えてください。次に紹介するプラグインの「最大幅を制限する」設定を有効にする方法でも構いません。

WebPに変換して容量を減らす

寸法を合わせたら、次に形式を変えます。WebPは、Googleが開発した画像形式で、同じ見た目のままJPEGより25〜35%ほど小さくできます。WordPressは5.8以降、本体でWebPのアップロードと表示に対応しているため、特別な準備は不要です。

すでにアップロード済みの画像を一括で変換するには、EWWW Image OptimizerやConverter for Mediaといったプラグインを使います。導入時は「新しくアップロードする画像を自動でWebPにする」と「過去の画像を一括変換する」の2つの設定を確認してください。過去の画像の一括変換は、画像の枚数が多いと時間がかかるので、アクセスの少ない時間帯に実行するのが無難です。

なお、変換後もJPEGの元画像は残しておくのが基本です。古いブラウザや一部のSNSのプレビューでは、WebPが表示できない場面がまだあるためです。プラグインは対応していないブラウザには自動で元の画像を出してくれるので、この点は任せて構いません。

遅延読み込みは「最初の画面」だけ例外にする

遅延読み込みは、画面に映っていない下のほうの画像を、スクロールされるまで読み込まない仕組みです。ページ全体の読み込み量が減るので、長い記事ほど効きます。WordPressは5.5以降、本体でこの機能を持っているため、追加のプラグインは不要です。

ただし、1点だけ落とし穴があります。開いた瞬間に見える最初の画面、つまりファーストビューの画像まで遅延させると、かえって表示が遅くなります。Googleが計測する「主要な内容が表示されるまでの時間」は、多くの場合このファーストビューの画像が対象だからです。遅延読み込みは下の画像に効かせ、最初の画像だけは最優先で読み込ませる、という切り分けが正解です。最近のテーマや高速化プラグインには「最初の画像は除外する」設定があるので、そこを確認してください。

設定後の確認手順と、やってはいけないこと

設定を変えたら、必ず数字で前後を比べます。感覚だけで「速くなった気がする」で終わらせないことが、次に直す箇所を決める手がかりになります。

PageSpeed Insightsで「前」と「後」を残す

計測にはGoogleのPageSpeed Insightsを使います。無料で、URLを入れるだけで結果が出ます。見るべきポイントは2つです。

設定を変える前に、この画面のスクリーンショットを1枚残しておいてください。変えたあとに同じページを測って並べれば、効果が出たかどうかが一目で分かります。健康診断の結果を去年と見比べるのと同じで、比較対象がなければ改善したかどうかは判断できません。

高速化プラグインを重ねない

最後に、もっとも多い失敗を挙げます。キャッシュプラグインを2つ以上入れることです。「速くなるなら両方入れたほうがよい」と考えがちです。しかし作り置きを2か所で別々にやると、どちらが最新か分からなくなります。古い表示が出たり、片方がもう片方を打ち消したりするのはこのためです。

同じことは画像最適化のプラグインにも当てはまります。高速化は「増やす」より「減らす」ほうが効くことが多いと覚えておいてください。キャッシュ1つ、画像最適化1つ、これ以上は原則として入れない。それでも遅いなら、原因はサーバーの性能かテーマの作りにあり、プラグインでは解決しない領域です。

よくある質問

キャッシュプラグインを入れたのに、記事を更新しても表示が変わりません。どうすればよいですか。

更新前の作り置きが残っている状態です。キャッシュプラグインの管理画面にある「キャッシュを削除」を実行してください。多くのプラグインは記事の保存時に自動で削除する設定を持っているので、設定画面でその項目がオンになっているかも確認してください。レンタルサーバー側のキャッシュも別に残っている場合があるため、サーバーの管理画面からも削除すると確実です。

WordPressの表示速度は何秒以内を目指せばよいですか。

Googleが「良好」と判定する基準は、主要な内容が表示されるまで2.5秒以内です。PageSpeed Insightsの「携帯電話」タブでLCPという項目を確認してください。総合スコアは環境で上下するため、秒数のほうを指標にするのが確実です。

無料のレンタルサーバーや格安プランでも、キャッシュと画像の見直しで速くなりますか。

効果はあります。特に画像の寸法とWebP変換は、サーバーの性能に関係なく読み込む容量そのものを減らすため、どの環境でも確実に効きます。ただし、サーバーの処理性能が足りない場合は、キャッシュを入れても管理画面の操作や初回表示が遅いままです。その場合は月額1,000円前後の一般的なプランへの移行を検討してください。

WebPに変換すると画質は落ちますか。

通常の設定では、見た目で分かる劣化はほとんどありません。WebPには元の画質を保つ「可逆」と、わずかに圧縮する「非可逆」の2方式があります。プラグインの初期設定は写真向けの非可逆で、品質80前後です。商品写真など画質を重視する画像だけ品質を90に上げる、といった使い分けもできます。

高速化プラグインを入れたらサイトの表示が崩れました。元に戻せますか。

戻せます。まずプラグインを停止して表示が戻るかを確認してください。戻るなら、原因はCSSやJavaScriptの「結合・圧縮」機能である場合が大半です。プラグインを再度有効にしたうえで、その項目だけをオフにすると、キャッシュの効果を保ったまま崩れを直せます。

まとめ

WordPressの表示速度が遅いと感じたら、見直すのはキャッシュ設定と画像最適化の2か所です。手を付ける順番を振り返ります。

目標はスマホで2.5秒以内。プラグインは増やすより減らす。 この2つを守るだけで、多くのサイトは見違えるほど軽くなります。

ここまでやっても遅い、あるいはキャッシュを入れたら表示が崩れて怖くなった、という場合は、原因がテーマの作りやサーバーの性能に移っています。そこからは制作側の領域ですので、無理をせずご相談ください。