「ブログやサイトを開いたとき、ページの表示がなんとなく遅い…」
「PageSpeed Insights（PSI）のスコアがどうしても上がらない…」
そんな悩みを抱えていませんか？
画像の容量を圧縮したり、キャッシュプラグインを入れたりしても変化がない場合、**もっとも多い原因の１つは「最初に表示される大きな画像（FV：ファーストビュー）」**にあります。
今回は、エンジニアの視点から、WordPressの仕組みを正しく理解し、効率的にサイトを高速化する方法をご紹介します。
尚、私達が開発したテーマ「Integlight」はここで述べるような手法を適用して、PSIで100点を達成しています。
1. なぜ「FV画像」が最重要なのか？
ユーザーがあなたのサイトを訪れたとき、最初に目にする画面領域を**FV（ファーストビュー）**と呼びます。
ユーザーは「最初の瞬間」で速度を判断する
たとえページの下の方がまだ読み込まれていなくても、FVさえ瞬時に表示されれば、ユーザーは「このサイトは速い」と感じます。
逆に、記事のアイキャッチ画像やスライダー画像の読み込みが遅れると、真っ白な画面で待たされているストレスを感じ、離脱の原因になります。つまり、**「FV画像を制する者は、サイトスピードを制する」**のです。
エンジニアの視点：Core Web Vitals
Googleも「Core Web Vitals」という指標の中で、メインコンテンツが表示されるまでの時間（LCP）を非常に重要視しています。FV画像を高速化することは、SEO評価にも直結します。
PageSpeed Insightsで「LCP（最大視覚コンテンツの描画）」の警告が出る場合は、本記事でFV画像の最適化に挑戦してみてください。
2. WordPress標準の「高速化機能」とは？
まず、WordPress本体（コア）に備わっている標準機能を知っておきましょう。実は非常に強力な機能を持っています。下記はFVに関連したその機能の一部です。
① 遅延読み込み（Lazy Load）
「画面に見えていない画像は後回しにする」機能です。WordPress（Ver 5.5以降）では標準装備されており、ブラウザネイティブの機能を使って通信量を節約します。
② スマホ用画像の自動生成（srcset）
高画質な写真をアップロードしても、WordPressは裏側で「スマホ用の小さいサイズ」など複数のサイズを自動生成します。閲覧者の画面サイズに合わせて、最適な大きさの画像を出し分ける仕組みです。
3. 【重要】標準機能だけでは不十分？「自動化の落とし穴」
「標準機能があるなら、何もしなくても速いはずでは？」と思いますよね。
しかし、ここには大きな落とし穴があります。標準機能は「一般的な利用状況に対して画一的」に働くため、「あなたのサイトにとって一番重要な画像」を判断できないのです。
落とし穴①：一番大事な画像まで「遅延」させてしまう
WordPressの標準機能は、基本的に「ページ内の画像」に対して遅延読み込み（Lazy Load）を適用しようとします。しかし、完全ではありません。また、テーマやプラグインがこの動作を妨げることもあります。
その結果、本来なら「最速」で表示すべきFV（ファーストビュー）画像までもが「遅延読み込み」の対象となったり、逆にFVに関係ない画像を、もっと重要なCSS等のリソースよりも優先して読みこんでしまうことがあります。
落とし穴②：ブラウザへの指示不足
「スマホ用の画像」が生成されていても、テーマ側がブラウザに対して「ここはスマホだから小さい画像を使っていいよ」という指示（sizes属性）を適切に出していないと、ブラウザは安全策を取って「大きいPC用の画像」をダウンロードしてしまいます。
つまり、**「WordPress標準機能（コア）のポテンシャルを、テーマ側が引き出しきれていない」**のが、速度が上がらない原因なのです。また、プラグインがこの機能を潰してしまうこともあります。
4. 速度を確実に上げる3つのテクニック
上記の「落とし穴」を埋め、WordPressの標準機能を最大限に活かして高速化するための具体的な対策です。
① FV画像は「最優先」で読み込ませる
最近のブラウザでは、画像に優先順位をつけることができます。FV画像には、以下の2つの指示を与えるのが正解です。
- 遅延させない: loading=”eager” （即時読み込み）
- 優先順位を上げる: fetchpriority=”high” （他のファイルより先に取得）
【Integlightでの最適化の例】
私たちが開発した『Integlight』では、WordPress標準のコア機能を活用しつつ、さらに独自の最適化処理を加えています。
「どの画像がFVか」を自動判定し、FV画像には上記の「最優先タグ」を自動付与し、それ以外は標準の遅延読み込みを適用します。
難しいコードを書かずに、コア機能の強みと独自の最適化のいいとこ取りが可能です。
同様の機能を持つプラグインでFVの画像を最優先で読み込ませることで高速化できる可能性があります。
② 投稿ページのアイキャッチ運用を見直す
これは究極の高速化テクニックです。
「記事ページを開いた直後、そのアイキャッチ画像は本当に必要ですか？」
- 一覧ページ: クリック率を高めるために画像を表示する（必須）。
- 記事詳細ページ: タイトル下に大きな画像があると、本文への到達が遅くなる。
記事ページでは思い切ってアイキャッチを非表示にすると、テキストが瞬時に表示され、読者はストレスなく読み進められます。
【Integlightの機能】
一般的なテーマではCSSでの非表示（見えないだけで読み込まれる）や、複雑なカスタマイズが必要ですが、Integlightでは**「一覧では画像を表示し、記事詳細ページでは読み込まずに非表示にする」**という設定が標準で可能です。
「回遊率は維持しつつ、記事の中身を早く読ませる」戦略がワンクリックで実現できます。
③ ファイルサイズの最適化
画質と速度のバランスが良い目安は以下の通りです。PC用として作成してWordPressにロードさせれば、標準機能（＋適切なテーマ）でスマホ用に圧縮してくれます。
| デバイス | 推奨ファイルサイズ | 備考 |
| PC用（元画像） | 50KB ～ 80KB | 横幅1200px程度推奨 |
| スマホ用（自動生成） | 20KB ～ 40KB | 横幅600px～800px程度 |
💡 ヒント：次世代フォーマット「WebP」「AVIF」
JPEGやPNGの代わりに「WebP」や「AVIF」を使うと、高画質のまま容量をさらに30%ほど軽くできます。
まとめ
ページの体感速度は、サイト全体の容量ではなく**「最初に目に入る画像の扱い」**で決まります。
- WordPress標準機能だけでは、FV画像まで遅延される「落とし穴」がある。
- FV画像には「最優先読み込み」を適用する。
- 記事詳細でのアイキャッチ表示・非表示を戦略的に使い分ける。
これらを意識するだけで、読者にとって「サクサク読める快適なブログ」に生まれ変わります。まずはご自身のサイトをスマホで開き、最初の画像がパッと表示されるか確認してみましょう。