Webページを高速化するためにWordPressの遅延読み込みが必要なのはなぜですか？

表示できるよりも多くのデータをロードするのはなぜですか？

高速なWebサイトは、より持続可能であり、一般的に、必要なものをすばやく簡単に見つけることができるより多くのユーザーを引き付けるのにより効率的です。 ただし、画像が適切に最適化されていないと、大きな負荷が発生し、ページの読み込みや応答性などが低下する可能性があります。

Akamaiによると、訪問者の47％は、Webページが2秒以内に読み込まれることを期待しています。 ページの読み込みに3秒以上かかる場合、訪問者の40％がWebサイトを離れます。 さらに、1秒の遅延により、売上が7％減少する可能性があります。 なぜなら：

Webページがロードされるのを「待つ」ことは誰も望んでいません。

これだけでなく、検索エンジンの巨人であるグーグルも、2〜3秒未満の速い読み込み時間を持つウェブサイトを好みます。

通常、WebまたはWordPressの投稿/ページは、HTML、CSS、JavaScript、画像、ビデオ、コメントなどを含む複数のページコンテンツで構成されます。一般に、WordPress Webサイトを高速化する方法はいくつかありますが、ほとんどの手法はコードの最小化からWordPressでのレイジーロードテクニックまで多岐にわたります。

このガイドでは、遅延読み込み、その長所/短所、使用例について説明し、 WordPressの画像、動画、コメントを遅延読み込みして無限スクロールを使用する方法を示します。

レイジーロードとは何ですか？

訪問者がWebページを開くと、コンテンツの重さに関係なく、ページ全体のコンテンツのダウンロードとレンダリングが開始されます。 訪問者が最初の折り目を表示した後にWebページを閉じる可能性があります。

ページにアクセスすると、帯域幅が消費され、メモリを使用してキャッシュされたデータが保存されます。 ページをすぐに終了すると、メモリと帯域幅が無駄になる可能性があります。 これは、遅延ロードがジャンプする場所です。

遅延読み込みは、一度にすべてではなく、必要なときにWebコンテンツを読み込むための手法です。

遅延読み込み手法を使用すると、ページのコンテンツは、ビューポート（画面）に表示されたときにのみ読み込まれます。

遅延読み込みはどのように機能しますか？

基本的に、遅延読み込みでは、遅延読み込みされたWebページリソース（画像、ビデオなど）に参照src属性を配置し、元のコンテンツに別の属性を追加してから、JavaScriptを使用してページの訪問者のスクロール位置を検出します。 スクロール位置が参照オブジェクトに最も近い場合、参照src属性を実際のsrcに置き換えて、コンテンツをロードします。

たとえば、訪問者がWebページを開いてすぐに離れた場合、Webページの上部以外には何もロードされません。

実行時にアセットをロードすると、ページが初期ロードのためにサーバーに送信する必要のあるリクエストの数が減り、WordPressホスティングサーバーと訪問者の間の通信が一度に高速かつ最小限になります。

遅延ロードはSEOに影響しますか？

Lazy LoadはSEOに対応していません（少なくともこのガイドを書いている時点では）。 コンテンツ（画像、ビデオ、コメントなど）は最初は訪問者向けに読み込まれないため、同じフローが検索エンジンスパイダーにも当てはまります。 遅延読み込みコンテンツ（画像、動画）の一部がGoogle画像/動画セクションでインデックスに登録されない可能性があります。これは、SEOの観点からは適切ではありません。

Lazy Loadedコンテンツへのリンクを追加するなど、回避策は存在します。 このように、Googleはそれを標準のWebページと見なし、それに応じてコンテンツにインデックスを付けます。 ただし、訪問者には引き続きWebページがLazyLoadedとして表示されます。

検索エンジンの巨人であるGoogleは、遅延読み込みを利用してGoogleBotで検出可能な遅延読み込みコンテンツを取得する方法に関するヘルプドキュメントを作成しています。

メディアはウェブサイトの速度を落としますか？

画像とビデオは、WebページのWebコンテンツ要素の一部です。 したがって、はい、ロード時間への影響。

Webページのサイズが大きいほど、読み込みに時間がかかります。

したがって、WordPressサイトにアップロードする前に、画像を最適化することを常にお勧めします。 WP Compress、ShortPixel、WP SmushItなどを使用して画像サイズを縮小できます。

また、画像のサイズを指定します。たとえば、1000×1000ピクセルの画像があり、100×100ピクセルに拡大縮小した場合、ブラウザは必要な10倍の負荷をかけます。 さらに、ブラウザはJPG、PNG、GIF画像をすばやく読み込むことができるため、TIFF、BMPなどの複雑なファイル形式は避けてください。

遅延読み込みを使用する必要がありますか？

これがスピードの時代です！

すべての訪問者は、Webページが瞬く間に読み込まれることを期待しています。 ページの読み込み時間を改善する方法を探し続ける必要があります。遅延読み込みはその方法の1つです。

モバイルユーザーの大幅な増加に伴い、世界中のトラフィックの52％以上がスマートフォンを介して提供されています。 WordPressのウェブサイトを最適化する際には、モバイルユーザーを確実に検討する必要があります。

3遅延ロードのユースケース

ほとんどの場合、遅延読み込みは画像に使用されますが、これは画像のみに限定されません。 ビデオ、コメント、スクリプトなどと統合するために使用できます。インターネットの巨人はすでに何らかの方法で遅延読み込みを使用しています。 それらのいくつかを次に示します。

1. 中くらい

Mediumにアクセスしたことがある場合は、実際の高解像度画像が完全に読み込まれるまで、遅延読み込み画像のプレースホルダーがぼやけて表示されるため、訪問者は画像が読み込まれていることを期待していることに注意してください。 これにより、最初に読み込まれたコンテンツの一部が表示され、訪問者の注意を引き付けることができるため、ユーザーエクスペリエンスが向上します。

2. YouTube

デフォルトでは、YouTubeが最初に表示するのは視聴する予定の動画であり、最初の読み込み時に他の提案された動画のコメントやサムネイルは読み込まれません。 スクロールを開始すると、サムネイルやコメントなどの遅延ロードされたアイテムのロードが開始されます。 このように、訪問者はページ全体がロードされるのを待つ必要はありません。 彼はすぐにビデオを見始めることができます。

3. Google画像

Googleで画像を検索すると、プレースホルダー画像がサムネイルに置き換えられ、多数の画像を表示した後、さらに多くの画像が読み込まれることに気付いたかもしれません。 Googleは、検索結果を改善するために、無限スクロールと遅延読み込みを組み合わせるために異なるアプローチを使用しています。

WordPressWebサイトに遅延読み込みを追加する

WordPress Webサイトに遅延読み込み手法を実装することで、リクエストの数を減らすことができます。これにより、サーバーの応答時間が短縮され、ページの読み込みエクスペリエンスが向上します。

WordPressコミュニティの貢献のおかげで、WordPressコンテンツに遅延読み込みを実装することはそれほど技術的ではありません。

1. WordPressの遅延読み込みプラグイン

WordPressプラグインディレクトリで「遅延読み込み」を検索すると、いくつかの遅延読み込みプラグインが見つかります。 ただし、このガイドでは、WordPress Webサイトに遅延読み込み手法を実装するために、最も人気があり、機能が豊富で、広く使用されているプラ​​グインの1つであるa3 LazyLoadを選択します。

2. WordPressの遅延読み込み画像

画像はリソースを大量に消費し、多くの帯域幅とストレージスペースを消費します。 a3 Lazy Loadプラグインを使用すると、オンとオフを切り替えることができます。 これだけでなく、画像の遅延読み込みをオンにすると、次のような機能を制御できます。

• 投稿、ページ、およびカスタム投稿タイプ（すべてのコンテンツ領域）
• ウィジェット（サイドバー、ヘッダー、およびフッター）
• サムネイルの投稿に適用
• Gravatarに適用する

3. WordPressの遅延読み込み動画とiFrame

a3 Lazy Loadは、遅延ロード画像のみに限定されるものではなく、ビデオを遅延ロードすることもできます。 iFrameを使用して初期ロード時にビデオをロードするすべてのWordPressビデオ埋め込みをサポートします。 ここでも、オン/オフの切り替えが含まれています。 オンにすると、以下の領域を制御できます。

• 投稿やページ（すべてのコンテンツ領域）にURLで埋め込まれた動画
• ウィジェットタイプ、テキストウィジェット、およびHTMLウィジェットのビデオ
• 人気のYouTube埋め込みプラグインと完全に互換性があります

4. WordPressの遅延読み込みコメント

ほとんどのWordPressユーザーが使用しているWordPressコメントプラグインがいくつかあります。 遅延読み込みは、さまざまなWordPress遅延読み込みプラグインを使用してそれらの多くに適用できます。

• デフォルトのWordPressコメントの場合、コメントに遅延読み込みを使用できます
• Disqusコメントの場合、Disqus条件付きロードを使用できます
• Facebookのコメントには、LazyFacebookのコメントを使用できます。

5. 5. WordPress用のその他の遅延読み込みプラグイン

a3 Lazy Loadの他に、考慮できる便利なプラグインがいくつかあります。

• a3遅延ロード
• BJレイジーロード
• WordPress Infinite Scroll – Ajax Load More
• WPロケットによる遅延ロード
• WooCommerce用の製品をさらにロードする
• コメントの遅延読み込み
• Disqusの条件付き負荷
• 動画の遅延読み込み

WordPress無限スクロール

名前が示すように、無限スクロールは自動的に次のページを追加し、ページ全体から一度にロードする時間を節約します。 たとえば、Facebookニュースフィードでそれを経験したことがあるでしょう。 下にスクロールし続けると、ページ全体が読み込まれるのではなく、フィードが自動的に更新されます。

WordPressでは、Download WordPress Infinite Scroll – Ajax LoadMoreプラグインを使用してこれを実装できます。 これは、AJAXを利用したクエリで、投稿、単一の投稿、ページ、コメントなどを遅延読み込みするために使用されます。

これだけでなく、Webページ全体をロードせずに何千もの製品を表示するWooCommerceやEasy DigitalDownloadsなどの人気のあるeコマースプラグインを使用した無限のスクロールにも役立ちます。

GoogleChromeはデフォルトで遅延読み込みを統合する場合があります

Googleは、遅延ロードされたコンテンツをよりアクセスしやすくするために取り組んでいます。 また、GoogleChromeで遅延読み込みのサポートを追加する可能性についても実験しています。 そのため、現在画面に表示されているページの一部のみが読み込まれ、下にスクロールすると「スクロールしなければ見えない位置」にあるすべてのものが読み込まれます。

現在、Google Chrome Canaryでテストできます。これは、開発者と早期採用者を対象とした早期リリースバージョンです。 試してみるには、Canaryをダウンロードしてから、アドレスバーに以下を入力してください。

• chrome：// flags /＃enable-lazy-image-loading
• chrome：// flags /＃enable-lazy-frame-loading

これらのフラグがアクティブな場合、GoogleChromeは現在画面に表示されていない画像やiFrameを読み込みません。 これは、Google ChromeでWebページをより高速にロードするのに役立ち、帯域幅の使用を減らし、モバイルブラウザにとって特に便利な機能になります。 先に進んで、より良い方法でモバイル訪問者にサービスを提供してください！