遅延読み込みを有効にしてセクションと画像をプリロードする

GemPages の Lazyload と Preload について

遅延ロード機能

レイジーロード 訪問者がページにアクセスした際に、最初のセクションのスタイルとフォントのみを読み込むことでページを最適化します。これにより、残りのセクションの読み込みは必要になるまで遅延され、初期読み込み時間を最小限に抑えることができます。

プリロード機能

プリロード ページレンダリングプロセスの早い段階で特定の画像を優先的に読み込み、重要なビジュアル要素が瞬時に表示されるようにします。これにより、重要なコンテンツを遅延なく提供し、ユーザーエクスペリエンスを向上させます。

Lazyload と Preload が重要なのはなぜですか?

• ページの読み込み速度の向上: 遅延読み込みにより、最初に読み込まれるコンテンツのサイズが削減され、ページの読み込みが高速化されます。
• より良いユーザーエクスペリエンス: 読み込み時間が短いほど、ユーザーが Web サイトを離れるのを防ぐことができます。
• SEOの利点: 検索エンジンはより高速なウェブサイトを優先し、ランキングを向上させます。

GemPages ページで Lazyload を有効にする方法は?

レイジーロードは デフォルトで有効 すべてのページは ジェムページ v7ページを公開すると、現在の Lazyload 設定が継承されます。

この設定を確認するには:

• ノーザンダイバー社の GemPages ビルダー アプリ、に行く 環境設定 > 設定を保存する.
• 動画内で 遅延セクション読み込み 下 エディター設定.

Lazyload がステータスに基づいて実行する処理:

• 有効（デフォルト）: 最初のセクションのスタイルとフォントのみが最初に読み込まれ、後続のセクションは少し遅れて読み込まれます。これにより、パフォーマンスと PageSpeed Insights スコアが向上します。
• 身体障がい者: ページにアクセスすると、すべてのセクションのすべてのスタイルとフォントが同時に読み込まれます。これにより、ページの速度が低下し、 PageSpeed Insights スコア.

GemPages で画像要素のプリロードを有効にする方法は?

画像要素の場合、GemPagesでは、 プリロードこれにより、訪問者がページにアクセスしたときに重要なビジュアルが優先され、すぐに読み込まれるようになります。 

有効にする方法は次のとおりです。

ステップ1： GemPagesエディタで画像要素をクリックして開きます。 設定 パネル。

ステップ2： 左側のサイドバーで、 LCPを最適化する セクションを設定し、 プリロード = あり 選択した画像のプリロード機能を有効にします。

注意：

• Lazyload は GemPages 内のすべての画像に対して自動的に有効になるため、手動で設定する必要はありません。
• サーバーへの不要な負荷を避けるため、プリロードは控えめに、必要不可欠な画像にのみ使用してください。Core Web Vitalsを向上させるには、LCP画像（通常はメインのヒーロー画像/バナー画像）のプリロードを有効にする必要があります。
• GemPagesは、重要でないスクリプトを最初のページ読み込みまで延期することで、スクリプトを自動的に最適化します。この機能はシステムに組み込まれているため、手動で設定する必要はありません。