表示速度がECの売上に直結する理由

Google/SOASTA（2017年）の調査によると、モバイルページの読み込みが 1秒から3秒に遅延すると直帰率は32%増加 し、5秒になると90%増加 します。Shopifyストアは高速な表示パフォーマンスを標準で提供しています。表示速度の改善はコンバージョン率に直結します。

表示速度は「技術的な課題」ではなく 売上に直結するビジネス課題 です。また、表示速度はSEO評価にも大きく影響するため、ShopifyのSEO対策と合わせて取り組むことが重要です。以下に、実際のShopifyストアで効果が実証された15の施策を、優先度順に解説します。

画像最適化（優先度：最高）

施策1：次世代フォーマットへの変換

ShopifyのCDNは自動的にWebP変換を行いますが、アップロード時の元画像サイズ が大きすぎると変換後も重くなります。

商品画像：長辺 2048px以下、ファイルサイズ 500KB以下 を基準にする
バナー・Hero画像：長辺 1920px以下、ファイルサイズ 300KB以下 が目標
アップロード前にTinyPNGやSquooshで 事前圧縮 を行う

これだけで、画像総容量を大幅に削減できるケースが多いです。

施策2：適切なサイズの画像配信

Liquidテンプレートで image_url フィルタにサイズパラメータを指定し、表示領域に合った画像サイズを配信します。PCで1200px幅の画像をスマートフォンの375px幅に配信していないか確認してください。

施策3：遅延読み込み（Lazy Loading）の徹底

ファーストビュー外の画像には loading="lazy" を設定します。ただし Hero画像やLCP（Largest Contentful Paint）要素にはLazy Loadingを設定しない こと。LCP要素の遅延読み込みはCore Web Vitalsのスコアを悪化させます。

アプリの監査と整理（優先度：最高）

施策4：不要アプリの削除

Shopifyストアのパフォーマンス低下の 最大の原因はアプリ です。多くのShopifyストアは複数のアプリをインストールしていますが、実際に活用しているのはその半分程度というケースが珍しくありません。

アプリを アンインストールしてもテーマにコードが残る ことがあります。アプリ削除後は、テーマエディタの「コードを編集」からアプリが挿入したスニペットやLiquidタグが残存していないかを必ず確認してください。

施策5：アプリの読み込み影響度を計測

Chrome DevToolsの「ネットワーク」タブで、各アプリが読み込むJavaScript・CSSのサイズと読み込み時間を確認します。特に注意すべきは以下のパターンです。

レビューアプリ が全ページで重いJSを読み込んでいる（商品ページのみで十分）
ポップアップアプリ が複数のフォントを追加読み込みしている
アナリティクス系アプリ が同期的にスクリプトを実行している

フォントの最適化（優先度：高）

施策6：フォントファイルの軽量化

日本語Webフォントは英語フォントと比較して大幅に大きいファイルサイズになります。Noto Sans JPの全ウェイトを読み込むと、それだけで1ウェイトだけでも数MBに達します。

使用するウェイトを 2〜3種類 に限定する（Regular / Medium / Bold）
font-display: swap を指定し、フォント読み込み中もテキストを表示する
可能であれば システムフォント を優先する（特にモバイル）

施策7：フォントのプリロード

ファーストビューで確実に使用するフォントは <link rel="preload"> で先行読み込みします。ただし、プリロードするフォントは 1〜2ファイルに限定 すること。過剰なプリロードは逆効果です。

サードパーティスクリプトの管理（優先度：高）

施策8：タグマネージャー経由の一元管理

Google Analytics、Facebook Pixel、LINE Tag、各種広告タグを個別にテーマに埋め込むと、それぞれが独立してDOMを操作 し、パフォーマンスを大きく低下させます。Google Tag Managerで一元管理し、不要なタグの発火を防ぎます。

施策9：スクリプトの非同期・遅延読み込み

コンバージョン計測やチャットウィジェットなど、初回表示に不要なスクリプトは defer または async 属性を付与します。

特にチャットウィジェットは、ユーザーのスクロールやクリックなどの インタラクション発生後に初めて読み込む 設計が理想的です。これにより初回表示のJavaScript実行量を大幅に削減できます。

テーマコードの最適化（優先度：中〜高）

施策10：不要なCSSの削除

多くのShopifyテーマは、使用しない機能のCSSも含めてすべてを1つのファイルに結合しています。テーマ選びの段階でコード品質の高いテーマを選定しておくと、この問題を軽減できます。Chrome DevToolsの「カバレッジ」機能で 実際に使用されているCSSの割合 を確認し、使用率が低いCSSを分離・遅延読み込みします。

施策11：JavaScriptの実行量削減

Shopifyテーマの theme.js は肥大化しやすいファイルです。特にスライダー・アコーディオン・タブなどのインタラクティブ要素に使用されるライブラリが、全ページで一括読み込み されていないか確認します。

該当ページでのみ読み込む コードスプリッティング を行うか、軽量な代替ライブラリへの置き換えを検討してください。

施策12：Liquid処理の効率化

Liquidテンプレート内の forループのネスト や 大量のif分岐 は、サーバーサイドのレンダリング時間を増加させます。コレクション表示では paginate を使用して1ページあたりの商品数を 24〜36件 に制限することが推奨されます。

Core Web Vitalsの個別対策（優先度：中）

施策13：LCP（Largest Contentful Paint）の改善

LCPの目標値は 2.5秒以下 です。Shopifyストアで最も多いLCP要素はHero画像です。

Hero画像に fetchpriority="high" を設定する
Hero画像をLazy Loadingの対象から除外する
Hero画像の形式をWebPに最適化し、100KB以下 を目標にする

施策14：CLS（Cumulative Layout Shift）の改善

CLSの目標値は 0.1以下 です。Shopifyストアで頻発するCLSの原因は以下の通りです。

画像に width / height 属性が未設定 → ブラウザがアスペクト比を計算できず、画像読み込み後にレイアウトがずれる
Webフォント読み込み時のテキストリフロー → font-display: swap と size-adjust で対処
動的に挿入されるバナーやポップアップ → 表示領域を事前に確保する

施策15：INP（Interaction to Next Paint）の改善

INPの目標値は 200ms以下 です。ユーザーのクリックやタップに対する応答速度を測定する指標で、2024年3月からCore Web Vitalsの正式指標になりました。

メインスレッドをブロックする 長時間タスク（Long Tasks） を分割する
イベントハンドラ内の処理を requestAnimationFrame や requestIdleCallback で非同期化する
重い計算処理は Web Worker に移譲する

改善の進め方 ── 計測→施策→検証のサイクル

表示速度の改善は、感覚ではなく数値 で管理します。

計測ツール

Shopify速度スコア ── ダッシュボードで確認できる簡易指標（目安として活用）
Google PageSpeed Insights ── Core Web Vitalsの詳細レポート
Chrome DevTools（Lighthouseタブ） ── 開発環境での詳細分析
Google Search Console ── 実ユーザーのCore Web Vitalsデータ（フィールドデータ）

改善の優先順位

画像最適化 と 不要アプリの削除 ── 最小工数で最大効果
フォント最適化 と サードパーティスクリプト管理 ── 中程度の工数で確実な効果
テーマコード最適化 と Core Web Vitals個別対策 ── 技術的難度は高いが根本的な改善

まとめ ── 速度改善は一度きりではない

Shopifyストアの表示速度は、アプリの追加・テーマの更新・コンテンツの増加により 常に劣化する 傾向があります。月次でPageSpeed Insightsのスコアをチェックし、劣化が見られた時点で原因を特定・対処する 継続的な運用 が不可欠です。

15の施策すべてを一度に実行する必要はありません。まずは画像最適化とアプリ整理から始めれば、多くのストアで速度スコアの大幅な改善が期待できます。そこから段階的に取り組むことで、ストア全体のパフォーマンスを底上げしていきましょう。

Shopifyストアの表示速度を劇的に改善する15の施策