Table of Contents
By Nick Schäferhoff - 最終更新日
WordPress サイトでたくさんの画像を使っていませんか？画像はウェブで最も多く使われているメディア形式なので、そうだとしても不思議ではありません。しかし同時に、画像はサイトの表示を大きく遅くする原因にもなるため、WordPress で遅延読み込み（Lazy Load）を使う方法を知っておく必要があります。
これまでにも、画像をできるだけ小さくしてすばやく読み込めるようにする画像の最適化について取り上げてきました。しかし、品質を損なわずに画像のサイズを縮小できる量には限界があります。さらに、同じページにたくさんの画像があると、最適化済みであっても、そのサイズは積み重なっていきます。
WP Rocket のプロダクトマネージャーである Adame Dahmani 氏は、次のように説明しています。
遅延読み込みは、画面外にある画像、動画、iframe の読み込みを必要になるまで延期し、不要なリクエストを減らします。これにより帯域幅と処理の負担が軽くなり、ブラウザはメインスレッドとクリティカルレンダリングパスをより効率的に管理できるようになります。適切に実装すれば、ファーストビューのコンテンツを優先することで First Contentful Paint を改善し、多くの場合は Largest Contentful Paint も改善します。
WordPress の遅延読み込みについて詳しいガイドをまとめるには十分な理由だと思いませんか？そこでこの記事を読めば、遅延読み込みの仕組みと、サイトに遅延読み込みを適用して最良の結果を得る方法がわかります。
遅延読み込みとは？
通常、ウェブページを開くと、ブラウザはそのページのデータをすべて一度に読み込みます。ページ上の画像、テキスト、リンクなど、あらゆるものです。
特に画像が多い場合、これには長い時間がかかることがあります。画像は、ウェブサイトのほかの要素よりもはるかに大きなデータです。さらに、ブラウザが画像の処理にかかりきりになっている間、画像がほかのアセットの読み込みを妨げることが多く、ページはレンダリング処理を完了できなくなります。
その結果、サイトの訪問者は、リクエストしたウェブページが表示されるまで長い時間待たされます。そして多くの訪問者はそこまで待たずに離れてしまい、サイトの直帰率が上がります。
遅延読み込み（Lazy Loading）は、最初は画面に表示されていない画像やその他のアセットを読み込まないようにすることでこれを防ぐもので、ウェブサイトの読み込み時間を最適化する効果的な方法です。
代わりに、ページの下のほうにある画像は、訪問者がそこに向かってスクロールしたときに初めて順番に読み込まれます。こうすることで画像がブラウザを詰まらせないため、ブラウザはウェブサイトのほかの部分をより速く読み込めます。その結果、訪問者にはページがより速く表示され、より良い体験につながります。
ちなみに、スピードテストツールが「オフスクリーン画像の遅延読み込み」を勧めてくるときに意味しているのは、まさにこのことです。
遅延読み込みの仕組み
遅延読み込みを実装する方法はいくつかあります。かつては、凝った JavaScript が必要でした。しかし現在では、ブラウザの標準機能になっています。
そのため、この方法で読み込みたい画像に HTML 属性で印を付けるだけで、あとは訪問者のブラウザが処理してくれます。
この仕組みは、実装が簡単になり、ウェブサイトに余分なコードが不要で、手法も標準化されるため、とても便利です。事実上の標準になったことから、現在では「ネイティブの遅延読み込み」とも呼ばれています。
遅延読み込みのメリット
仕組みがわかったところで、サイトで画像を遅延読み込みするメリットは何でしょうか？
- ページの読み込み時間の改善：これはすでに説明しました。画像やその他のメディアを最初は読み込まないようにすることで、ウェブページが表示されるまでの時間を大幅に短縮できます。
- ブラウザの処理の削減：画像を遅延読み込みすれば、訪問者がページを下にスクロールするまで、ブラウザは画像を解析する必要がありません。
- HTTP リクエストの削減：また、HTTP リクエストの数を減らすことにもなり、Largest Contentful Paint の評価も向上します。
- ユーザーエクスペリエンスの向上：ウェブサイトの訪問者は読み込みの速いページを好むため、遅延読み込みによって、コンバージョンやその他のエンゲージメント指標を改善できる可能性があります。
- サーバーと CDN のコスト削減：ご利用のサーバーや CDN がダウンロードしなければならないデータが少なくなるため、帯域幅に制限がある場合は請求額が安くなります。
- モバイルでのパフォーマンス向上：通信速度の遅いモバイル回線では、画像の影響がより大きくなります。その要因を減らせば、特にサイトのモバイルユーザーが恩恵を受けます。
- SEO 上のメリット：遅延読み込みは、Google のランキング要因である Core Web Vitals を改善します。
考えられるデメリット
一方で、遅延読み込みには問題が伴うこともあります。
- パフォーマンスの問題：ファーストビュー（ロゴやヒーロー画像など）に遅延読み込みを使うと、実はパフォーマンスに悪影響を与えることがあります。Largest Contentful Paint 要素はファーストビューにある画像である可能性が高く、できるだけ早く読み込まれるのが望ましいからです。画像を遅延読み込みの対象から除外する方法は、後ほど説明します。
- SEO の問題：実装を誤ると、遅延読み込みした画像が検索エンジンにインデックス登録されなくなることがあります。ただし、この記事の手順に従えば、問題にはならないはずです。
- レイアウトシフト：遅延読み込みする画像のサイズを指定していないと、ウェブサイトのレイアウトがずれる原因になることがあり、Cumulative Layout Shift に悪影響を与えます。
- 競合の可能性：この機能は、一部のプラグインと競合することがあります。
- ユーザーエクスペリエンスへの影響：ページを下へとても速くスクロールすると、遅延読み込みしていることが目に見えてしまいます。
遅延読み込みを使うタイミング
では、この手法を使うのが理にかなっているのは、どのような場合でしょうか？
ほとんどの場合、ウェブサイトに画像が多いとき、たとえばスクリーンショットをたくさん載せた長いブログ記事などで最も効果を発揮します。ただし、商品ページやポートフォリオページにも当てはまることがあります。
具体的にどの画像を遅延読み込みの対象にするかというと、ファーストビューより下にある画像にするとよいでしょう。これにより、ユーザーエクスペリエンスに影響を与えずにページの読み込み時間が短縮されます。ページの読み込み時間に悪影響を与えることがあるため、ファーストビューにある画像には遅延読み込みを適用しないほうがよいことは、すでに上で触れました。
💡 ご存じですか？WP Rocket には、GTmetrix を基盤とする内蔵のパフォーマンスハブ「Rocket Insights」が加わりました。普段ウェブサイトを最適化しているその場所でパフォーマンスを監視できるので、複数のツールを行き来することなく、主要なページを監視し、結果を把握し、WP Rocket の機能に結び付いた明確な推奨事項を受け取り、いつでも再テストできます。
🚀 WP Rocket を最新バージョンに更新して、ダッシュボードから Rocket Insights をすぐに使い始めてください。お使いのプランに無料で含まれています！
ネイティブの遅延読み込みで画像を遅延読み込みする方法
理論はこのくらいにして、実践に移りましょう。まずは、ブラウザのネイティブな仕組みを使いたい場合に、遅延読み込みをどう実装するのかを見ていきましょう。
HTML の loading 属性
ブラウザに遅延読み込みを適用させるには、読み込みを遅らせたいウェブサイトの要素に、<loading=“lazy”> という HTML 属性で印を付ける必要があります。実際の例は次のとおりです。
<img src="wp-rocket-is-awesome.jpg" loading="lazy" alt="WP Rocket" />
<iframe src="WP-Cache-Basics.html" loading="lazy"></iframe>この属性には、次の2つの値を指定できます。
- lazy：画像要素や iframe 要素の読み込みを延期します。
- eager：標準の読み込み動作です。リソースは、その位置にかかわらず、すぐにリクエストされます。
現在、loading 属性が対応しているのは <img> タグと <iframe> タグだけです。たとえば、CSS 背景画像を遅延読み込みするためにこの属性を使うことはできません。そのための選択肢については、後ほど説明します。
さらに、この属性はほぼすべてのブラウザに採用されているため（下記参照）、遅延読み込みした画像を SEO のためにインデックス登録してもらうという点でも、この手法が最も安全です。img タグに src 属性がある限り、少なくとも Google はサイトの画像を問題なくインデックス登録できるはずです。
JavaScript で遅延読み込みを実装する場合に限って、<noscript> タグの中で src を指定するのがよいかもしれません。これは、クローラーが JavaScript を処理できない検索エンジンのためです（繰り返しになりますが、Google は問題なく処理できます）。
どちらの場合でも、画像サイトマップもあわせて用意しておくとよいでしょう。
ブラウザの対応状況
遅延読み込みは、事実上のウェブ標準になっています。Can I Use によると、世界のブラウザユーザーの 95% 以上で機能するはずです。
また、サイトに遅延読み込みを実装していても、対応していないブラウザでの体験が損なわれることはありません。
WordPress の遅延読み込み：標準搭載のオプション
WordPress 5.5 以降、この CMS はデフォルトで画像を遅延読み込みしています。この機能はバージョン 5.7 で iframe にも拡張され、WordPress 5.9 でさらに調整されました。
そのため、Squarespace のような CMS から WordPress にウェブサイトを移行したうえで、WordPress サイトが最新バージョンで動いていれば、width 属性と height 属性が指定された画像や iframe には、自動的に <loading=”lazy”> 属性が付与されます。この条件は、前述の Cumulative Layout Shift の問題を避けるために設けられています。
さらに、WordPress 5.9 以降では、ページ内の最初の iframe または画像には遅延読み込みが適用されません。これは、先ほど説明した LCP の問題を避けるためです。
それ以外では、WordPress は次の場所にある画像にこの属性を適用します。
- 投稿のコンテンツ
- 投稿の抜粋
- テキストウィジェット
- アバター画像
- 添付ファイルとして追加された画像
カスタマイズのオプション
現在、WordPress には、特定のページや画像だけネイティブの遅延読み込みを選んでオフにする、コード不要のオプションはありません。そうしたい場合は、プラグインか、以下のフィルターや関数のいくつかを使う必要があります。
- wp_lazy_loading_enabled：特定のコンテキストで、画像の遅延読み込みを完全にオンまたはオフにするために使えます。
- wp_filter_content_tags()：img HTML タグに
srcset、sizes、loading属性を追加し、iframe にもloading属性を追加します。 - wp_img_tag_add_width_and_height_attr()：
width属性とheight属性がない img タグにそれらを適用し、遅延読み込みが適用されるようにするために使います。 - wp_img_tag_add_srcset_and_sizes_attr()：上と同様の目的で、既存の img タグに
srcset属性とsizes属性を含めます。 - wp_img_tag_add_loading_attr()：img タグに
loading属性を追加します。iframe の場合はwp_iframe_tag_add_loading_attr()を使ってください。 - wp_omit_loading_attr_threshold()：最初の画像と iframe のうち、いくつを遅延読み込みしないかのしきい値を設定します。ウェブサイトのファーストビューに複数のメディア要素が表示されていて、そのすべてで遅延読み込みを無効にしたい場合に便利です。
上記を使って WordPress の遅延読み込みを変更する方法の例は、WordPress 5.5、5.7、5.9 のお知らせを確認してください。
トラブルシューティングのヒント
WordPress サイトでネイティブの遅延読み込みが機能していない場合は、<img> タグや <iframe> タグの付いていない要素を対象にしていることが原因と考えられます。WordPress がネイティブに遅延読み込みするのは、これらのタグだけです。そのほかの選択肢については、次のセクションを確認してください。
プラグインで WordPress の画像と動画の遅延読み込みを有効にする方法
サイトに遅延読み込みを追加できるプラグインの選択肢はたくさんあります。しかし、群を抜いて簡単なのは WP Rocket です。かかる時間は1分未満です。
WordPress の管理画面で、「設定」>「WP Rocket」>「メディア」に移動するだけです。
遅延読み込みを有効にしたいメディアの種類のチェックボックスにチェックを入れます。
- 画像
- CSS 背景画像
- iframe と動画
さらに、埋め込まれた YouTube 動画を WP Rocket でプレビュー画像に置き換えることもできます。最後に、width 属性と height 属性がない画像にそれらを追加するオプションもあり、そうした画像も遅延読み込みの恩恵を受けられるようになります。
選択したら、下部にある「変更を保存」をクリックします。これで完了です。
ネイティブの遅延読み込みとの違い
上記からすでにわかるとおり、WP Rocket のオプションは WordPress のネイティブの遅延読み込みを超える機能を備えています。主な違いの1つは、インラインで指定された背景画像と CSS ファイルで定義された背景画像の両方にも遅延読み込みを適用することです。たとえば、この機能に対応したマークアップは次のとおりです。
<div style="background-image: url(image.jpg)">WP Rocket で背景画像を遅延読み込みする方法について詳しくは、技術ドキュメントをご覧ください。
遅延読み込みが機能しているかを確認する方法
ウェブサイトに遅延読み込みが正しく適用されているかを確認するには、ブラウザのデベロッパーツールを使えます。「ネットワーク」タブを開き、「画像」フィルターを使います。ページを再読み込みすると、一覧にはファーストビューにある画像だけが表示されるはずです。
下にスクロールしはじめると、画像が次々と表示されるはずです。また、「イニシエータ」列に lazyload の値が表示されるはずです。
トラブルシューティングのヒント
オプションを有効にしたのに一部の画像が遅延読み込みされていない場合、考えられる理由はいくつかあります。
- WooCommerce の商品ギャラリーなど、一部の種類の画像は意図的に除外されている
- 画像に、
data-srcやdata-no-lazyなど、除外対象の属性のいずれかが含まれている - 画像が JavaScript で動的に追加されている
- 遅延読み込みを追加する別のプラグインと競合している、またはお使いのテーマに独自の遅延読み込み機能がある
詳しくは、一部の画像が遅延読み込みされない理由、LazyLoad でよくある問題、互換性のあるプラグインに関するドキュメントをお読みください。
WordPress で遅延読み込みを無効にする方法
サイト全体、ページ全体、または特定の画像で、遅延読み込みを無効にしたい場合もあります。ここでは、そのためのさまざまな方法を紹介します。
WordPress のネイティブの遅延読み込みを完全に無効にしましょう
WordPress サイトに組み込まれている遅延読み込みを無効にしたい場合は、次のコードスニペットで無効にできます。
add_filter( 'wp_lazy_loading_enabled', '__return_false' );このコードは、お使いのテーマ（子テーマのほうです！）の functions.php ファイルに追加してください。または、Insert Headers and Footers のようなプラグインで追加するか、独自の MU プラグインを作成して追加してください。
特定のコンテキストや一部の画像だけで WordPress のネイティブの遅延読み込みを無効にするには、上記の「カスタマイズのオプション」のセクションにある関数とフィルターを参照してください。
WP Rocket で遅延読み込みをオフにしましょう
WP Rocket の LazyLoad 機能は、有効にしたときと同じくらい簡単に無効にできます。「メディア」パネルを開いてチェックボックスのチェックを外し、保存します。
特定の投稿と固定ページを遅延読み込みから除外しましょう
この機能を特定の投稿や固定ページだけで無効にしたい場合も、WP Rocket ならとても簡単です。エディターでその固定ページや投稿を開き、サイドバーにある「WP Rocket 設定」を探します（なお、この設定を使えるようにするには、コンテンツが公開済みである必要があります）。
使いたくないオプションのチェックを外して、コンテンツを更新するだけです。グレーアウトしているオプションがある場合は、まず WP Rocket の設定でそのオプションをサイト全体で有効にする必要があります。
特定の画像や iframe の遅延読み込みを解除しましょう
特定のメディア要素だけ遅延読み込みを無効にすることもできます。このオプションは、WP Rocket の設定の「メディア」パネルにあります。
遅延読み込みしたくない画像のファイル名、CSS クラス、img 属性、ドメイン名（外部の画像の場合）、または CSS ファイル名を入力欄に入力して保存します。詳しい情報と例はドキュメントにあります。
ただし、ファーストビューにある画像を遅延読み込みから除外するために、この機能を使う必要はないことに注意してください。除外しないと Largest Contentful Paint や PageSpeed Insights の総合スコアに大きな影響を与えかねないため、手を煩わせることなく WP Rocket が自動で除外します。ほかの理由で画像や iframe を遅延読み込みから除外したい場合は、引き続き上記の方法を使えます。
コードで WP Rocket の遅延読み込みを変更しましょう
WP Rocket の遅延読み込みの動作をもっと細かく制御したい場合は、マークアップで変更することもできます。以下のスニペットは、お使いの functions.php か、この目的のためのプラグインに追加します。
条件に応じて遅延読み込みを無効にしましょう
まずは、さまざまな状況で遅延読み込みをオフにするために使える、一般的な関数の構造から始めます。
add_action('wp', function () {
// Declare condition set to false as a default
$condition = false;
// Build your condition logic to turn ‘$condition’ to ‘true’ when applicable
if ($condition) {
// Disable Rocket Lazy Load if condition is met
add_filter('do_rocket_lazyload', '__return_false');
}
}
);次に、この方法の使用例をいくつか紹介します。
すべての固定ページで遅延読み込みを無効にしましょう
投稿の画像は遅延読み込みし、固定ページの画像は遅延読み込みしないようにしたい場合に使ってください。
add_filter( 'wp', function () {
if ( is_page() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);トップページで遅延読み込みをオフにしましょう
サイトのフロントページ（「設定」>「表示設定」>「ホームページ」で設定したページ）の遅延読み込みを無効にします。
add_filter( 'wp', function () {
if ( is_front_page() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);ブログページで遅延読み込みを無効にしましょう
上と同じですが、トップページをブログに設定している場合のためのものです。
add_filter( 'wp', function () {
if ( is_home() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);個別投稿で遅延読み込みを解除しましょう
すべての個別投稿で遅延読み込みを無効にし、固定ページとブログのトップページでは有効のままにするには、次のスニペットを使ってください。
add_filter( 'wp', function () {
if ( is_single() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);特定の画像で LazyLoad を無効にしましょう
data-no-lazy 属性を使えば、特定の画像に遅延読み込みを使わないよう WP Rocket に指示できます。
<img src="my-image.jpg" data-no-lazy="1" alt="" width="100" height="100" />遅延読み込みする画像にフェードイン効果を追加しましょう
遅延読み込みした画像がページ上に突然現れると、訪問者は少し違和感を覚えることがあります。画像を徐々に表示するのは、その体験を改善するためによく使われる効果です。
次の CSS スニペットは、サイトにフェードイン効果を追加します。このスニペットは functions.php ではなく、style.css に追加することに注意してください。
img[data-lazy-src] {
opacity: 0;
}
img.lazyloaded {
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}LazyLoad のしきい値を調整しましょう
デフォルトでは、WP Rocket はブラウザのウィンドウから 300 ピクセル以内にある遅延読み込みの画像を読み込みます。このしきい値は次のように調整できます。
add_filter( 'rocket_lazyload_threshold', function ( $threshold ) {
return 100;
});注：上の例では、しきい値を 100px に設定しています。数値はお好みに合わせて調整してください。
よくある質問
Lazy Load（遅延読み込み）とは何ですか？
Lazy Load（遅延読み込み）とは、最初は画面に表示されていない画像やその他のアセットを、訪問者がその位置に向かってスクロールするまで読み込まないようにする手法です。ページの下のほうにある画像がブラウザを詰まらせないため、ブラウザはウェブサイトのほかの部分をより速く読み込め、訪問者にはページがより速く表示されます。現在はブラウザの標準機能になっており、遅延読み込みしたい画像に HTML 属性で印を付けるだけで使えます。
WordPress は標準で Lazy Load（遅延読み込み）に対応していますか？
はい、WordPress 5.5 以降は、デフォルトで画像が遅延読み込みされます。この機能はバージョン 5.7 で iframe にも拡張され、WordPress 5.9 以降は LCP の問題を避けるため、ページ内の最初の iframe または画像には適用されません。自動的に loading 属性が付与されるのは width 属性と height 属性が指定された画像と iframe で、CSS の背景などにも遅延読み込みを適用したい場合は、WP Rocket のようなプラグインを使うのが最適です。
loading="lazy" とは何で、どう使えばよいですか？
loading="lazy" は、遅延読み込みを適用させたい要素に付けて、ブラウザにその読み込みを延期させる HTML 属性です。<img src="wp-rocket-is-awesome.jpg" loading="lazy" alt="WP Rocket" /> のように <img> タグや <iframe> タグに追加します。もう1つの値 eager は、リソースを位置にかかわらずすぐにリクエストする標準の読み込み動作です。現在この属性が対応しているのは <img> タグと <iframe> タグだけなので、CSS 背景画像の遅延読み込みには使えません。
WordPress で遅延読み込みを無効にするには？
WordPress のネイティブの遅延読み込みは、add_filter( 'wp_lazy_loading_enabled', '__return_false' ); というコードスニペットを（子）テーマの functions.php ファイルに追加すれば、完全に無効にできます。WP Rocket を使っている場合は、「メディア」パネルで LazyLoad のチェックボックスのチェックを外して保存します。特定の投稿や固定ページはエディターのサイドバーにある「WP Rocket 設定」で、特定の画像や iframe は「メディア」パネルの入力欄で、遅延読み込みから除外できます。
遅延読み込みは SEO に影響しますか？
遅延読み込みは、Google のランキング要因である Core Web Vitals を改善するため、SEO 上のメリットがあります。ただし、実装を誤ると、遅延読み込みした画像が検索エンジンにインデックス登録されなくなることがあります。ほぼすべてのブラウザに採用されているネイティブの loading 属性は、インデックス登録の点で最も安全な手法で、img タグに src 属性がある限り、少なくとも Google は問題なく画像をインデックス登録できるはずです。
WordPress で今すぐ遅延読み込みを使い始めましょう
遅延読み込みは、ウェブサイトのパフォーマンスを改善する優れた方法です。画像やその他のメディア要素が実際に画面に現れるまで読み込まれないようにするため、画像の多いサイトで最も効果を発揮します。
現在の WordPress にはデフォルトでネイティブの遅延読み込みがありますが、開発者以外が使える制御項目は多くなく、適用されるのも画像と iframe 要素だけです。よりきめ細かく管理し、CSS の背景などにも遅延読み込みを適用したいなら、WP Rocket のようなプラグインを使うのが最適です。このようなプラグインを使えば、サイトの特定の部分や、個々のファイルに対してさえ、遅延読み込みをオフにできます。
今すぐお試しください。ご満足いただけない場合でも、いつでも 100% 返金保証をご利用いただけます。
