画像圧縮でWordPressの表示速度を改善する方法【SEO効果も解説】
WordPressサイトの表示速度をCore Web Vitalsの観点から改善するために、画像圧縮が果たす役割と具体的な手順を実践的に解説します。
WordPressサイトを運営していると、「ページの読み込みが遅い」「Google Search Consoleで速度の改善を促す警告が出ている」という状況に直面することは少なくない。その原因の多くは、最適化されていない画像ファイルにある。本記事では、画像圧縮がなぜSEOに影響するのかを整理したうえで、実際の対処方法を順を追って説明する。
画像ファイルサイズがWordPressのSEOに与える影響
Googleは2021年にCore Web Vitals(CWV)を検索ランキングの正式な評価指標に組み込んだ。CWVの中でも特に画像と密接に関わるのが以下の2つだ。
- LCP(Largest Contentful Paint):ページ内で最も大きな可視コンテンツが描画されるまでの時間。多くの場合、ヒーロー画像がLCP要素になる。
- CLS(Cumulative Layout Shift):画像の縦横比が未指定だとレイアウトずれが発生し、CLSスコアが悪化する。
Googleのドキュメント(Optimize Largest Contentful Paint)では、LCPを2.5秒以内に収めることが「良好」の基準とされている。スマートフォン回線で数MB単位の画像を読み込む構成では、この基準を満たすことは難しい。
さらに、表示速度はユーザー体験にも直結する。Googleの調査によれば、モバイルページの読み込みに3秒以上かかると直帰率が大幅に上昇するとされており、コンバージョン率にも影響が出る。「SEOのためだけに改善する」というよりも、訪問者の離脱を防ぐ実務的な課題として捉えるほうが正確だ。
未圧縮画像が生まれる典型的なパターン
WordPressで画像が最適化されないまま公開されてしまうケースには、いくつかの共通パターンがある。
スマートフォンで撮影した写真をそのままアップロードする
近年のスマートフォンカメラは高解像度で、1枚あたり3〜8MBになることもある。これをリサイズも圧縮もせずにメディアライブラリに追加すると、ページ全体のデータ量が跳ね上がる。
デザインツールからエクスポートした画像をそのまま使う
FigmaやPhotoshopからエクスポートする際、デフォルト設定では品質を落とさない形で出力されることが多い。Web向けの書き出しオプションを意識しないと大きなファイルになりやすい。
プラグイン任せにしていたが実は機能していなかった
ShortPixelやEWWW Image Optimizerなどの最適化プラグインは有効だが、設定が正しくなかったり、無料プランの処理上限に達していたりして、後からアップロードした画像が未圧縮のまま残るケースがある。
WordPressの画像圧縮を改善する具体的な手順
Step 1:現状のページ速度を計測する
まずGoogle PageSpeed Insights(https://pagespeed.web.dev/)でURLを入力し、現在のLCPスコアと「適切なサイズの画像」「次世代フォーマット」などの診断項目を確認する。改善対象の画像が特定できたら、次のステップに進む。
Step 2:アップロード前に画像を圧縮する
WordPressにアップロードする前に画像を圧縮しておくのが最も確実な方法だ。プラグインに頼る場合でも、元ファイルを軽くしておくことで処理の精度が上がる。
ブラウザ上で手軽に圧縮したい場合は、画像圧縮ツールを使う方法がある。ファイルをサーバーに送信せずブラウザ内だけで処理するため、顧客の写真や社内資料など、外部サービスにアップロードしたくない画像でも安心して使える。圧縮後のファイルはそのままダウンロードでき、登録も不要だ。
TinyPNGやSquooshといったオンラインツールも同様の用途で使われているが、これらはファイルをサーバーに送信して処理する仕組みになっている。扱う画像の内容によっては、この点を考慮する必要がある。
Step 3:適切な画像フォーマットを選ぶ
- JPEG:写真・グラデーションを含む画像に向く。WebPへの変換でさらに削減できる。
- PNG:透過が必要な画像、ロゴ、スクリーンショットに使う。
- WebP:JPEGやPNGと比べてファイルサイズを20〜30%程度削減できるとされる(MDN: WebP)。WordPressは5.8以降でWebPをサポートしている。
フォーマット変換が必要な場合は、画像変換ツールを使うとブラウザ内でJPEG・PNG・WebP間の変換が可能だ。
Step 4:画像の表示サイズに合わせてリサイズする
2,000px幅の画像をCSSで600px幅のカラムに収めている場合、余分なデータを毎回読み込んでいることになる。WordPressの「メディア設定」で最大アップロードサイズを制限するか、アップロード前にリサイズしておくと無駄がない。
Step 5:遅延読み込み(Lazy Load)を設定する
WordPress 5.5以降、loading="lazy" 属性がコア機能として自動的に付与される。ただし、ファーストビューにある画像(LCP要素になるもの)には loading="eager" を指定したほうがLCPが改善されるケースもある。テーマの実装を確認しておきたい。
圧縮ツールを選ぶときの比較ポイント
| ツール | 処理場所 | 無料枠 | フォーマット対応 | 登録の要否 |
|---|---|---|---|---|
| zerosend 画像圧縮ツール | ブラウザ内 | 完全無料 | JPEG / PNG / WebP | 不要 |
| TinyPNG | サーバー | 月500枚まで | JPEG / PNG / WebP | 不要 |
| Squoosh | ブラウザ内 | 完全無料 | 多数対応 | 不要 |
| ShortPixel(WPプラグイン) | サーバー | 月100枚まで | JPEG / PNG / WebP | 要登録 |
| Smush(WPプラグイン) | サーバー | 制限あり | JPEG / PNG | 要登録 |
処理場所が「サーバー」の場合、ファイルが外部サーバーに送信されることを意味する。機密性の高い画像を扱う場合はこの点に注意が必要だ。
まとめ
WordPressサイトの表示速度改善において、画像の最適化は費用対効果が高い施策の一つだ。Google PageSpeed InsightsでLCPやCLSの問題を特定し、アップロード前の圧縮・適切なフォーマットの選択・遅延読み込みの設定という3点を押さえるだけで、スコアが大きく改善するケースは多い。
画像をサーバーに送りたくないケースや、手軽に圧縮を試したい場合は、画像圧縮ツールのようなブラウザ内処理のツールが実用的な選択肢になる。プラグインによるサーバーサイド処理と組み合わせて使うことで、アップロード前後の両方で最適化を完結できる。
Zerosend Editorial
Zerosend の制作チームによる記事です。ファイルがデバイスの外に出ないことを設計の中心に置き、WASM・Web Worker をベースとするブラウザ完結ツールを開発しています。
Zerosend Editorial について →関連記事
LCP改善に効く画像最適化の実践ガイド|Core Web Vitals対策
LCPスコア悪化の主因は画像の重さ。Core Web Vitals改善に直結する画像最適化の手順と、ブラウザ内完結の無料ツールを実例とともに解説します。
サイト表示速度を改善する画像最適化の手順【初心者向け完全ガイド】
サイトの表示速度に直結する画像最適化の手順を解説。適切なフォーマット選択から圧縮ツールの活用まで、Web担当者がすぐ実践できる方法をまとめました。
Core Web Vitals を画像圧縮で改善する完全ガイド【LCP対策】
LCP悪化の主因は画像の重さ。圧縮前後のスコア目安・手順・プライバシー安全なブラウザ内処理ツールの比較まで、実践的に解説します。