Lazy Load（遅延読み込み）の実装方法｜画像・iframeを軽くするシンプルコード

この記事では、WordPressサイトで画像やiframeを遅延読み込み（Lazy Load）する方法を解説します。ページの表示速度を改善し、ユーザー体験やSEOにも効果的です。

1 実装のポイント

• 画像タグやiframeに loading="lazy" を付与する
• テーマの functions.php にフィルタやショートコードを追加して自動化する

2 functions.php にコードを追加

（例）
//-------------------------------------------
// 投稿内の画像に自動で loading="lazy" を追加
//-------------------------------------------
function add_lazy_loading_to_images($content) {
    $content = preg_replace('/<img(.*?)>/i', '<img$1 loading="lazy">', $content);
    return $content;
}
add_filter('the_content', 'add_lazy_loading_to_images');

// iframe の場合も追加したい場合
function add_lazy_loading_to_iframes($content) {
    $content = preg_replace('/<iframe(.*?)>/i', '<iframe$1 loading="lazy">', $content);
    return $content;
}
add_filter('the_content', 'add_lazy_loading_to_iframes');
    

3 Lazy Load（遅延読み込み）の確認方法

3.1 HTMLソースで確認

1. ブラウザで記事ページを開く。
2. 画像の部分で右クリック → 「検証」や「要素を検証」を選択。
3. <img> タグに loading="lazy" が付いているか確認。

   <img src="example.jpg" loading="lazy" alt="サンプル画像">

4. これがあれば lazy load が有効になっています。

3.2 ネットワーク通信で確認

1. Chrome なら F12 を押して開発者ツールを起動。
2. 「ネットワーク」タブを選択。
3. ページをスクロールしながら画像の読み込みを確認。
4. 画面外の画像は最初は読み込まれず、スクロールで画像が画面に入ったときに読み込みが始まる。

3.3 PageSpeed Insights などでチェック

▶ Google PageSpeed Insights にサイトURLを入力。
「画像の遅延読み込み」が適切に行われているか診断してくれます。

3.4 注意点

• ブラウザキャッシュが残っていると反映されない場合があります。→ キャッシュをクリアしてから確認してください。
• テーマやプラグインが loading="lazy" を無効化している場合もあります。

4 完成イメージ

5 代用プラグイン

• Lazy Load by WP Rocket
• a3 Lazy Load
• Autoptimize (画像遅延読み込みオプションあり)

6 まとめ

• WordPress 5.5 以降は標準で lazy load が有効
• テーマやプラグインによって無効化されている場合は functions.php で対応可能