ライブページで画像配信とLCPを最適化する方法

画像配信とLCPについて

ページ速度を向上させたい場合は、画像配信とLargest Contentful Paint (LCP) を理解することが不可欠です。

画像配信とは何ですか?

画像配信とは、さまざまなデバイスやネットワーク条件にわたって、画像を効率的に最適化、変換し、エンドユーザーに配信するように設計されたシステムまたはインフラストラクチャを指します。

画像配信システムは通常、次の要素を組み合わせます。

• グローバルキャッシュと高速配信を実現するコンテンツ配信ネットワーク（CDN）
• オンザフライ画像処理（サイズ変更、圧縮、フォーマット変換）
• デバイスとビューポートを考慮した最適化

画像は多くの場合 ページの総ペイロードサイズの50～70%画像が適切に最適化されていない場合、次のような主な原因の 1 つになります。

• ページの読み込み時間が遅い
• コアウェブバイタルスコアが低い
• 高い帯域幅消費
• ユーザーエンゲージメントの低下
• コンバージョン率の低下

効果的な画像配信により、ユーザーは視覚的な品質を犠牲にすることなく、デバイスとビューポートに必要な画像サイズのみをダウンロードできるようになります。

Largest Contentful Paint (LCP) とは何ですか?

Largest Contentful Paint（LCP）は、GoogleのCore Web Vitals指標の一つです。ページナビゲーションからビューポート内の最大の表示要素が完全にレンダリングされるまでの時間を測定します。

ほとんどの場合、LCP 要素は次のようになります。

• ヒーローバナー画像
• 大きな商品画像
• 注目のプロモーションブロック
• 大きなテキストブロック

LCP 要素は多くの場合画像であるため、ファイル サイズが大きい、プリロードがない、要求が遅延している、圧縮されていないなどの非効率的な画像処理により、LCP 時間が直接的に増加します。

画像配信の最適化は、次の点で重要な役割を果たします。

• 体感的な読み込み速度の向上
• より良い検索ランキングの達成
• ユーザーエンゲージメントの向上
• コンバージョン率の向上

画像配信とLCPを最適化する方法

GemPagesで画像配信を最適化し、LCPを向上させるには、主に2つの方法があります。要素レベルで画像品質を調整する方法と、ページレベルで読み込み動作を設定する方法です。以下では、それぞれの方法を段階的に説明します。

1. エディターで画像要素の設定を構成する

GemPagesは 品質設定 ライブページで画像ファイルがどのようにレンダリングされ配信されるかを制御できます。この設定は LCPを最適化する 要素設定パネル内のセクション。

それにアクセスするには：

• GemPagesエディタでページを開きます
• 画像関連の要素を選択
• 左のサイドバーへ移動
• 下にスクロールして LCPを最適化する

この構成は、ブラウザによって要求される画像バリアントのサイズに直接影響し、画像配信のパフォーマンスと LCP に影響を及ぼします。

品質設定は次の条件下でのみ機能することに注意してください。

• 画像は Shopify CDN でホストされている必要があります (つまり、Shopify 経由でアップロードされている必要があります)。
• 使用する要素は次のいずれかである必要があります。
  • 画像
  • 商品画像
  • 画像比較

品質設定の仕組み:

品質設定は、要素のビューボックスの幅 (ページ レイアウト内で画像が表示される実際の幅) に基づいて、要求される画像バリアントの幅を決定します。

利用可能なオプション：

• 最高級品: システムは、アップロードされた元の画像ファイルをサイズ変更せずに読み込みます。 
• 高： システムは、次のサイズの画像バリアントを要求します。 1.5 × ビューボックスの幅.
• 媒体： システムは、ちょうど次のサイズの画像バリアントを要求します。 1 × ビューボックスの幅.
• カスタム： システムは次の式を使用して要求された画像サイズを計算します。 ビューボックスの幅 × X% (ユーザー定義の比率。デフォルトでは 100% が推奨されます)。

例えば、画像の幅が2000ピクセル、ビューボックスの幅が400ピクセルの画像をアップロードした場合、要求される画像サイズは選択したオプションによって異なります。

• Finest => 元の画像ファイル（2000ピクセル）を読み込む
• 高さ => 幅 = の画像バリアントを読み込みます 400×1.5 = 600px
• 中: 幅 = の画像バリアントを読み込みます 400×1 = 400px
• カスタム: 200% → 幅 = の画像バリアントを読み込みます 400×2 = 800px

ケース1： エディタで要素を選択 画像左側のサイドバーで、下にスクロールして LCPを最適化し、 セッションに 品質 = 最高デスクトップモードとモバイルモードの両方:

ライブページ: 元の画像ファイルを読み込む

このページのパフォーマンスをテストした結果は次のとおりです。

画像配信 改善が必要:

ケース2： エディタで要素を選択 画像左側のサイドバーで、下にスクロールして LCPを最適化し、 セッションに 品質 = 中デスクトップモードとモバイルモードの両方:

ライブページ: 幅 = 500px * 1 = 500px の画像バリアントを読み込みます

次にこのページのパフォーマンスをテストし、結果が更新されます。 より高いパフォーマンスポイント 画像配信が改善されました:

これから何を学ぶことができますか？

元の画像ファイルを読み込むと、特に表示サイズがアップロードした画像よりはるかに小さい場合、ファイル サイズが不必要に大きくなる可能性があります。

品質を適切なカスタム比率に設定すると、画像サイズが実際のディスプレイの幅と一致するようになります。これによりファイルサイズが削減され、読み込み速度が向上し、画質に影響を与えることなくLCPを最適化できます。

設定 LCPを最適化する 同じように設定されている 商品画像 の三脚と 画像比較 要素。

2. その他の構成

調整するだけでなく、 LCPを最適化する 要素レベルで設定すると、最初のページレンダリング中に画像が読み込まれる方法を制御して、画像配信と Largest Contentful Paint (LCP) をさらに改善できます。

これらの最適化は、 を特定いたします。 の三脚と の 重要な画像がブラウザによって要求されます。

「Lazyload Image」をオフにする

遅延読み込みとは何ですか?

遅延読み込みとは、画像がユーザーのビューポート（画面の表示領域）に近づくまで読み込みを遅らせる技術です。ページのレンダリング開始時にすべての画像をすぐに読み込むのではなく、ブラウザはユーザーがスクロールしたときにのみ画像を読み込みます。

👉 Lazy Load について詳しくは、こちらの記事をご覧ください。 公開設定 – 画像の遅延読み込み

重要なイメージの遅延読み込みを無効にすると、次のことが保証されます。

• 初期ビューポート内の画像はすぐに要求されます
• ブラウザはLCPイメージの取得を優先します
• ヒーローバナーや注目の製品画像のレンダリングは遅延しません

ほとんどの電子商取引ページやランディング ページでは、LCP 要素は通常次のようになるため、これが特に重要です。

• ヒーローバナー画像
• 大きな商品画像
• 注目のプロモーションブロック

このような画像が遅延ロードされると、ブラウザはレイアウト計算が完了するまで待機してからリクエストを開始するため、LCP が直接遅延されます。

「Lazyloadセクション」をオンにする

遅延読み込みセクションとは何ですか?

遅延読み込みセクションは、初期ビューポートの外側 (折り返しの下) にあるセクション全体のレンダリングを遅延させるパフォーマンス設定です。

この設定は、画像の読み込みを個別に制御するのではなく、構造レベルで機能します。つまり、セクション全体 (画像、テキスト、スクリプト、レイアウト構造を含む) は、ユーザーがその近くまでスクロールするまで延期されます。

👉 ヘルプセンターの記事で詳細をご覧いただけます: 遅延読み込みを有効にしてセクションと画像をプリロードする

有効にすると:

• 初期ビューポートの外側のセクションは、最初の読み込み時にレンダリングまたは要求されません。
• 初期レンダリング時の DOM サイズが削減されます (ドキュメント オブジェクト モデル - ブラウザーがページを読み込むときに構築する HTML 要素の構造化ツリーを表します)。
• 帯域幅を巡るネットワーク要求の競合が減少
• メインスレッドのワークロードが減少

これにより、次の点が改善されます。

• 最初のペイントまでの時間（FCP）: 表示コンテンツが早く表示されます
• LCPの安定性重要な要素がリソースを奪い合っていない
• 全体的なページの応答性: よりスムーズな初期インタラクション

簡単な言葉で：

• 表示コンテンツはすぐに読み込まれます
• スクロールしない部分の複雑さは後回しにする

この方法により、ブラウザはユーザーが最初に見るものを優先し、すぐに必要のないコンテンツを後回しにします。

「プリロードセクション」を有効にする

プリロードセクションとは何ですか?

セクションのプリロードは、ブラウザに初期ビューポート内に表示されているセクションを優先的に読み込むよう指示するパフォーマンス設定です。詳細については、以下をご覧ください。 ページ最適化機能

プリロードセクションが有効な場合:

• ビューポート内のすべてのセクション（最初のセクションだけでなく）が優先されます
• ブラウザは重要なリソースの取得を早めに開始します
• デスクトップとモバイルのビューポートの違いが適切に処理されます

プリロードロジックがない場合、ブラウザは通常、最初のセクションのみを優先します。スクロールせずに見える他のセクションは、レイアウトとレンダリングのステップが完了した後にリクエストされる可能性があります。これにより画像の読み込みが遅れ、LCPに直接影響する可能性があります。

これは、次のようなレスポンシブ レイアウトの場合に特に重要です。

• デスクトップのビューポートには、2～3 個のセクションが含まれる場合があります。
• モバイルのビューポート構造は大きく異なる
• プリロードにより、ビューポート対応コンテンツはブレークポイント全体で高い優先度で扱われるようになります。

この組み合わせが機能する理由

すべてを一度に無効化または有効化することではありません。パフォーマンスの最適化は、読み込み動作を戦略的に調整することで最も効果的に機能します。

効果的なアプローチには以下が含まれます。

• Do 重要な画像を遅延ロードする → LCP を保護する
• 非表示セクションの遅延ロード → 初期ロードコストを削減
• すべてのビューポートセクションをプリロード → ネットワークの優先順位を視覚的な優先順位に合わせる

これにより、ユーザーが最初に見るものはすぐに読み込まれ、重要でないコンテンツは待機するようになります。

次の設定で製品ページをテストしました。

• 画像の品質は最高
• 商品リストには商品画像要素が含まれており、品質は最高です
• 画像の遅延読み込み is ON
• 遅延ロードセクション is オフ
• プリロードセクション 無効になっています

→ 結果は次のとおりです。

ご覧のとおり、画像配信 改善が必要画像のダウンロード時間が長いため:

次に、推奨された戦略を使用してページを再構成しました。

• 設定する 設定要素 エディターに画像が含まれているもの：画像、商品画像；品質設定 = 中
• 画像の遅延読み込み is オフ
• 遅延ロードセクション is ON
• プリロードセクション is 使用可能

すべての変更を適用した後、クリックしました パブリッシュ ページエディターでライブページを更新します。

その後、そのページのパフォーマンスを再テストしました. 結果は変わりました: このページのパフォーマンスは最適化されています。

画像配信は 改善されました:

最終的なポイント

パフォーマンスの最適化は、1 つの設定をオンまたはオフにすることではありません。

それは約です：

• 適切なサイズの画像を提供する
• 表示されているコンテンツをすぐに読み込む
• 重要でないコンテンツを賢く延期する
• ユーザーが実際に見ているものに基づいてリソースを優先順位付けする

これらの戦略を組み合わせることで、画像配信と LCP の両方が、特に製品ページやランディング ページなどの画像の多いページで、デバイス間で一貫して向上します。