Shopifyの Core Web Vitals を修正する: ストア店舗オーナー向け実践ガイド

ストアの Core Web Vitals を無視し続けてきたのであれば、その猶予期間は終わりました。Core Web Vitals は現在 SEO に直接的な役割を果たし、ストアがランクするかどうかが決まります。数字は残酷です。2025 Web Almanac によると、モバイル Web サイトの 48% が Core Web Vitals 全三項目に合格しており、2024 年の 44%、2023 年の 36% から上昇しています。基準は四半期ごとに上がっています。ストアがこれをクリアしていなければ、そうしている競合他社に対して後れを取っています。

実際に測定されている内容

2026 年、Google は引き続き LCP、INP、CLS の 3 つの Core Web Vitals メトリクスを使用しています。閾値は変わりません。LCP は 2.5 秒以下、INP は 200 ミリ秒以下、CLS は 0.1 以下です。変わったのは、Google がこれらのスコアの背後にあるデータをどのように重み付けするかです。Google は lab データではなく、実ユーザーのフィールドデータ(CrUX)のウェイトを増やしました。Shopify ストアの場合、実際のモバイルユーザーエクスペリエンスが synthetic test スコアよりも重要になります。

これは重要な区別です。Shopify 管理画面の Speed Score は、単一のシミュレーションされた訪問から Lighthouse lab データに基づいています。Google Search Console の Core Web Vitals は、実 Chrome ユーザーから 28 日間のローリングウィンドウで収集されたフィールドデータを使用しています。実際のユーザーは Lighthouse シミュレーションとは異なるデバイス、ネットワーク速度、インタラクションパターンを持っているため、これらの数字は大きく異なる可能性があります。

良いニュースは、2025 年 12 月現在、LCP と INP は Chrome、Firefox、Safari、Edge のすべての主要ブラウザで「Baseline Newly Available」となっています。これは、Real User Monitoring (RUM) ツールが現在、Chrome ユーザーだけでなく、ほぼすべての訪問者から CWV データを収集できることを意味します。iOS トラフィックが多いストアにとって、これは大きな変化です。

ビジネス上のメリット(実数で説明)

修正に進む前に、なぜこれに時間を費やす価値があるのか説明します。Google のデータによると、1 秒の遅延はコンバージョンを最大 7% 削減し、モバイルの 53% の訪問者は 3 秒以上かかるページを離脱します。Shopify 自体のチームがこれを大規模で検証しました。3 つの Core Web Vitals とコンバージョンの関係を積極的に販売している Shopify ストア全体で分析し、2026 年 1 月と 2 月の変わり目の 28 日間、すべてのサイトをパフォーマンスバケットに分割し、集約されたパフォーマンスとすべてのバケットのストアの中央値コンバージョン率の関係を調べました。結果: 成長するストアはスピードとコンバージョンの強い関係を見ています。ストアがスケールするにつれて、アプリ、カスタマイズ、統合が増え、それぞれがパフォーマンスに影響を与える可能性があり、これらの追加の累積効果はデータに見られます。

Shopify ビジネスの場合、完璧な CLS スコアを追求するよりも LCP と INP の改善を優先する方が、ボトムラインに大きな影響を与える可能性があります。

Shopify の最大のスピードキラー

1. アプリの肥大化(ナンバーワンの原因)

アプリからの third-party script 肥大化は、Core Web Vitals に不合格になる最大の原因です。計算は厳しいです。新しい Shopify アプリは平均して、すべてのページロードに 50 KB から 150 KB の JavaScript を追加します。ストアが LCP 閾値のすぐそば(2.3 ~ 2.5 秒)にある場合、単一のアプリをインストールすることでそれを超える可能性があります。

修正は華やかではありませんが、効果的です。アプリを 1 つずつ無効にして INP と LCP への影響を PageSpeed Insights で測定することで、アプリを監査します。使用しなくなったアプリを削除し、以前にアンインストールされたアプリのコードが theme ファイルに残されていないか確認してください。

2. ヒーロー画像と LCP

Google の LCP の「良い」閾値は 2.5 秒以下です。Shopify ストアの場合、これは通常、ヒーロー画像または above-the-fold 商品写真です。私が見た最も一般的な間違いは、そのヒーロー画像に lazy-loading を使用することです。LCP 画像を lazy-loading してはいけません。LCP 画像に lazy-loading を使用すると、ブラウザがページがユーザーに「読み込まれた」と見なされる要素の読み込みを遅延させるため、LCP スコアに悪影響を与えます。above-fold ヒーロー画像には loading="eager" を使用するか、属性を完全に省略してください。

アップロード前に画像サイズも確認してください。画像は通常、ページの総重量の 27% を占めます。最適化されていない商品写真、バナー、ライフスタイル画像が、遅い Shopify ストアの背後にある最大の犯人です。

3. INP: ほとんどのストアが見落としているメトリクス

Google は 2024 年 3 月に First Input Delay (FID) を公式に INP に置き換えました。INP は最初のクリックだけを測定しません。INP は FID から完全に引き継ぎ、最初のクリックだけでなくセッション全体のすべてのインタラクションを測定します。

Shopify ストアの場合、最も一般的な INP の犯人は main thread で実行されるJavaScript です。Shopify theme とアプリで一般的な heavy JavaScript が、低い INP スコアの主な原因です。実用的な修正: 重要なコンテンツを最初に読み込み、次に段階的に拡張します。読み込みパフォーマンスをサポートするために最初に重要なコンテンツを読み込み、次に JavaScript で段階的に拡張します。ユーザーが必要なものだけを読み込むようにコード分割を使用し、インタラクション用に main thread を明確に保ちます。

INP はモバイルでも、残酷に露出しています。2026 年には、モバイルコマースがグローバルな ecommerce トランザクションの大多数を占めています。モバイルデバイスはデスクトップコンピュータよりもはるかに処理能力が低い傾向があり、低い INP スコアの影響を受けやすくなります。

4. CLS: レイアウトシフトの問題

Cumulative Layout Shift は視覚的な安定性を測定します。ページの読み込み中に要素が移動すると、CLS スコアが低下します。「良い」スコアは 0.1 未満です。サイズが指定されていない画像、late-loading フォント、動的バナーは一般的な Shopify の犯人です。ブラウザが画像が読み込まれる前にスペースを確保できるように、すべての画像タグに明確な width と height 属性を常に宣言してください。

知っておく価値がある platform-level の変更

最近の 2 つの Shopify アップデートは、パフォーマンス戦略に直接影響を与えます。

Per-page CSS scoping (2026 年 4 月): 2026 年 4 月、Shopify は per-page CSS scoping をロールアウトし、各ページで実際にレンダリングされるセクションに対してのみ theme がCSS を配信するようにしました。これまでは、すべてのページロードですべてのスタイルシートを提供していました。これらの小さな改善は積み重なり、目に見えて高速なページとコンバージョン率の測定可能な上昇をもたらします。

Horizon theme foundation (2025 年夏): Shopify の Horizon theme は Dawn 以来、最も重要な theme リリースです。2025 Summer Editions でローンチされたこれは、Shopify theme がどのように構築されているかの根本的なシフトを示しており、より深いブロックネスト、業界固有のプリセット、ネイティブ AI ブロック生成、および mobile-first アーキテクチャが特徴です。Horizon のパフォーマンスストーリーはアクティブに改善しています。Horizon はローンチ以来、四半期ごとに約 5 モバイル PageSpeed ポイント を獲得していますが、Dawn はフラット(成熟)です。Horizon を使用している場合は、theme を更新して、Theme Settings の built-in アニメーションを無効にし、意味のある PageSpeed ポイントを取り戻してください。アニメーションだけを無効にすると、約 10 PageSpeed ポイント が戻ります。

theme 自体を超えて、Shopify は管理画面内にさらに詳細なパフォーマンスダッシュボードを含めるようになり、LCP や INP などのメトリクスをページごとに分解します。それを使用してください。実ユーザーデータを表示し、シミュレートされたスコアではありません。

監視ワークフロー

パフォーマンスは 1 回限りのプロジェクトではありません。インストールする各アプリ、追加するマーケティングタグ、行う theme 変更はすべてパフォーマンスの決定です。スピードで勝つストアは、パフォーマンスを四半期ごとの緊急事態ではなく、継続的な規律として扱います。

ここが最小限の監視スタックとして推奨するものです。

• Shopify の Web Performance ダッシュボード(Online Store 管理):Shopify の組み込み Web Performance レポートは、すべての主要なページタイプ全体でストアのパフォーマンスの商人フレンドリーな概要を提供します。一度に 1 つのURL をテストする PageSpeed Insights とは異なり、Shopify のレポートはホームページ、商品ページ、コレクションページ全体のデータを同時に集約します。
• Google Search Console (Core Web Vitals レポート): 28 日間のウィンドウで実 Chrome ユーザーからストア全体のフィールドデータを表示します。
• Google PageSpeed Insights: 合格/不合格ステータスと推定時間短縮を含む特定の改善機会を含む、3 つの Core Web Vitals をすべてレポートします。ホームページと最も重要な商品ページの両方をテストしてください。これらは多くの場合、非常に異なるスコアを持っているためです。

アプリの各インストール、theme アップデート、大規模キャンペーン起動の後にチェックを実行してください。Shopify のパフォーマンスリグレッションはほぼ常に最近追加されたものが原因です。監視データは、Shopify CWV リグレッションの最も一般的な原因が、JavaScript をグローバルに注入する新しいアプリのインストールであることを示しています。

クイックウイン チェックリスト

今日ストアをトリアージしたい場合は、ここから始めてください。

• インストール済みアプリを監査し、使用していないものを削除し、削除されたアプリから theme コードが残されていないか確認します。
• ヒーロー/LCP 画像に loading="eager" を設定します。below-fold 画像にのみ loading="lazy" を使用してください。
• すべての <img> タグに明確な width と height 属性を追加して、レイアウトシフトを防止します。
• ホームページカルーセルと autoplay GIF を単一の静的ヒーロー画像に置き換えます。
• non-critical JavaScript をすべて defer または async で処理し、トラッキングピクセルを Google Tag Manager に統合します。
• 商品画像を圧縮してアップロード前に 200 KB 以下にします(可能な限り WebP 形式)。
• theme (Horizon または Dawn)を最新バージョンに保ち、platform-level 最適化を取得します。
• 少なくとも月 1 回は Google Search Console で CWV スコアを確認してください。

これらの中に大きな予算を必要とするものはありません。ほとんどの場合、規律が必要です。各アプリのインストールをただの機能の決定ではなく、パフォーマンスのトレードオフの決定として扱うこと。

---

この投稿の CWV データはすべて、公開されている 2025 年と 2026 年の出典を反映しています。Google PageSpeed Insights と Shopify の Web Performance ダッシュボードを主要な測定ツールとして使用してください。