遅延読み込みを使用して画像をWordPressに読み込む方法を学びたいですか?

遅延読み込みは、ユーザーが特定の画像にスクロールダウンしたときにウェブサイトが画像のみを読み込むことができるようにする手法です。これにより、ウェブサイトの読み込み時間が短縮され、ウェブサイトのパフォーマンスが向上します。

画像が多い最も人気のあるウェブサイトは、遅延読み込みを使用して ウェブサイトの速度とパフォーマンスを向上させます。

この記事では、遅延読み込みを使用して画像をWordPressに読み込む方法を紹介します。

WordPressで画像を遅延ロードする理由

WordPressに画像を遅延読み込みすると、ウェブサイトが高速化され、 最高のユーザー体験.

遅いウェブサイトが好きな人はいません。 実際、パフォーマンス調査では、ページの読み込み時間が7秒遅れると、コンバージョンが11%少なくなり、ページビューが16%少なくなり、顧客満足度がXNUMX%低くなることがわかりました。

遅延読み込みを使用して画像を読み込む

グーグルのような検索エンジンも、ウェブサイトの読み込みが遅いのは好きではありません。 そのため、高速なWebサイトは検索結果で上位にランク付けされます。

画像は、他のWeb要素と比較して、Webサイトへの読み込みに最も時間がかかります。 投稿に多くの画像を追加すると、画像ごとにページの読み込み時間が長くなります。

この状況を処理するXNUMXつの方法は、 CDNサービス. CDNを使用すると、ユーザーは最も近いWebサーバーから画像をダウンロードして、Webサイトの読み込み速度を下げることができます。

ただし、画像は引き続き読み込まれ、ページ全体の読み込み時間に影響します。 この問題を解決するには、Webサイトに遅延読み込みまたは遅延読み込みを実装して画像の読み込みを遅らせることができます。

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

すべての画像を一度に読み込むのではなく、遅延読み込みではユーザーの画面に表示されている画像のみをダウンロードします。 他のすべての画像をプレースホルダー画像または空のスペースに置き換えます。

ユーザーが下にスクロールすると、Webサイトはブラウザの表示領域に表示される画像をロードします。

遅延読み込みは、WordPressブログにとって非常に有益です。

  • Webページの初期読み込み時間が短縮されるため、ユーザーはWebサイトをより早く見ることができます。
  • 表示時に画像のみを提供することで帯域幅を節約し、ホスティングコストを節約できます

WordPress 5.5のリリースでは、デフォルト機能として遅延読み込みが追加されました。

ただし、画像の遅延読み込みと背景画像の遅延読み込みをカスタマイズする場合は、 WordPressのプラグイン.

注意: 遅延読み込みまたは遅延読み込みはウェブサイトの読み込み速度を向上させるのに役立ちますが、最大のパフォーマンスを得るには、画像をWordPressにアップロードする前に、常にウェブ用に画像を最適化する必要があります。

XNUMX人でシェアします WordPressのプラグイン WordPress画像の遅延読み込みを簡単に設定するのに役立つさまざまなもの。

方法1.WPRocketを使用したWordPressでの画像の遅延読み込み

プラグインを使用することをお勧めします WP Rocket 怠惰に画像をWordPressにロードします。 これは市場で最高のWordPressキャッシュプラグインであり、画像の遅延読み込みを簡単に有効にすることができます。

それ以外は、複雑な技術用語を知らなくてもWebサイトの速度を最適化するのに役立つ非常に強力なプラグインです。

インストールとアクティベーション時に、デフォルトの推奨キャッシュ設定はすべて、WordPressWebサイトを劇的に高速化します。

画像の遅延読み込みを有効にするには、いくつかのチェックボックスをオンにするだけです。 動画の遅延読み込みを有効にすることもできます。これにより、ウェブサイトの速度がさらに向上します。

遅延読み込みを使用して画像を読み込む

方法2.Optimoleを使用したWordPressでの遅延読み込み画像

この方法は無料のプラグインを使用します オプチモール. これは最高のWordPress画像圧縮プラグインのXNUMXつであり、画像の遅延読み込みを簡単に有効にすることができます。

5か月に000人を超える訪問者がいる場合は、 プレミアムバージョン.

アクティベートするときは、 メディア»Optimole、 次に、APIキーにサインアップします。

ボタンをクリックするだけです APIキーの登録とメール送信そして、それはあなたに電子メールで送られます。

次に、APIキーを入力し、[ OptiMoleサービスに接続する '。

その後、タブをクリックします " 設定 "。

ここでは、「 画像の拡大縮小と遅延読み込み"がアクティブになります。 これにより、訪問者の画面サイズに基づいて画像が生成され、読み込み速度が向上します。

次に、メニューオプション「 上級 »そして«Lazyload»を選択します。

この画面には、画像の遅延読み込み方法をカスタマイズできるさまざまな設定があります。

まず、「 最初に除外するlazyloadからの画像の "。 これはあなたの最初の画像を防ぎます 記事やページ 遅延ロードを使用します。

各画像を遅延ロードする場合は、このオプションを0に設定できます。

次に、オプション「 画像を拡大縮小する '。

これにより、画像が訪問者の画面のサイズに適合し、ページの読み込みが速くなります。

その後、設定をアクティブにすることができます " 背景画像のLazyloadを有効にする '。

これにより、背景画像が遅延ロードされます。これは、Webサイト上の大きな画像の一部である可能性があります。

有効にできるもうXNUMXつの設定は、埋め込みビデオとiframeの遅延読み込みです。 埋め込まれたビデオコンテンツがたくさんある場合は、この設定を有効にする必要があります。

これにより、ビデオの代わりにプレースホルダー画像が読み込まれます。 それをクリックすると、完全なビデオがロードされます。

これらの設定を引き続きカスタマイズして、Webサイトと画像に最適なものを確認できます。

プラグイン設定を終了する前に、必ず「 変更を保存 '。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 ARMember

ARメンバーは WordPressのプラグイン コンテンツ保護。 これは、任意のWebサイトでサブスクリプションを販売できる独自のソリューションです。 コンテンツを完全または部分的に保護できるツールがすべて揃っています。

ARMember WordPressメンバーシッププラグイン

もう XNUMX つの特徴は、機能が少し制限されている無料オプションを提供しているという事実です。 特徴と言えば、これは強力です WordPressのプラグイン とりわけ、次のような特典を提供します。

コンテンツをスケジュールする機能、複数のサブスクリプションプランのサポート、簡単なセットアップ、サブスクリプションプラン間の移行、 WooCommerceのサポート、いくつかのフォームテンプレートなど。

また、このニッチの参照です。

ダウンロード | デモ | ウェブホスティング 

2。 WooCommerceのための国別税表示

WooCommerceの国別税表示は、訪問者の国に応じて、税の有無にかかわらず製品の価格を表示できるプラグインです。 また、訪問者の請求国を事前に選択することもできます。 WooCommerceのための国による税表示

通貨が異なるために顧客が混乱することがあり、税金が含まれている場合はさらに複雑になることを忘れないでください。 したがって、国別の税表示により、これらの障害を取り除き、購入プロセスを簡素化できます。

ダウンロード | デモウェブホスティング

3。 スリックポップアッププロ

Slick Popup Pro は、 WordPress プラグイン プラグインによって作成されたフォームを変換する非常にシンプルで軽量 お問い合わせフォーム7 ポップアップで。 彼女はフォームを使用し、それを美しくて完全に反応するポップアップに変換します。WordPressポップアッププラグインSlick Popup Pro

ポップアップフォームには、次のようないくつかの用途があります。情報収集フォーム、 お問い合わせフォーム、登録フォーム、見積もりフォーム、提案/苦情フォームなど。

ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

まとめ

出来上がり! このチュートリアルは以上です。 この記事が、WordPressで画像を遅延ロードする方法を学ぶのに役立つことを願っています。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

しかし、それまでの間、あなたについて教えてください commentaires 専用セクションの提案。

...