Lazy Loading（遅延読み込み）
ウェブサイトなどのオンラインプラットフォームを利用する際、 読み込み速度と最適化 はますます重要となり、ユーザーは速度と応答性を一層強く求めています。
このため、 Lazy Loadingとして知られるページ設計パターン が重要性を増しています。では、Lazy Loading（遅延読み込み）とは具体的に何でしょうか？
それを以下で詳しく見ていきます。
Lazy Loadingとは何か？
具体的には Lazy Loading とは、ウェブサイトに適用される技術、すなわちプログラミングの設計パターンの一種で、 要素やリソースが完全に読み込まれず 、ユーザーの利用に応じて オンデマンド で逐次実行される、すなわち「遅延読み込み」をコンテンツに対して行うものです。
これにより、リソースが最適化され、 テキスト、動画、画像などのコンテンツは必要になったときにのみ読み込まれ 、速度、メモリ使用量と処理、応答性、読み込み時間を改善します。これはサイトやページが完全に読み込まれる フル読み込み とは対照的で、ユーザーが使用しない要素まで読み込まれます。
Lazy Loadingの一般的なメリット
Lazy Loadingの主な目的は、要素を使用するときだけ読み込むよう最適化することなので、メリットは多数あり、次のようにまとめられます。
- ウェブサイトの主要要素を表示する速度。
- サイト上のユーザー体験（UX）の大幅な向上 。
- モバイルデバイスでのパフォーマンス向上 。特にネットワーク接続のリソースが限られている場合に有効です。Lazy Loadingが有効になっていれば、悪い接続環境では実行不能なページの閲覧も可能になります。
- モバイルデバイスのCPU、RAM、バッテリーなどのリソースの全体的かつ総合的な最適化。
- 読み込みの問題がないことによる 滞在時間の増加 が、間接的にランキング改善につながります。
- 直帰率（bounce rate）の低下 。
同様に、Lazy Loadingというプログラミングアプローチには、より技術的な観点からのメリットや新しさもあります。
- Lazy LoadingはReactやAngularといったJSフレームワーク、WordPressなどのCMSプラットフォームと完全に互換性があります。実際、 WordPress 5.5バージョンから画像のlazy loadingがデフォルトで含まれることが最近報告されました 。
- IntersectionObserver APIのおかげで、検索エンジンから画像が隠れることはありません。
- 画像や responsive クラスのリソースなど、複数のコンテンツタイプに対応。
- サイトの画像をインデックスさせることが可能で、SEOにとって極めて重要です。
- SEOの多くの重要点を直接的・間接的に改善するため、100%SEOフレンドリーなリソースです。
WordPressでLazy Loadingを実装するには？
WordPressサイトを運用しているなら、ページの読み込みを大幅に高速化できるLazy Loadingの実装ソリューションが多数あるという大きなアドバンテージがあります。下のスクリーンショットは、プラグインリポジトリで利用可能なソリューションの一部を示しています。
lazy loadingを実装するための主要なWordPressプラグインの一覧。
実装の方法は複数あります。
- 「Lazy loader」「a3 lazy load」などlazy loading専用プラグインを選ぶ。
- 「WP Rocket」のようなウェブ最適化プラグインを選ぶ。これらはこのオプションを他の改善とともにデフォルトで含んでいます。
Lazy Loadingに関連するSEOの観点
遅延読み込みの主な役割と主要なメリット、そしてそれがページパフォーマンス、UX、SEOの改善にどう影響するかを把握しました。
ここで、遅延読み込みを最大限に活用するためには賢く使う必要があります。誤って使えば逆効果になりかねないからです。
たとえば、 lazy loadingは速度向上のためにキャッシュを利用する ため、そこに過度なコンテンツが保存されると、適切に実装されない場合に遅延やエラーが発生し、Googleがページや要素をインデックスできなくなる可能性すらあり、サイトのランキングに深刻な影響を及ぼし得ます。いくつかのヒントは次のとおりです。
- キャッシュを最適化し、賢く使う。
- Google Search Consoleを使ってGoogleがサイトをクロールしている内容を確認する。
- Googleが各画像をインデックスできるよう、ALTテキストを追加する。
- 必ず IntersectionObserver APIを利用する。
- ChromeブラウザのBlink LazyLoad機能を活用し、 iframe や他ページ・他ソースから埋め込んだコンテンツに loading 属性を追加する。画像、写真、動画、テキストなどのコンテンツに適用されます。
Lazy LoadingとUX
ウェブサイトにおいては、読み込み時間、応答性、リソース使用量、一般的な挙動について良いユーザー体験（UX）を提供するための技術的・全般的な最適化が不可欠です。サイトの応答性が悪ければ、直帰率が高くなり、ユーザー体験が悪ければ、トラフィック、可視性、さらにはSEOにまで影響を及ぼします。
遅延読み込みでは、ページをスクロールしてユーザーが必要としたときにコンテンツを段階的に読み込むことで、サイトのUXを劇的に改善することを目指します。画像であれテキストであれ、プラットフォーム全体を読み込み、ユーザーにとって重要でない要素まで表示してしまうのと比べて、リソースの使い方を最適化します。
Chromeのネイティブlazy loading（HTML）
GoogleがUXを重視していることを示すように、2020年から Chromeブラウザのバージョン75を皮切りに 、HTMLページのタグや写真・動画などのマルチメディアコンテンツに ネイティブのlazy loading を追加することが可能になりました。
このようにHTMLのlazy loading属性を自動的に追加すると、Chromeブラウザはページコンテンツが一度に全部ではなく、ユーザーのナビゲーションに応じて読み込まれることを理解し、速度と応答性を改善します。使用方法は 視覚的・マルチメディアリソースの各タグやiframeに loading 属性を lazy の値で追加する ことです。
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> このリソースは、ブラウザがダウンロードする情報の大部分を占める 画像 にも、サイトに外部リソースを埋め込むために使用する iframe にも使用できます。
iframeでの使用は強調しておく価値があります。これらはサイトにおいて重要な読み込みポイントとなり得るからです。
短所としては、ネイティブのlazy loadingはChromeとのみ互換性があります。ただし、Mozilla Firefoxのようにサポートがないブラウザでも、互換性のあるライブラリを通じて他のブラウザに実装することは可能です。
Lazy loadingの用途
すでに述べたとおり、lazy loadingはページ要素の読み込みを遅らせることで応答を最適化することに焦点を当てています。この意味で、ツールに与えられる用途は すべての視覚リソース に焦点を当てており、特に 画像、動画、 iframe （ドキュメントやその他のファイルを含むことができる）に重点が置かれます。これらはすべて、タグの修正と loading 属性に lazy の値を含めることを通じて行われ、重い要素や大容量のマルチメディアコンテンツを含む場合でも、サイトの一般的な速度を最適化します。
Lazy loadingについて質問がある、またはあなたのプロジェクトに実装したいですか？お気軽にご相談ください！
ドキュメントと参考資料：
著者: David Kaufmann
私はこの10年以上、SEOに完全に夢中になって過ごしてきました。正直なところ、他の生き方は考えられません。
私のキャリアが新たな次元に到達したのは、Chess.com でシニアSEOスペシャリストとして働いたときでした。Chess.com はインターネット全体で最も訪問数の多い上位100サイトの1つです。数百万ページ、数十言語、そして最も競争の激しい SERPs の1つという規模で仕事をした経験は、どんなコースや資格でも得られないことを教えてくれました。あの経験は、本当に優れたSEOとは何かという私の視点を一変させ、それ以降に私が築いてきたすべての土台となりました。
その経験から、私は SEO Alive を創業しました。オーガニック成長に本気で取り組むブランドのためのエージェンシーです。私たちは dashboards や月次レポートを売るためにここにいるのではありません。本当に成果を動かす戦略を構築するためにここにいます。クラシカルなSEOの最良の部分と、Generative Engine Optimization (GEO) というエキサイティングな新しい世界を組み合わせ、あなたのブランドが Google の青いリンクだけでなく、ChatGPT、Perplexity、Google AI Overviews が毎日何百万人もの人々に届けている AI 生成の回答の中にも確実に表示されるようにします。
そして、この両方の世界をきちんと扱えるツールが見つからなかったので、自分で作りました。それが SEOcrawl です。rankings、テクニカル監査、backlinks モニタリング、crawl ヘルス、そして AI ブランド可視性トラッキングを1つの場所に統合した、エンタープライズ向けのSEOインテリジェンスプラットフォームです。まさに、ずっと存在してほしいと願っていたプラットフォームです。
この著者の他のコンテンツをご覧ください
