WordPresに最適な遅延読み込みプラグイン

画像、インフォグラフィック、装飾効果はすべて、ウェブサイト上のあらゆる種類のコンテンツを宣伝するための優れた補助手段です。それらは確実な注意グラバーであり、1フレームでコンテンツの本質を伝えることができます。画像を利用して読者の目を引き、インターネットでのユーザーエンゲージメントを高めるのも当然です.


反対に、画像はWebページに読み込まれるのに時間がかかることがよくあります。また、低速の接続を使用している場合は、ロードに時間がかかるように見えることがあります。これは、ページから離れる可能性が高いユーザーにとっては大きなオフになる可能性があります。.

免責事項: WPExplorerは、以下にリストされている1つ以上の製品の関連会社です。リンクをクリックして購入を完了すると、手数料が発生します.

画像の重いページの読み込みを高速化するにはどうすればよいですか?

画像の読み込みに時間がかかるのはなぜですか?まあ、私たちはそれをこのように説明することができます–ウェブページは多くの要素-テキスト、画像、メディア、スクリプトなどで構成されています。各要素を読み込むために、ブラウザーはWebサイトへの要求(HTTP要求と呼ばれます)を行います。要素の多く、特に画像はバイトが多く、ロードに時間がかかります。通常、すべての要素が同時にロードしようとするため、Webページ全体のロードが遅延します.

論理的なことは、高速読み込みコンテンツを最初にブラウザに表示して、視聴者の注意を引くことです。同時に、データの多い画像の読み込みを遅らせます。このアプローチは、画面上に注意を向けるために何かがあるので、ユーザーに待つように説得する可能性があります.

遅延読み込みとは?

遅延読み込み技術を使用して画像を遅延させることができます–最初にテキストまたは選択されたコンテンツのみを読み込み、画像または読み込み速度の遅い要素を遅らせます。画像の読み込みがずらされるため、Webページの最初のバイトまでの時間が改善されます。ユーザーが下にスクロールすると、画像は一度に1つずつ取得されます。その結果、サーバーに同時にヒットするHTTPリクエストの数が減少します。.

画像はプレースホルダーに配置され、後でロードされます。画像が表示領域に到達すると、サーバーからフェッチされます。スクロールせずに見える範囲に移動すると、画面に表示されます。無限スクロールの場合、ユーザーが画面の下部を押したときにajaxを使用してさらに読み込む.

遅延読み込みが役立つ方法

遅延読み込みは読み込み時間を短縮します。より高速なWebサイトは、ユーザーエクスペリエンスと検索エンジンに適しています。また、本当に必要なときにのみ画像をロードすることにより、サーバーの帯域幅を削減します。これにより、サーバー側とユーザー側の両方で帯域幅が節約されます。選択したページまたはサイト全体に遅延読み込みを適用できます.

遅延読み込みの1つの欠点は、フォールドの後に続くコンテンツが検索エンジンで見つけられない可能性があることです. 検索エンジンが無限スクロールコンテンツを認識しない場合がある. この欠点を少なくとも部分的に克服するには、URLを検索エンジンで処理できるように構造化する必要があります。これにより、画像が読み込まれるまで、プレースホルダが検索エンジンに表示されやすくなります。.

WordPressウェブサイトで遅延読み込みを機能させることができるプラグインはたくさんあります。人気のあるプラグインのいくつかを見てみましょう,

BJレイジーロード

投稿画像、投稿サムネイル、グラバター画像、コンテンツiframeのすべてまたは一部をプレースホルダーに置き換えるには、次を使用します。 BJレイジーロード. また、iframeを置き換えることもできます。つまり、YouTubeやVimeoから埋め込みビデオを遅延読み込みできます。テキストウィジェットでも機能します。シンプルなフィルターを使用して、テーマの画像とiframeを遅延させることができます.

bj-lazy-load

プラグインをウェブサイトで機能させるには、ダウンロードしてインストールし、アクティブ化するだけです。次に、設定にアクセスして、ロード中に遅延が発生する要素を特定できます。必要に応じて、独自のプレースホルダー画像を追加します.

このプラグインはJavaScriptを使用します。その結果、JavaScriptを使用していないビジターは、読み込みの遅延なしに元の要素を見ることができます.

レイジーロード

WordPress Webサイトに遅延読み込みを追加するために一般的に使用されるプラグイン, レイジーロード シンプルなインストールとアクティブ化プラグインです。 AutomatticのWordPress.com VIPチーム、TechCrunch 2011 Redesignチーム、Jake Goldman(10up LLC)のコードを組み合わせて開発されていることを知っているので、自信を持って試すことができます。.

遅延ロード

また、アクティベーション後は何もする必要はありません。ただし、変更を加えたい場合は、phpファイルを編集して変更できます。作成者は、プレースホルダー画像の変更、テーマでの画像の遅延読み込み、または出力バッファリングによるすべての画像の遅延読み込みで参照できる役立つコードスニペットをいくつか提供しています。.

Ajax Load More – Infinite Scroll

Ajax Load More 下にスクロールして表示される長いWebページでの読み込みの遅延に適しています。遅延読み込み投稿、カスタム投稿タイプ、単一投稿、ページ、コメントに使用します.

ajax-load-more

さらに、ショートコードビルダーを使用して、カスタムのWordPressクエリをフレーム化できます。コンテンツエディターで選択したページに生成されたショートコードを追加するか、テンプレートファイルに直接追加します。フロントエンドからページを表示し、Ajax Load Moreをチェックして、下にスクロールしてもコンテンツをロードする.

さらに、Ajax Load MoreはWooCommerceおよびEasy Digital Downloadsで正常に動作するため、長い製品ページに適しています。.

ビデオの遅延ロード

多数の埋め込み動画があるウェブサイトを運営している場合、これはあなたのためです. ビデオの遅延ロード 埋め込み動画をクリック可能な画像に置き換えます。訪問者がページを呼び出すとすぐに、Webページはビデオをロードしません。画像がクリックされたときにのみビデオが読み込まれます.

ビデオのレイジーロード

プラグインは埋め込まれた動画を検査し、すべての外部ファイルを静止画像と再生ボタンに置​​き換えます。ビデオは、訪問者がボタンをクリックしたときにのみ読み込まれます。これは、特に多くのビデオが含まれている場合、ページの読み込み速度に大きな影響を与える可能性があります。そしてユーザーにとって、それはスムーズな体験です.

a3遅延ロード

ハンドヘルドデバイスで表示されるWebサイトが増えるにつれ、モバイルエクスペリエンスにも最適化する必要があります. a3遅延ロード は、選択したページ要素の読み込みを遅らせることにより、モバイルでのサイトの速度を向上させるように設計されています。要素は管理設定で選択できます.

a3-lazy-load

プラグインは、コンテンツまたはウィジェットの任意の場所に配置されたiframe内のコンテンツをサポートします。 WordPress埋め込みメディア、プロフィール付きFacebookの「いいね」ボックス、「いいね!」ボタン、おすすめボタン、Google +プロフィール、Googleマップ、およびその他の同様のメディアコンテンツをすべて遅延読み込み用に選択できます.

さらに、Accelerated Mobile Pages(AMP)との衝突はありません–遅延読み込みは / amp 終点。それはブラウザがなしでURLをスポーツするときだけです / amp その怠惰な負荷が出てきます.

WP YouTube Lyte

あなたのウェブサイトがYouTubeでひどく引き寄せられるなら, WP YouTube Lyte あなたにかなりの利益をもたらすことができます。 YouTube埋め込みに似た「Lite YouTube埋め込み」を挿入します。しかし、ビデオはクリックされたときにのみ呼び出されます.

wp-youtube-lyte

このプラグインをウェブサイトで機能させるには、新しい申請者としてYouTubeに登録する必要があります。プラグインは、各動画のYouTube APIを使用して、YouTubeリポジトリから取得します。 WebサイトでそのAPIを使用するには、YouTubeから提供されたAPIキーを有効にする必要があります。 YouTubeから受け取ったサーバーキーを入力する必要があります.

YouTube APIキーを有効にしたら、プレーヤーの寸法と位置を好みに合わせて設定を調整します.

ロード画面でページをロードする

ロード画面でページをロードする, ユーザーは、ページがロードされるまでの待ち時間を知ることができます。プラグインは、ロードの進行状況を完了率として示す画面を表示します.

ローディングページとローディング画面

進行状況をホームページのみに表示するか、すべてのページに表示するかを選択します。無料版では、プログレスバーだけが表示に使用されます。その他のオプションについては、にアップグレードする必要があります プレミアムバージョン. また、プレミアムバージョンは画像に遅延読み込みを適用します.

いくつかのプラグイン,

  • さらに読み込むは、長い製品ページで役立つ機能です。これらは一般にWooCommerce Webサイトにあります. WooCommerce Infinite ScrollとAjax Pagination デフォルトの製品ページネーションを無限スクロールまたはAjaxページネーションに変換します。これは、ユーザーにとって、「次のページ」を繰り返しクリックする必要がないことを意味します。ユーザーがページの下部に到達すると、次の製品セットが自動的に取得されて読み込まれます。さまざまなページネーションオプションがモバイルデバイスで利用可能.
  •  WooCommerceの製品をさらに読み込む 無限スクロール機能付きのAjaxまたは[さらに読み込む]ボタンを使用して、次のページからより多くの製品を読み込むために追加できます。アニメーション効果とカスタマイズ用, プロバージョン 利用可能です.
  • 画像レイジーロードとスライドショー –このプラグインを使用すると、ライトボックスエフェクトまたはカスタムギャラリーエフェクトを任意の画像に追加したり、ロードを遅延したりできます。 3つの効果があり、独自の効果を追加することもできます.
  • ロケット遅延ロード –非常に軽い(2kb未満)。サムネイル、投稿内のすべての画像、ウィジェットテキスト、またはアバターで機能するJavaScriptをサイトのヘッダーに挿入します。 jQueryなどのJavaScriptライブラリを使用せずに、サイト全体の画像を遅延させます.
  • クレイジーレイジー –軽量であり、インストールと使用が簡単で、設定を必要とせずに同じ仕事をします。画像に属性を追加するだけで、画像を除外できます.
  • レイジーロードXT –画像、フレーム、YouTube動画、Vimeoで機能する高速プラグインです。完全にカスタマイズ可能です.

多くのスライダーが好き ロイヤルスライダー そして WP電気カルーセル 画像をロードするための遅延ロードの原則も組み込んでいます. イベント予約プロ 遅延読み込みカレンダーをサポート.

結論として

遅延読み込みは、特に多数の画像や動画を扱うWebサイトで、サイトの速度を向上させる効果的な方法です。他にも、画像の最適化やキャッシュなど、サイトの速度向上に役立つ多くの方法があります。 Webサイトに適したプラグインを選択し、パフォーマンスを最適化してユーザーにとってより良いエクスペリエンスを実現します.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map