WordPressのLazy Loadingで画像読み込みを最適化する｜現場で使える実践テクニック

こんにちは！

今日は「WordPressのLazy Loadingで画像読み込みを最適化する」について解説します。

Lazy Loadingって実は超シンプル

ほんま、僕も最初Lazy Loadingのこと難しく考えてました。
でも実際は「ユーザーが見ようとするまで画像を読み込まない」ってそれだけなんですよ。

具体的に言うと、ページを開いた時点では、スクロールしたら見える下の方の画像は読み込まない。
ユーザーがそこまでスクロールしてきた時に初めて「あ、画像が必要だ」って判断して読み込むんです。
これめっちゃ効果あるんです。

現場でよく見るのは「10枚の商品画像が並んでるページ」みたいなやつですね。
これが全部一度に読み込まれると、ページ表示まで結構時間がかかるんですよ。
でもLazy Loadingを使うと、見える範囲の2〜3枚だけ先読みして、あとはユーザーのスクロール待ちにできるんです。
そうするだけで初期表示速度が劇的に改善することも珍しくありません。

WordPressのネイティブLazy Loading機能

WordPress 5.5からですね、もうネイティブでLazy Loading対応してるんです。
これが一番シンプルで安全な方法ですよ。

WordPressが自動的に、画像タグに loading="lazy" 属性を追加してくれるんです。
こんな感じになります。

<img src="image.jpg" alt="説明" loading="lazy" >

この属性があるだけで、ブラウザが自動的に遅延読み込みを処理してくれるんですよ。
ほんま楽です。

設定としては、ダッシュボードから「設定」→「メディア」に進むと「遅延読み込みを有効にする」みたいなチェックボックスがあります。
これをONにするだけでいいんです。

ただしですね、ここで気をつけるポイントがひとつあります。
「ファーストビュー（ページを開いた時に見える範囲）」の画像には、Lazy Loadingを適用しちゃダメなんです。
これはパフォーマンス悪化に直結します。
ファーストビューの画像は、従来通り即座に読み込む必要があります。

WordPressのデフォルト機能だけだと、この制御が難しいんですよ。
だからこそ、プラグインの出番になるわけです。

プラグインを使った高度な設定

僕が現場でよく使うのは「EWWW Image Optimizer」とか「Smush」あたりですね。
これらはLazy Loading機能に加えて、画像圧縮も一緒にやってくれるんです。
一石二鳥ですよ。

特に「EWWW Image Optimizer」は、細かい制御ができるのが気に入ってます。
例えば、ファーストビューの画像を除外したり、特定のクラスをつけた画像だけLazy Loadingを適用したりできるんです。

プラグインの設定画面で「遅延読み込み」のセクションを探すと、だいたいこんなオプションが出てきます。

• Lazy Loadingの有効化・無効化
• ファーストビュー画像の除外設定
• 特定クラスの除外
• プレースホルダー画像の設定
• 読み込み範囲のピクセル調整（何px手前から読み込み開始するか）

中でも重要なのが「プレースホルダー画像」ですね。
Lazy Loadingだと、最初は画像がないわけで、その代わりに何を表示するかって設定なんです。
これを適切に設定しないと、画像が突然ポンっと現れるような不自然な見た目になっちゃいます。

おすすめは、低品質な小さい画像（ぼやけてる感じ）をプレースホルダーにして、スクロールしてきたら高品質な画像に入れ替わるっていう「Progressive Image Loading」ですね。
これめっちゃユーザー体験が良くなります。

現場で気をつけるべき落とし穴

ここからはですね、実際に僕が失敗した経験談とか、クライアントから報告もらった問題とかですね。

1つ目：SEOツールの計測が狂う

Lazy Loadingを導入した直後、GoogleのPageSpeed InsightsやGTmetrixの結果が一時的に悪くなることがあります。
これはツールが「画像が読み込まれていない状態」で測定することがあるから。
クライアントがびっくりしちゃうんですよ。
事前に説明しとくといいですよ。

2つ目：JavaScriptに依存するLazy Loadingの危険性

プラグインの中には、JavaScriptで独自のLazy Loading機能を実装してるやつがあります。
これはですね、JavaScriptが何らかの理由で実行されなかったり遅延したりすると、画像がずっと読み込まれないなんてことになりかねません。
できるだけブラウザネイティブの loading="lazy" を活用した方が安全ですよ。

3つ目：プラグイン同士の競合

これはもう現場あるあるなんですけど、複数のプラグインがLazy Loading機能を持ってると、競合してバグが出ることがあります。
僕も以前、「EWWW Image Optimizer」と別のプラグインが両方Lazy Loadingやってて、画像がちらつくっていう問題が起こりました。
一つのプラグインに統一するか、片方を無効にするのがいいですね。

4つ目：モバイルスローネットワークでのテスト不足

高速なWiFi環境でテストしてると気付かないんですが、遅いネットワークで見ると、プレースホルダー状態が長く続くことがあります。
ユーザーに「ローディング中感」を与えるために、スピナーアイコンとか「読み込み中…」みたいなテキストを追加するといいですよ。

まとめ

WordPressのLazy Loading設定は、シンプルなネイティブ機能から始めるのが一番安全です。
その上で、必要に応じてプラグインで細かい制御をする。
これが僕のおすすめの進め方ですね。

ファーストビュー画像は即座に、スクロール範囲外はLazy Loadingで。
この使い分けを意識するだけで、ページ表示速度は劇的に改善されます。
初期表示が速いって、それだけでユーザー満足度も上がるんですよ。

プラグインの設定は一見複雑に見えるかも