WordPressで作った当サイトの表示速度を速くしようと思い、色々と試してみたところ、表示速度がだいぶ改善されました。
このページでは、表示速度を速くするために行った方法を書いてみます。
なお、私自身はホームページ作成の専門家ではないので、専門用語の使い方などが間違っている場合があります。
ご留意ください。
キャッシュプラグインの活用
WP Fastest Cacheというプラグインを導入し、設定画面でキャッシュの消去も行ったところ、劇的に表示スピードが速くなりました。
色々とページスピードを改善する方法を試しましたが、体感的に、これが一番効果がありました。
特に、スマホでサイトを閲覧した場合、これまでと比べ物にならないほど速くなっています。
なお、キャッシュプラグインを導入しただけでは、ページの読み込みが遅いままだったのですが、プラグインを使ってキャッシュを削除したところ、劇的にスピードが速くなりました。
私の理解では、キャッシュというのは、ページの表示速度を速くするためのものです。
画像やCSSファイルなど、サイトを閲覧するのによく使われるファイルを保存しておき、それを再利用して、ページを表示する速度を速くする仕組みです。
私のサイトは、何度かテーマを変更したり、プラグインも色々といじっていたので、余計なキャッシュがたくさん溜まっていたのでしょう。
これまで8年ほど、WordPressでサイト運営を続けてきましたが、もしかすると、一度もキャッシュを削除したことがなかったかもしれません。
大量の、余計なキャッシュがページを開く度に読み込まれるので、キャッシュプラグインを導入しただけでは、ページの読み込みスピードが遅いままだったのだと思います。
なお、WordPressで作成を開始したばかりのサイトであれば、まだキャッシュは溜まっていないはずです。
キャッシュプラグインを導入した後、キャッシュを削除する必要はないと思います。
今回、私が利用したプラグインは、先程書いた通りWP Fastest Cacheでした。
ところが、元々導入していたWP-Optimizeにも、キャッシュの機能があると知り、今ではWP-Optimizeのみにしています。
WP-Optimizeはキャッシュ以外にも、画像の容量を減らす機能など、ページスピード改善に役立つ機能が色々と備わっています。
私の環境では、ページスピードの改善はWP-Optimizeのみで事足りそうです。
キャッシュプラグインはいくつかありますが、利用者数の多い物で、好きな物を使えば大丈夫だと思います。
ただ、キャッシュプラグインを導入した後、PageSpeed Insightsのパフォーマンススコアは、前より低くなりました。
PageSpeed Insightsのスコアは、体感の速度と乖離がある気がします。
とりあえずSEOのスコアさえ良ければ、パフォーマンススコアは速度改善の方法を見るためのもの、ぐらいの捉え方で良いのだと思います。
テーマを見直す
昔使っていたテーマは、デザインは良かったのですが、ページの表示速度は激重でした。
それから、表示速度にはテーマ選びが大事だと分かり、いくつかのテーマを試してみました。
Luxeritasを経て、今ではCocoonを使っています。
Luxeritasは、ページスピードも良く、カスタマイズ性も良かったのですが、更新が途絶えてしまいました。
(2025/5/31現在、2023年11月11日のアップデートが最後)
テーマ選びにはいくつかポイントがありますが、
・スピードが速いと評判の物
・自分の作りたいデザインに合っている物
などの他に、更新が頻繁に行われている物を選びましょう。
なお、テーマによっては、高速化の設定が付いているものもあります。
例えばCocoonには、「高速化」という項目があり、キャッシュの利用やファイルの縮小などを行うことができます。
そういうものを活用するのも良いでしょう。
ただ、2025/5/10時点で、Cocoonの高速化をいじっていたとき、「CSS縮小化」にチェックを入れたところ、サイトで利用している画像が、うまく読み込まれなくなる不具合がありました。
(チェックを外したら元に戻りました)
これはCocoon自体の不具合なのか、私の環境の問題なのか分かりませんが、テーマの設定に限らず、設定をいじっているとこういうことが起きる可能性もあります。
設定を変更するときは、一度にたくさん変更しないようにしましょう。
一つ変更したら、サイトに不具合がないのを確認してから、次の設定を変更するのが良いです。
余計なプラグインを停止・削除する
これもよく言われる対策です。
プラグインは非常に便利なものです。
サイトをhtml手打ちで作っていた時には、考えられない便利さでした。
ただ、プラグインを多く入れると、ページスピードが遅くなることがあるようです。
プラグインの利用は必要最小限にしておきましょう。
また、使わない物は削除し、たまにしか使わない物は停止しておきましょう。
画像のデータサイズを減らす
これ以降の方法は、今までの対策に比べ、劇的な変化は起きないかもしれません。
ただ、塵も積もれば山となることもあるので、地道に細かく対策していくのも大事です。
さて、画像のデータサイズを減らすことで、読み込み速度が改善されることがあります。
まず、画像を不必要に大きくしないことが大切です。
読者がページ内の画像を見る場合、読者の端末に合わせて、画像サイズが変更される場合がほとんどです。
そのため、例えば1920 x 1080のサイズで画像を貼っても、読者が見る時にはもっと小さく表示されてしまいます。
あらかじめ、画像は小さくしてからアップロードしましょう。
私がよく使っているフリーソフトで、縮小専用。というものがあります。
(リンク先は窓の杜です)
このソフトは、たくさんの画像を一括でサイズ変更できて便利です。
また、画像を圧縮してデータサイズを減らすのも良いと思います。
画像の圧縮については、プラグインに頼るのも良いでしょう。
画像圧縮のプラグインを導入しておけば、アップロードした画像の圧縮を自動で行ってくれます。
ただ、プラグインは便利な反面、圧縮率が良くない気がします。
プラグインだと数%しか圧縮できなかった画像でも、iLoveIMGやあっしゅくまなどのサイトで圧縮すると、データサイズを半分に減らせることもあります。
アップロードする画像を全て、上記のサイトで事前に圧縮しておくのが、一番良いと思います。
ただ、それだと面倒なので、一回しか使わないような画像は全てプラグイン任せにし、
よく使う画像(ヘッダーや背景など)だけでも圧縮してからアップロードすると良いと思います。
さらに、直接ページ速度を速くしてくれるわけではありませんが、画像の遅延読み込み(lazy load)というものがあります。
画像を遅らせて読み込むことで、ページを読み込む体感速度が上がります。
lazy loadは、基本的にプラグインで行うことができます。
ただ、WordPressがデフォルトで行ってくれるという情報もあり、私はlazy loadのプラグインを入れていませんでした。
プラグインを入れない状態でソースコードを確認してみると、
decoding=”async“
という属性が追加されていました。
これは非同期読み込みという仕組みで、遅延読み込みとはちょっと違うようです。
まあ、体感でページの表示速度を上げてくれることには変わりありません。
ウィジェットを減らす
これは、どのくらい効果はあるか分かりませんが、ウィジェットも最小限にしておいた方が良いと思います。
ウィジェットとは、下の画像のようなものです。
プラグインや画像と同じく、使う数をできるだけ減らしておくと、余計な読み込みが減り、スピードが上がる可能性があります。
改善は微々たるものかもしれませんが、やはり”塵も積もれば”です。
JavaScriptの読み込みをasyncやdeferにする
当サイトでは、いくつか自作のJavaScriptファイルを読み込んでいます。
JavaScriptファイルを読み込む際、
＜script src=”ファイルの場所” type=”text/javascript”＞＜/script＞
などと読み込むと思います。
このとき、
＜script src=”ファイルの場所” type=”text/javascript” async＞＜/script＞
というように、「async」というのを入れておきます。
asyncを入れない場合、ブラウザがhtmlを解析している最中、scriptファイルに当たった時点でhtmlの解析が止まります。
JavaScriptが実行されるまで、htmlの解析が止まったままになってしまいます。
asyncを入れておくと、htmlの解析とscriptファイルの読み込みが同時に行われるようになります。
scriptファイルのところでページの読み込みが止まらなくなり、体感の読み込み速度が上がります。
なお、asyncの他にdeferというものもあります。
deferの場合、htmlの解析が終わった後で、scriptが実行されるので、asyncよりもさらにscriptファイルの実行が遅くなります。
最後に読み込んでも構わないようなscriptファイルは、deferにしておくと良いでしょう。
