WordPressで作ったサイトの表示速度が遅い．．．で対策をいろいろ検索すると出てくるのが、より高速なサーバーへの切り替えや、キャッシュ系プラグインの使用について書かれたページ。

まあ、いずれもあながち間違いではないのですが、その前に根本的に改善できることがあるんです。

それは．．．ページそのものの容量（転送量）を減らすことです。

ページへ誰かが訪問したとき、パソコンやスマホへ実にたくさんの情報が読み込まれます。その中でも転送量が大きいのが、画像ファイルです。

もしも、スマホやデジカメで撮影した画像をそのままアップロードして投稿などへ挿入しているようであれば、今回紹介する画像の最適化で、ページの転送量を劇的に減らすことができます。

転送量を減らす＝表示速度が改善される、ということだけでなく、サーバーが処理する作業も同様に減らすことができ、たくさん同時アクセスされたときにも待ち時間が少なくなる効果が得られますから、ぜひ改善していきましょう。

ページ上部へ戻る▲

サイトで使われている画像を確認しましょう

画像なんかアイキャッチ画像＋1枚位しか使ってないから意味ないのでは？と思っている方、ページにはこんな情報が同時に掲載されていませんか？

• サイドバーへ画像付きの新着記事や人気記事を表示している
• 本文内へカード形式の内部ページリンクを挿入している
• 本文下に関連記事などをアイキャッチ画像付きで表示している
• ヘッダーにスライダー画像を表示させたり、背景画像を使っていたりする

これらはすべて最初にアップロードした画像そのもの、または、そこから生成された小サイズの画像が使われているので、元の画像が大きければ（重ければ）、そこから生成した重い画像がたくさん表示されていることになります。

試しにWordPress管理画面のメディア一覧へファイルサイズ・画像の縦横サイズを表示させる方法で紹介しているコードをテーマのfunctions.phpへ追加して、管理画面のメディアを開いてみてください。

チェックすべきは以下の2つです。

• 画像の横サイズがサイトの幅（本文の幅）よりも大きくなっていないか？
• 画像のファイルサイズが何メガバイトにもなっていないか？

いかがでしょう？デジタルカメラやスマートフォンなどで撮影した画像をそのままアップロードしていたら、療法ともすごい数字になっているのではないでしょうか？

もしもそうなっていたら、本ページを参考にすることで、表示速度の改善ができるかもしれませんから、ぜひ対策していきましょう。

ページ上部へ戻る▲

既にアップロード済の画像を最適化しましょう

前項の画像サイズチェックでビッグな画像が見つかったら、その画像の入れ替えをしていきます。

とはいえ、メディアにアップロードする画像にはアップロード都度IDが振られてしまうので、1つ1つの画像がどこに使われているのかを確認しつつ、すべて手作業で入れ替えていくのは非常に大変な作業となります。

そこでおすすめなのが、一時的に入れ替え用のプラグインを使った画像の置き換えです。

この方法を使えば、メディア内での作業だけになりますから、投稿を開いては画像を入れ替えるという途方もない作業から解放されます。

詳しい手順と使用するプラグインについてはアップロード済みの画像を軽量化して入れ替える方法(PageSpeed Insightsのスコア改善策)で詳しく解説していますので、参照の上作業を行ってください。

ページ上部へ戻る▲

今後アップロードする画像への対処をしましょう

厳密にいえば、パソコンに表示している画像を事前に一度I♡IMAGEなどの外部ツールを使って、画像のクオリティ（粒度）そのものを圧縮してからアップロードするとより効果的ではありますが、「Imsanity」というプラグインを使うことで、少なくとも大きい縦横サイズのままアップロードされることがなくなります。

「Imsanity」の使い方については、リンク先ページで詳しく解説しています。

一度設定しておけば、アップロード都度画像処理が自動で行われ、このプラグインで圧縮された画像を元にWordPress側、テーマ側で各種サイズの画像が生成されますから、ページ全体で画像の容量（転送量）を減らすことができます。

ちなみに「Imsanity」は、有名な画像最適化プラグインEwww…と同じ作者が提供している無料プラグインですので、信頼性は確かだと思います。

また、「Imsanity」には、アップロード済の画像を一括圧縮する機能もあり、前項で入れ替えた画像についてもさらに最適化することもできますから、同時に行っておきましょう。

ページ上部へ戻る▲

軽い画像形式にしてさらに転送量の改善をしましょう

少し前までは、.jpgという拡張子のjpeg形式の画像が一番軽量（容量の少ない）画像ということで一般的に使われてきましたが、現在ではさらに容量の軽い.webpという形式の画像があります。

webp形式の画像は、jpeg画像と比べて約25%程度容量が小さくなり、現存するほとんどのブラウザで表示可能となっています。webp形式のブラウザ対応状況はこちら。

よく使われているブラウザの1つであるInternet Exprolerでは使用不可となっているものの、このブラウザのサポートが2022年6月15日で終了し、webp形式の使えるEdge他のブラウザへ今後置き換わっていくことから、webp形式へ切り替えていくべき時期ではないでしょうか？

とはいえ、webp形式の画像はパソコン上ではまだまだ使いにくい（きちんと対応するソフトが少ない）ことから、jpeg形式でアップロードしたものを訪問者にはwebp形式で出力するという方法がWordPressのサイトでは有効でしょう。

そこでおすすめなのが、「WebP Express」というプラグイン。WordPress公式サイトで配布されているプラグインで、もちろん無料で使用できます。

• アップロードした画像からwebp形式の画像を自動生成して出力するようにしてくれる
• webp形式の画像はメディアとは別場所に保管されるので、混在して見つけにくくなる心配がない
• 過去の画像も一括でwebp形式の画像を生成してくれる
• webp形式に対応していないブラウザではjpeg形式の画像を出力してくれる

といった、WordPressサイトでwebp形式の画像を扱うのには必要十分な機能を備えています。

詳しい使い方などは表示可能なブラウザで、軽量なWebP形式の画像を配信してくれるプラグイン「WebP Express」で紹介していますのでぜひ検討してみてください。

webp処理ができることでよく使われているプラグインにEwww…という、画像の圧縮とwebp対応の両方ができるオールインワンタイプのプラグインがあるのですが、個人的には「画像の圧縮(Imsanity)」と「webp変換(WebP Express)」は別々のプラグインで処理したほうがよいと考えています（もちろん私の管理するサイトは別々のプラグインを使っています）。

ページ上部へ戻る▲

そもそもWordPressには画像の最適化機能があるのでは？

ここまでさんざん画像は減量してアップロードしましょと言っておいて、最後にはしごを外すようですが、実は最近のバージョンのWordPressには、アップロードした画像を最適化する機能が備わっています。

スマホや高性能なデジカメなどで撮影したファイルサイズの大きな画像も、最適化されるようになっています。

ですがあえて本ページで圧縮した状態の画像をアップロードしようと勧めているのは、以下の2つがあるからです。

• 元画像はそのままアップロードされ、圧縮された画像とその他テーマやプラグインで追加される画像が複数保存されるが、サイズの大きな画像がuploadsフォルダに残ってしまうため
• 縦横サイズが大きな画像は、元画像に加え、さらに「-cropped」というリサイズされた画像も元画像として保存し、それを元にした複数の画像がさらに保存されるため

ん？あんまり関係ないのでは？と思われるかも知れませんね。

1つ言えるのは、いずれの場合でも、巨大なファイルサイズのファイルが少なくとも1つずつ多く保存されてしまう保存されてしまうことです。

巨大なファイルサイズの画像は、fullサイズと指定したときに使われるため、知らない間に巨大なファイルが本文内などへ挿入され、転送量が知らない間に増えてしまう可能性があるからです。

WordPressのブロックエディタから挿入する画像については、不用意にfullサイズの画像が使われないよう、srcsetというタグを使って、画面サイズに合わせて適切な画像を選択的に表示するようにして、転送量の減少を図る措置が取られていますが、画像URLから挿入した画像に対しては適用されないので、万が一サイズ指定しなかった時には巨大な画像が使われてしまう可能性があるのです。

1つ2つの画像ならまだしも、長い間サイトを管理していれば、おびただしい数の画像を知らない間にアップロードすると思われますから、どんな場合でも巨大ファイルサイズの画像が使われることがない（そもそもサイトに巨大な画像をアップロードしない）ようにしておけば、そうした心配はありません。

また、圧縮した画像をアップロードすることで、サーバースペースの削減にもつながります。