WP RocketのLazyLoadの仕組み

LazyLoadは、ウェブサイトの画像の読み込みを遅延させ、ユーザーがページをスクロールダウンして実際にそれらを見る必要がある時まで待機します。WP RocketのLazyLoadは、Google PageSpeedの推奨事項である「画面外の画像の読み込みを遅らせる」を解決します。これを、Googleが推奨するSEOに優れた方法で実現しています。

LazyLoadの仕組み

画像やビデオを遅延読み込みすることで、初期のページ読み込み時間、初期のページ重量、そしてシステムリソースの使用量を減らすことができます。これら全てがパフォーマンスに良い影響を与えます。

たとえば、あなたのページに10枚の画像があり、合計で2MBの容量があるとしましょう。すべての2MB分の画像を一度にダウンロードしなければならない場合、それは全体の読み込み時間とパフォーマンスに影響を与えます。特に、処理能力が限られているモバイルデバイスや、インターネット接続速度が遅い場合に影響が大きくなります。データを課金しているモバイルユーザーにとっては、彼らがページ全体をスクロールしない限り、見ることのない画像をダウンロードするための料金を支払う必要がなくなります。

標準的な画像

投稿、ウィジェットなどのコンテンツに追加された、<img>タグ内にある外部ドメインを含むすべての画像は、自動的にLazyLoadされるべきです。

CSSファイルに含まれている画像や、JavaScriptから読み込まれる画像は、LazyLoadされません。

背景画像

背景画像は特殊なケースであり、ページに追加する方法が複数あるため、LazyLoadするのが複雑です。しかし、WP Rocketは以下の要素にインラインで適用された背景画像を自動的にLazyLoadします。

• div
• span
• section
• li
• figure
• a

互換性のあるマークアップの例

<div style=”background-image: url(image.jpg)”>

このdiv要素は他の属性やクラスを持っていても、機能します。

その要素は次のように変換されます。

<div data-bg=”url(image.jpg)” class=”rocket-lazyload” style=””>

Elementorを使用している場合、現時点では一部の背景画像をLazyLoadすることができません。

Bridgeテーマを使用している場合、背景画像のLazyLoadは自動的に無効になります。

問題が発生した場合、ヘルパープラグインを使って背景画像のLazyLoadを無効にすることができます。