WordPressの画像を高速化する方法：Web VitalsとWebP

最終更新日: June 28, 2026

これは、私のWordPress画像最適化ガイド for 2026のスピードに焦点を当てた補足記事です。前述のガイドは広範なセットアップ（プラグイン、srcset、CDN、htaccess）を扱っていますが、この記事では単一の疑問に絞り込みます。「どのようにすればWordPressの画像をCore Web Vitalsが緑色になるほど高速化できるか？」と。私は自身のメディア量の多いブログで全てのステップを測定し、以下の改善点こそがLargest Contentful Paintを3.8sから1.1sへと実際に引き上げた要因です。

簡単な回答：WordPressの画像を速くする方法は？

アップロード前にすべての画像をWebPに圧縮し、表示幅を制限してブラウザが400pxのスロットのために4000pxのファイルをダウンロードしないようにし、ビューポート外の要素はすべて遅延読み込み（lazy-load）を行い、/wp-content/uploads/の前にCDNを配置します。私のブログでは、この4つのステップにより、全体の画像サイズが84パーセント削減され、モバイルLCPが3.8sから1.1sに低下しました。WordPressブログにおけるLargest Contentful Paintはほぼ常に画像によるものであるため、ここがスピードの鍵となります。

なぜWordPressの画像がCore Web Vitalsを支配するのか？

Core Web Vitalsは知覚される速度を評価し、WordPressで最も失敗しやすいのがLargest Contentful Paintです。これはコンテンツサイトの場合、通常ヒーロー画像または最初のインライン画像になります。私は自身の投稿40件に対してPageSpeed Insightsを実行したところ、LCP要素がそのうち37件で画像でした。

画像は間接的に他のメトリクスも引き起こします：

• 4MBのヒーロー画像は、Slow 4G環境でダウンロードが完了するまでLCPをブロックします。
• 画像に幅と高さがない状態で到着すると、レイアウトシフトが発生します。
• 大きな画像キューがパース中にメインスレッドを枯渇させると、INPが悪化します。

Googleはこれらを実際のChromeユーザーから測定し、検索ランキングシグナルに組み込んでいます。詳細はweb.dev fast loading guidanceで確認できます。修正が必要なのはサーバー側の問題であることが稀です。ほとんどの場合、画像が原因なのです。

画像のサイズをどれだけ削減できるか？

私は最適化する前と後の数値を記録しました。投稿は同じで、コンテンツも同じですが、画像だけが変更されています。

この9.4MBから1.1MBへの低下は特別なケースではありません。これは、未圧縮のJPEGをネイティブ解像度で提供するのをやめたときに起こる現象です。最大のレバーは形式と寸法であり、optimize images for web speed のガイドではこれをメトリクスごとに分解しています。

LCPとは何か、そしてなぜそれがほぼ常に画像なのか？

Largest Contentful Paintは、最も大きな可視要素がレンダリングされる瞬間を示します。WordPressブログにおいて、その要素はテキストではなく、ヒーロー写真、アイキャッチ画像、または最初の大きなインライン画像です。この画像がダウンロードされ、デコードされ、描画されるまで、ページはユーザーとGoogleにとって「まだ読み込み中」として認識されます。

画像のLCPを延長させる要因は3つあり、私は監査のたびにこれら全てを確認します：

• ファイルが占めるビューポートに対して大きすぎる。
• LCP画像が誤って遅延読み込みされ、開始が遅れる。
• CDNがなく、ファイルが世界反対側にある単一のオリジンから移動する。

後者2つは数分で修正できる設定ミスです。最初の一つはアップロードの習慣であり、image file size guide で解説されています。

WordPressにとって最も速い画像形式は？

WebPです。等しい知覚品質においてJPEGよりも25〜35パーセント小さく、WordPressコアは6.5以降アップロードをサポートしています。AVIFはさらに20〜30パーセント圧縮されますが、ブラウザおよびCDNのサポートはまだ不均一なため、私はこれをベースではなく強化レイヤーとして扱います。

私はアップロード前にWebPに圧縮し、CDNにAVIFを対応するブラウザへ交渉させます。形式のトレードオフについて深く知りたい場合は、JPG PNG WebP comparison が参照ガイドとなります。

各デバイスに適切な画像サイズを提供する方法は？

これは多くの人が見落とすポイントです。WordPressはサムネイル、ミディアム、ラージ、インターミディエイトサイズを自動生成し、srcsetを出力しますが、これはテーマがハードコードされた<img>タグではなくwp_get_attachment_image()を呼び出す場合に限ります。スマートフォンが2560pxのファイルをダウンロードすることはあってはなりません。

WordPressが出力するマークアップは以下のようになります：

<img
  src="hero-1536x800.webp"
  srcset="hero-768x400.webp 768w,
          hero-1200x628.webp 1200w,
          hero-1536x800.webp 1536w"
  sizes="(max-width: 768px) 100vw, 1200px"
  width="1536" height="800"
  alt="Storefront hero photograph at full width">

動作確認の方法：DevToolsを開き、Slow 4Gに制限し、リロードしてNetworkタブを監視します。スマートフォンは768wファイルを要求するはずです。もし全てのデバイスが同じURLを引き出す場合、テーマが壊れているか、ページビルダーがレスポンシブなマークアップをバイパスしています。ブレークポイントのロジックはresponsive image breakpoints ガイドにあります。

WordPressで遅延読み込み（lazy loading）を有効にするには？

WordPress 5.5以降、すべての<img>タグがデフォルトでloading="lazy"を持つようになり、6.1では最初の大きな画像に対してfetchpriority="high"ヒントが追加され、遅延ローダーと競合することがなくなりました。もはやプラグインが必要なことはほとんどなくなり、これは設定なしでの真のスピードアップ要因です。

私が徹底している2つのルールがあります。これらを怠ったことで、以前はLCPに苦しんだ経験があるからです：

• ビューポート上にあるLCP画像を遅延読み込みしてはいけない。
• レイアウトシフトを防ぐために、常に明示的な幅と高さを設定する。

公式のWordPress lazy-loading documentationには、LCP要素を除外したり、遅延読み込みを行うiframeに関するフィルターが記載されています。ヒーロー画像のミスを含む一般的な落とし穴については、lazy load images の記事をお読みください。

CDNはWordPressの画像をどのように高速化するのか？

CDNは、各画像を訪問者に最も近いエッジから配信し、オリジンへの往復回数を排除します。あるクライアントのJPEGsをオリジンホスティングからCloudflareに移行し、Polishを有効にした後、シンガポールとブラジルからの訪問者にとって画像のTTFBが420msから60msに低下しました。

私がすべてのサイトで設定する項目：

• PolishをオンにしたCloudflare、ロスレスに加えWebP。
• /wp-content/uploads/以下のすべてをキャッシュする。
• 画像MIMEタイプに対して1年間のブラウザキャッシュを設定する。
• WebPの上にCDN交渉によるAVIFレイヤーを重ねる。

エッジキャッシングは、画像量の多いWooCommerceストアやマルチオーサーブログにとって最も重要です。キャッシュヘッダーやパージルールを含む完全なセットアップは、image CDN guide に記載されています。

主要なポイント：4ステップのスピードスタック

他に何も覚えていなくても、この4点を覚えてください。なぜなら、これらが私が測定したLCP低下の原因だからです：

1. アップロード前にWebPに圧縮し、画像あたり200KB未満にする。
2. 表示幅を制限し、srcsetに適切なファイルを配信させる。
3. ビューポート外の要素は遅延読み込みし、LCP画像は決してそうしない。
4. 1年間のTTLでCDNエッジで画像をキャッシュする。

これらを実行すれば、Core Web Vitalsレポートは緑色になります。レスポンシブなsrcsetステップをスキップしたり、完璧に圧縮されたWebPであっても、スマートフォンにはデスクトップファイルが送信されてしまいます。

納品前のスピードチェックリスト

• LCP画像がWebPであり、200KB未満である。
• LCP画像にfetchpriority="high"があり、loading="lazy"ではない。
• srcsetが存在し、スマートフォンが小さなファイルを読み込む。
• すべての画像に明示的な幅と高さが設定されている。
• CDNが/wp-content/uploads/をキャッシュしている。
• 画像のブラウザキャッシュが1年に設定されている。
• PageSpeedでモバイルLCPが2.5s未満である。
• CLSが0.1未満であり、画像によるシフトがない。

唯一の注意点があります：品質70以下のロッシーWebPは、テクスチャやエッジのディテールが製品を売る商品写真や網膜ディスプレイにおいて、最終的にあなたに痛手を与える可能性があります。私はすべてのオリジナルファイルをクラウドストレージに保管し、そこから再エクスポートします。なぜなら、一度ソースをロッシーコピーで上書きしてしまうと、そのディテールは永久に失われてしまうからです。1000枚を一括変換する前に、5枚の実際の画像でテストしてください。

画像クレジット

• Bright workspace with a desktop computer used to manage a WordPress site — photo by SHVETS Production on Pexels
• Cozy home office with a laptop open on a WordPress blog post — photo by Pixabay on Pexels
• MacBook displaying a Google search page on a wooden table outdoors — photo by Pixabay on Pexels
• Programmer coding on a laptop and monitor in a modern office — photo by Claudio Emanuel on Pexels