画像や動画を遅延読み込みする方法

公開日: 2024年11月22日更新日: 2026年10月20日

遅延読み込みは、ページ上の画像やビデオを効率的に読み込み、全体的なユーザーエクスペリエンスとページのパフォーマンスを向上させるための手法です。この記事では、遅延読み込みが重要な理由と、ClickFunnels ページの画像要素とビデオ要素に対して遅延読み込みを有効にする方法について説明します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ
メディアタイプの要素(ビデオ、画像、レッスンビデオ、付与されたアセット画像など)

遅延読み込みとは

遅延読み込みは、画像やビデオなどのメディアコンテンツのダウンロードを必要になるまで遅らせることで、ページの読み込みを高速化する機能です。遅延読み込みをオンにすると、画面(「ビューポート」の外側)にすぐに表示されないメディアはすぐにはダウンロードされません。代わりに、これらの要素は、ユーザーがページを下にスクロールして表示すると読み込まれます。

これは、訪問者にとってページの読み込みが速くなり、訪問者のエクスペリエンスが向上し、コンテンツ全体のパフォーマンスが向上することを意味します。

遅延読み込みが重要な理由

遅延読み込みでは、ユーザーのビューポートに表示されるまで画像やビデオの読み込みが延期されます。このアプローチには、いくつかの利点があります。

ページの読み込み速度を向上させます。 遅延読み込みは、最初は表示されている要素のみをロードすることで、ページの初期読み込み時間を短縮し、ユーザーがページをより速く操作できるようにします。
帯域幅の使用量を削減します。 ユーザーは閲覧したメディアのみをダウンロードするため、モバイルユーザーやデータプランが限られているユーザーにとっては特に役立ちます。
SEOの強化: 検索エンジンは読み込み時間が速いページを優先し、ページのランキングを向上させる可能性があります。
より良いユーザーエクスペリエンス: ページの読み込みが速いと、フラストレーションが軽減され、ユーザーがコンテンツにとどまり、エンゲージする可能性が高まります。

画像の遅延読み込みを有効にする方法

ClickFunnels の画像要素の遅延読み込みは、画像設定を使用して簡単に設定できます。次の手順を実行します:

ワークスペース内のページのページエディターへのアクセス。
画像メディアタイプ要素(画像、付与されたアセット画像など)をページエディターにドラッグ&ドロップします。
画像または歯車⚙️アイコンをクリックして、設定パネルを開きます。
[ 画像設定 ]セクションまでスクロールします。
[画像設定] セクションで、[レイジーローディング？] というラベルの付いたオプションを探します。
レイジーローディング？ をオンに設定します。
画像に遅延読み込みを適用するには、必ず変更を保存してください。

動画の遅延読み込みを有効にする方法

ページエディターでビデオの遅延読み込みを有効にするには、次の手順に従ってください。

ワークスペース内のページのエディターを開きます。
ページに動画メディアタイプ要素を追加します。
動画要素をクリックし、有効な動画 URL (YouTube、Vimeo、Wistia など) を入力します。ビデオソースが追加されるまで他の設定が表示されないため、この手順は不可欠です。

遅延読み込みは、YouTube、Vimeo、Wistia の動画と動画ファイルで使用できます。埋め込みコードで追加した動画にはこの設定がありません。また、Voomly の動画は常に遅延読み込みされます。
ビデオソースを入力したら、ビデオ設定パネルで レイジーローディング？ 設定を見つけます。
遅延読み込みオプションを「はい」に切り替えます。
ビデオに遅延読み込みを適用するには、必ず変更を保存してください。

その他のヒント

遅延読み込みと最適化を組み合わせる: 圧縮または最適化された画像ファイルとビデオファイルを使用して、パフォーマンスをさらに向上させます。
テストページのパフォーマンス: 遅延読み込みを有効にした後、Google PageSpeed Insights などのツールを使用してページ速度をテストし、期待どおりに動作していることを確認します。
ユーザーエクスペリエンスを監視する: さまざまなデバイスとインターネット速度でページをテストして、遅延読み込みが意図したとおりに機能し、最適なブラウジングエクスペリエンスを提供することを確認します。