ウェブサイトに遅延読み込みを実装するには、様々なアプローチがあります。遅延読み込みをサポートするWordPress向けプラグインのランキングリストもぜひご覧ください。.
WordPressディレクトリには、画像や動画の遅延読み込みに使える無料プラグインが多数あります。数十種類のプラグインを検討し、いくつかをテストした結果、ウェブサイトのパフォーマンスを大幅に向上させるプラグインを2つ見つけました。遅延読み込みの実装にご興味をお持ちでしたら、以下のオプションをご検討ください。.
WP Rocket（プレミアム）の使用
WP Rocketは、ウェブサイトの読み込み速度を遅くする最も簡単な方法です。しかも、有効化のプロセスは1分もかかりません。LazyLoadは、WP Rocketに搭載されている画像遅延読み込みプラグインの名前です。.
LazyLoad がオンの場合、WP Rocket は WordPress のネイティブ画像の遅延読み込みを直ちに停止し、問題が発生するのを防ぎます。.
WP Rocket の LazyLoad 機能を有効にするには、以下の手順に従ってください。
- WordPress インストール内の「設定」>「WP Rocket」>「メディア パネル」に移動して、LazyLoad を有効にできます。.
- 画面上部のLazyLoad領域の下にある「画像に対して有効にする」をクリックします。.
- 選択したら、「変更を保存」をクリックします。.
他にやるべきことはこれだけです。その結果、訪問者は写真の読み込みに時間がかかるようになります。.
LazyLoad は、WordPress が提供するネイティブのアプローチとは対照的に、iframe や動画などの追加の HTML 要素に対して遅延読み込みを提供します。さらに、特定の HTML コンポーネントに背景画像がインラインで適用されている場合、背景画像にも遅延読み込みが適用されます。.
WordPress のネイティブ画像遅延読み込み機能を使用したい場合は、WP Rocket の LazyLoad オプションを無効にできます。ただし、この新しい読み込み機能は、まだすべてのブラウザでサポートされているわけではありません。また、WordPress のインストールは画像のみを対象としています。そのため、特にウェブサイトに画像、動画、埋め込みコンテンツが多数ある場合は、WP Rocket の LazyLoad が依然として優れた代替手段となります。.
WP Rocketのネイティブ遅延読み込みを有効にする際の注意点
WP Rocket はネイティブ遅延読み込みを使用する Chrome ブラウザとの自動互換性を備えていませんが、ヘルパープラグインを使用して Chrome のネイティブ遅延読み込みを有効にするオプションを選択できます。同様に、WP Rocket はネイティブ遅延読み込みを使用する他のブラウザとの自動互換性を備えていませんが、これも同様の機能です。.
この便利なプラグインを使用すると、次のことが可能になります。
- すべての写真には、ネイティブの遅延読み込みを使用するために必要な HTML 構文が含まれます。Chrome と互換性のあるブラウザは自動的にネイティブの遅延読み込みを利用し、その他のすべてのブラウザは自動的に WP Rocket の LazyLoad を使用します。.
- 弊社の強力な LazyLoad テクノロジーを引き続き利用するか、Chrome に組み込まれている遅延読み込み機能に切り替えるかを選択できます。.
すべてはあなた次第です！まずは、あなたの場所で両方のアプローチを試してみて、最も効果的な方法を選んでください。.
a3 Lazy Load（無料）の使用
無料のオプションをお探しの場合は、 a3 Lazy Loadウェブサイト上の動画の遅延読み込みも許可されます。
さらに、このプラグインは外部画像や動画の遅延読み込みをサポートします。WordPressのコア実装ではこのような処理は実行されません。.
このプラグインはWordPressダッシュボードからインストールして有効化できます。その後、ツールの設定をカスタマイズできます。.
ステップ2: プラグインの画像設定を調整する
次に、「設定」>「a3 Lazy Load」に進みます。「Lazy Loadの有効化」の項目を見ると、プラグインはインストール後デフォルトで有効化されていることがわかります。.
次に、「LazyLoad イメージ」タブを開きます。(1) ウェブサイトの画像のうち、どの画像を遅延させるかを選択し、(2) JavaScript を受け入れないウェブブラウザ向けにフォールバック機能を提供します。遅延させたくない画像には、(3) CSS クラスを設定できます。
デフォルト設定ではすべてのオプションが有効になっています。この設定を維持することを強くお勧めします。特定の画像の遅延読み込みをスキップできるCSSクラスを作成してください。
ステップ3：プラグインのビデオ設定を調整する
次のステップは「動画とiframeの遅延読み込み」タブです。a3 Lazy Loadを使用すると、画像と同様に、特定のクリップの遅延読み込みを選択できます。.
このプラグインは、(1) コンテンツとウィジェット内でのビデオの使用を許可し、(2) JavaScript をサポートしていないブラウザ用のフォールバック機能を提供します。
動画設定（3）でCSSクラスを指定することで、特定の動画を遅延読み込みから除外できます。よりシンプルな設定にしたい場合は、画像セクションで選択したクラスと同じものを使用してください。.
WordPressの遅延読み込みプラグイン
WP rocket と a3 Lazy Load 以外にも、遅延読み込みに役立つプラグインがいくつかありますので、検討してみてください。
- 動画の遅延読み込み
- BJ 遅延読み込み
- WooCommerceの商品をもっと読み込む
- WordPress無限スクロール – Ajax Load More
- Disqus 条件付き読み込み
- コメントの遅延読み込み
最後に
ウェブサイトを更新または変更する際は、潜在的な競合の可能性に注意することが重要です。遅延読み込みを許可したことでウェブサイトの一部が操作不能になった場合は、遅延読み込みに関連するよくある問題のリストをご確認ください。.
Revolution SliderやEnvira Galleryなどのプラグインによってアップロードされた画像には遅延読み込み機能が適用されないため、互換性の問題が発生する可能性があります。互換性のあるプラグインの全リストは、こちらでご覧いただけます。.
この記事をはじめ、多くの記事はSeahawk Media Blog。
