WordPressのLazy Loading活用術｜画像読み込みを遅延させて高速化する実践ガイド

#Lazy Loading #WordPress #パフォーマンス #フロントエンド #画像最適化
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「WordPressのLazy Loading活用術｜画像読み込みを遅延させて高速化する実践ガイド」について解説します。

Lazy Loadingが必要な理由｜現場での失敗談から学ぶ

僕も昔、クライアントから「ページが重い」という連絡をもらったことがあるんです。
そのページは画像がめっちゃ多くて、トップページだけで30枚以上の画像が埋め込まれていたんですよ。
最初は「画像を圧縮すればいいんやろ」くらいに考えていたんですけど、よくよく調べてみたら、ユーザーが見ていない下部の画像まですべて読み込まれていたんです。

その時に僕が学んだのが「Lazy Loading」という考え方です。
要するに、ユーザーがスクロールして実際に見た時だけ画像を読み込む、という技術ですね。
これを実装したら、ページの初期読み込み時間が3秒から1.2秒に短縮されました。
ほんま驚きましたよ。

Lazy Loadingの何がいいかというと：

  • ページの初期読み込み速度が劇的に改善される
  • ユーザーがスクロールしない画像の読み込みを避けられる
  • サーバーへのリクエストが分散される
  • 特に画像が多い記事ページやギャラリーで効果的

現場でよく見るのは、Lazy Loadingを実装していなくて、サーバーに負荷がかかっているサイトです。
WordPress はバージョン5.5以降、ネイティブにLazy Loading機能を搭載しているんですけど、知らない人も多いんですよね。

WordPressネイティブのLazy Loading機能を使いこなす

WordPressのネイティブLazy Loading機能は、実装が超シンプルなんです。
バージョン5.5以降を使っていれば、基本的には自動で動作します。

仕組みとしては、画像に loading="lazy" 属性が自動的に付与されるんですね。
例えばこんな感じになります：

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

ここで重要なポイントなんですけど、WordPressのネイティブ機能は、以下のような画像に自動で適用されます：

  • 記事内容に挿入された画像
  • ウィジェット内の画像
  • コメント内の画像

でも実は、デフォルトの設定だけでは不十分なことが多いんです。
なぜかというと、アイキャッチ画像とか、ヘッダー画像とか、最初に見える「above the fold」と呼ばれる領域の画像には、Lazy Loadingを適用すべきじゃないからです。
この領域の画像は、ページを開いた瞬間から見えているので、遅延読み込みすると逆に遅く見えてしまうんですよ。

そこで、functions.phpで調整することができます。
例えば、アイキャッチ画像をLazy Loadingの対象から除外する場合：

add_filter( 'wp_img_tag_add_loading_attr', function( $default, $image, $context ) {
    if ( 'the_post_thumbnail' === $context ) {
        return false;
    }
    return $default;
}, 10, 3 );

このコードを子テーマの functions.php に追加すると、アイキャッチ画像には loading="lazy" が付きません。

ネイティブLazy Loadingの利点は、プラグイン不要だから、余分なJavaScriptが読み込まれないってことです。
だから、シンプルなサイトやブログなら、これだけでほぼ十分ですよ。

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

ネイティブ機能だけでは物足りない場合、プラグインを使うといいですね。
特におすすめなのが「Smush」や「ShortPixel」といった画像最適化プラグインに含まれるLazy Loading機能です。

Smushを例に挙げると、ダッシュボードの「Smush」メニューから「Settings」に進んで、「Lazy Loading」タブを開くと設定できます。
ここで以下のことが調整可能です：

  • Lazy Loadingの有効/無効
  • プレースホルダー画像の使用（ぼやけた低解像度画像を先に表示）
  • スキップするクラスの指定（特定のクラスがついた画像は遅延読み込みしない）
  • 背景画像のLazy Loading対応

特に「プレースホルダー」機能がめっちゃ便利なんですよ。
ユーザーがスクロールしてきた時に、ボンッと画像が現れるのではなく、ぼやけた画像が先に表示されて、読み込み完了とともにシャープになる、という流れになります。
これだと体感速度がすごく速く感じられるんです。

ただし、プラグインを入れすぎるのは避けた方がいいですね。
僕も以前、Lazy Loading対応のプラグインを3つも入れてしまったことがあって、逆にサイトが遅くなってしまったことがあります。
プラグイン同士が競合して、不具合が起きたんですよ。

だから、基本的にはネイティブ機能 + 1つの画像最適化プラグイン、くらいの組み合わせが理想的です。

Lazy Loading導入時の注意点とトラブル対応

Lazy Loadingは便利なんですけど、注意すべき点もいくつかあります。

最初の注意点は「SEO への影響」です。
Googleのクローラーはある程度JavaScriptを処理できるので、Lazy Loadingされた画像もインデックスできます。
でも、念のため width と height 属性は必ず指定しておくといいですよ。
これでブラウザがレイアウトシフトを避けられます。

例えば：

<img src="image.jpg" width="600" height="400" loading="lazy" alt="説明" />

次に注意すべきなのが「LCP（Largest Contentful Paint）」への影響です。
ページの読み込みパフォーマンスを測定する重要な指標に、LCPというものがあります。
アイキャッチ画像がページ最上部にある場合、それがLCPの対象になるんですけど、Lazy Loadingすると読み込みが遅れるので、LCPスコアが悪くなる可能性があります。
だから、最初に見える大きな画像にはLazy Loadingを適用しないようにしましょう。

そしてもう一つ、