公開日: 2026 年 6 月 24 日
Nuvemshop（スペイン語圏のラテンアメリカでは Tiendanube として知られる）は、この地域を代表する e コマース プラットフォームであり、18 万を超えるオンライン ショップを支えています。販売者は、複数のテーマや動的コンテンツの配置によってストアフロントをカスタマイズしているため、この多様性全体でページの読み込みを高速化するには、独自の技術的な課題が生じます。
- Largest Contentful Paint（LCP）の健全性が 68% 向上。1 年間で 57% から 96% に向上し、ストアが実際のユーザー向けにビューポートの上部にコンテンツをレンダリングする方法が大きく変化したことを反映しています。
- Core Web Vitals の合格率は 48% から 72% に急増しました。これは、4 店舗中 3 店舗が Google のベースライン パフォーマンスしきい値を満たしていることを意味します。
- ショッピング エンゲージメントが大幅に向上: 2025 年 1 月と 2026 年 1 月に営業していたブラジルの店舗の同じコホートを分析したところ、Google のオーガニック検索からモバイルでアクセスしたユーザーは、次のような傾向を示しました。
- コンバージョン率（セッションから有料注文へのコンバージョン）が 8.9% 増加
- カート エンゲージメント率（セッションからカートへの移行）が 8.4% 増加
- モバイルが最大の伸びを記録。これは、LCP の改善が最も顕著であった場所と一致しています。
これらの結果は、Google が委託した Deloitte の調査（37 ブランド、3,000 万セッション以上）と一致しています。この調査では、読み込み速度が 0.1 秒改善すると、小売コンバージョン率が 8.4% 向上することが判明しており、Google の投資の方向性が正しいことが裏付けられています。
課題: 動的な e コマース レイアウトでの LCP 検出
2025 年の初めには、Core Web Vitals のしきい値をクリアしたストアは 48% のみで、LCP スコアが良好だったストアは 57% でした。当初の仮説は、画像の重さまたはサーバーのレイテンシでした。この予想は外れました。
数千の店舗を対象に PageSpeed Insights で分析したところ、当社のプラットフォームでは、販売者がホームページのセクションを動的に配置できることがわかりました。カルーセル、バナー、商品グリッド、カスタム モジュールを任意の順序で表示できます。
この柔軟性により、予期しない問題が発生しました。適切な要素が LCP として識別されないことがありました。カルーセルを使用している店舗（店舗全体の 85%）では、さまざまな画面やデバイスでページがどのようにレンダリングされるかによって、最初のカルーセル画像ではなく、ビューポートの下部にあるバナーが LCP としてマークされることがありました。つまり、最適化の取り組みが意図した効果を発揮していませんでした。実際には LCP 要素ではない要素を最適化していたのです。
一般的な SaaS プラットフォームとは異なり、ホームページを修正するだけでは不十分でした。既存のストアを壊したり、クリエイティブな自由を制限したりすることなく、あらゆるテーマ構成、セクション配置、販売者のカスタマイズに対応できるソリューションが必要でした。
動的レイアウトが LCP 要素の選択に与える影響
PageSpeed Insights の分析と実際のユーザーのモニタリングにより、ブラウザの LCP 検出アルゴリズムで要素が可視化されたときに、カルーセルとバナーの CSS 遷移が遅延することがわかりました。ユーザーはカルーセルが最初に読み込まれたと認識していましたが、ブラウザは 2 番目のセクションのバナーを LCP 要素としてマークすることがありました。これは、その要素の可視性が遷移効果によって遅延しなかったためです。
根本原因は 3 つありました。
- 要素が表示されていると見なされたときに CSS 遷移が遅延し、LCP 検出が誤ったフレームにプッシュされていました。
- 遅延読み込みが、すぐに読み込む必要のあるビューポート上部の画像に適用されました。
- 優先度シグナルがないため、最も重要な画像が最初に読み込まれていませんでした。
また、LCP 測定の大部分は、ホームページだけでなく、カテゴリページと商品ページからも行われていることがわかりました。つまり、トラフィックの多いすべてのページタイプに一貫して修正を適用する必要がありました。
実装: 3 つの根本原因を大規模に修正
原因が特定されたことで、修正は簡単でした。これらの原則は、すべてのコアテーマとページタイプに一貫して適用されましたが、新たな問題が発生しないように、それぞれ慎重にスコープを設定する必要がありました。
- 最初の位置のセクションの CSS 遷移を削除しました。ページに最初に表示されるセクションがすぐにレンダリングされるようになり、ブラウザが人工的な遅延なしに LCP 候補として検出できるようになりました。
ビューポートの上部にある画像から遅延読み込みを削除しました。最初のセクションの画像については、リソースの読み込み遅延をなくすために、条件付きで
loading="lazy"を削除します。この最適化は、最初のセクションの最初の画像のみを対象とするように慎重にスコープを設定しました。<!-- Before --> <img src="slide-1.webp" loading="lazy" al>t<="Featu>r<ed product" !-- After -- img src="s>lide-1.webp" alt="Featured product"明示的な優先度シグナルを追加しました。
fetchpriority="high"を追加することで、LCP 画像が最優先のリソースであることをブラウザのプリロード スキャナに伝え、レイアウトとレンダリングが完了する前に、より早く検出してダウンロードできるようにします。優先度シグナルが、要素が実際に LCP 候補となる位置にある場合にのみ適用されるように、検証ロジックを追加しました。fetchpriority="high"を追加する画像が多すぎると、すべてが優先度が高くなり、何も優先されなくなるため、逆効果になります。<!-- Before --> <img src="slide-1.webp" alt="Fe>a<tured produc>t<" !-- After -- img src="slide-1.webp" fetchpriority>="high" alt="Featured product"エッジ キャッシングによるレイテンシの短縮。キャッシュは読み込み時間を短縮するのに効果的ですが、e コマースでは、古い価格や在庫データを提供すると、顧客の信頼と収益に直接影響するというリスクがあります。この問題には慎重に取り組み、パフォーマンス データとともにビジネス指標をモニタリングし、キャッシュ ヒット率を最大化しながら、販売者や購入者のエクスペリエンスを損なう可能性のあるコンテンツをキャッシュしないようにしました。
影響と結果: LCP が 57% から 96% 改善
| 指標（2025 年 1 月～ 2026 年 1 月） | 相対的な改善 |
|---|---|
| LCP（良好） | +68%（57% ～ 96%） |
| Core Web Vitals（合格率） | +50%（48% ～ 72%） |
| コンバージョン率（セッションから決済）- モバイル Google オーガニック | +8.9% |
| カートのエンゲージメント（セッションからカート）- モバイル Google オーガニック | +8.4% |
これらの改善により、Nuvemshop と Tiendanube は、ブラジル、アルゼンチン、メキシコでパフォーマンス ランキング第 1 位の e コマース プラットフォームとなりました。
主なポイントと事後分析
Nuvemshop のアーキテクチャは高度にカスタマイズ可能であるため、標準の最適化ハンドブックに頼ることはできませんでした。本当の問題は、画像の重さやサーバーのレイテンシではなく、CSS の遷移、優先度シグナルの欠落、ビューポートの上部にある画像に適用された遅延読み込みにより、ブラウザが予期しない要素を LCP として選択していたことでした。
根本原因がわかれば、修正は簡単でした。最初の位置のセクションから遷移を削除し、ビューポートの上部にある画像から遅延読み込みを削除し、明示的な優先度シグナルを追加しました。この変更は、すべてのコアテーマ、ページタイプ、プラットフォーム上の 18 万を超えるストアに一貫して適用されました。
その結果、LCP の合格率は 57% から 96% に、Core Web Vitals の全体的な合格率は 48% から 72% に急増しました。また、コンバージョン率が 8.9% 増加し、モバイルでのカート エンゲージメントが 8.4% 増加するなど、販売者にとって目に見える成果が得られました。高速なストアフロントは、技術的な成果だけでなく、販売者の成功に直接つながります。