Shopify

ShopifyサイトのPageSpeed最適化完全ガイド｜表示速度改善でコンバージョン率を上げる実践手法

更新日: 2026-06-19

はじめに
Core Web Vitalsとは？Shopify運営者が押さえるべき指標
1. PageSpeed InsightsでShopifyストアを計測する
Shopify特有の速度低下の主な原因
画像最適化：非常に費用対効果が高い施策
テーマコードの最適化
アプリ管理：入れすぎと放置がボトルネックになる
1. Shopify管理画面でアプリの速度影響を確認する
2. アプリ整理のチェックリスト
速度改善の効果測定と継続的なモニタリング
1. PDCAサイクルで継続改善する
2. Google Search Consoleを補完ツールとして使う
まとめ

Shopifyサイトの表示速度がECのコンバージョン率に与える影響と、画像最適化・テーマ軽量化・不要アプリ整理など実践的な改善手法をCore Web Vitalsの基準とともに体系的に解説します。

はじめに

ECサイトにとって「表示速度」は売上に直結する重要な要素です。ページの読み込みが1秒から3秒に増加するだけで直帰率が約32%増加し、5秒に達すると直帰率が90%まで跳ね上がるとされています。

Shopifyは世界175カ国以上で利用されている世界最大級のECプラットフォームですが、アプリの追加やテーマカスタマイズを重ねるうちにサイトが重くなるケースは少なくありません。本記事では、Shopify特有のパフォーマンス課題とその具体的な改善手法を体系的に解説します。

出典: Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed

Core Web Vitalsとは？Shopify運営者が押さえるべき指標

Core Web VitalsはGoogleが定めるWebパフォーマンスの評価指標で、検索順位（SEO）にも影響します。2024年3月にFIDからINPへの移行が完了し、現在は以下の3指標が評価対象です。

指標	内容	良好（Good）	改善が必要	低速（Poor）
LCP（Largest Contentful Paint）	最大要素の描画時間	2.5秒以内	2.5〜4秒	4秒超
INP（Interaction to Next Paint）	インタラクション応答時間	200ms以内	200〜500ms	500ms超
CLS（Cumulative Layout Shift）	視覚的安定性（レイアウトずれ）	0.1以下	0.1〜0.25	0.25超

出典: Google for Developers | Understanding Core Web Vitals and Google search results

Googleはページ全体のビューのうち75パーセンタイルの値で評価するため、一部のページが遅いだけでも全体評価に影響します。

PageSpeed InsightsでShopifyストアを計測する

PageSpeed Insights にアクセスし、ShopifyサイトのURLを入力
モバイル・デスクトップそれぞれのスコアを確認
「診断」セクションで改善が必要な項目を特定する

目安となるスコア: モバイルで60以上、デスクトップで85以上が実用的な目標です。Shopifyの公式ヘルプセンターでは、管理画面内の「オンラインストアの速度レポート」からも実ユーザーデータに基づくパフォーマンス確認が可能です。

出典: Shopifyヘルプセンター | オンラインストアの速度レポート

Shopify特有の速度低下の主な原因

Shopifyサイトのパフォーマンス低下には、プラットフォーム固有の構造が関係しています。原因を正しく理解することが改善の第一歩です。

1. アプリの過剰導入による追加スクリプト

Shopifyアプリは追加のJavaScriptやCSSをページに読み込みます。インストール数が増えるほど読み込みリソースが増加し、速度が低下します。さらに、アンインストール後もテーマにコードが残留する「ゾンビコード」問題が起きやすいのもShopify特有の課題です。

2. 最適化されていない商品画像

高解像度の商品画像をそのままアップロードすると、ページ全体の重量が増加します。Shopifyは自動的にWebP形式への変換とCDN配信を行いますが、元画像のサイズが過大な場合は転送量が増えてしまいます。

3. テーマコードの肥大化

カスタムコードの追加や、削除し忘れたアプリのコード残留によってLiquidテンプレートが肥大化します。特に古い形式のテーマ（Sectionsに対応していないもの）は、コード構造が非効率な場合があります。

4. 外部リソースの読み込み

Google Fonts、チャットツール（Zendesk、Intercomなど）、アクセス解析（Google Analytics、Meta Pixelなど）の各スクリプトが積み重なると、外部サーバーへのリクエスト数が増加し、表示が遅くなります。

画像最適化：非常に費用対効果が高い施策

ECサイトのページ重量の多くは画像が占めます。まず着手すべき施策が画像の最適化です。

Shopifyで推奨される画像仕様

用途	推奨サイズ	推奨フォーマット
商品メイン画像	2048×2048px以下	WebP / JPEG
バナー・ヒーロー画像	横幅2400px以下	WebP / JPEG
コレクション画像	横幅1200px以下	WebP / JPEG
ロゴ	横幅500px以下	SVG / PNG

実践的な画像最適化の手順

アップロード前に圧縮する: TinyPNG・Squoosh・Imagifyなどで事前圧縮
表示サイズに合わせてリサイズ: Retina対応を想定し表示サイズの2倍を目安に
Liquidの image_url フィルターを活用: テーマコードで適切なサイズを指定して出力

{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}

lazyloadを活用する: Shopify 2.0対応テーマでは標準でlazyloadが実装済み
alt属性を設定する: SEOとアクセシビリティの両方に効果あり

ShopifyのCDNを最大限に活用する

Shopifyにアップロードしたすべての画像・動画・ファイルは、Shopify標準の世界規模CDN（HTTP/2対応）から配信されます。追加コストなしで高速な画像配信が実現するため、画像はできるだけShopifyの管理画面からアップロードし、外部ホスティングは最小限に留めることを推奨します。

テーマコードの最適化

アプリのコード残留（ゾンビコード）を削除する

アンインストールしたアプリのコードがテーマに残ると、不要なスクリプトが毎回読み込まれます。以下の手順で確認・整理します。

Shopify管理画面 → 「オンラインストア」→「テーマ」→「コードを編集」
theme.liquid のhead・bodyタグ付近を確認
アンインストール済みアプリのコードブロックや <script> タグを特定・削除
assets/ フォルダ内に残留しているアプリ関連のファイルを削除

注意: コード変更前は必ずテーマを複製してバックアップを取ること。

サードパーティスクリプトの読み込み順を最適化する

チャットウィジェットなど優先度の低いスクリプトには defer または async 属性を付与
Google Tag Manager（GTM）を導入してタグを一元管理し、スクリプトの乱立を防ぐ
利用頻度の低いページ（プライバシーポリシーなど）への重いスクリプト読み込みを制限する

Shopify Online Store 2.0テーマへの移行を検討する

旧形式のテーマを使っている場合、Shopify 2.0対応テーマへの移行でパフォーマンスが改善するケースがあります。Shopify公式の無料テーマ「Dawn」はページ速度を重視した設計になっており、PageSpeed InsightsのモバイルスコアはShopifyが公開しているデータでも高い数値が出ています。

出典: Shopify | サイト高速化のテクニック

アプリ管理：入れすぎと放置がボトルネックになる

Shopify管理画面でアプリの速度影響を確認する

Shopifyの管理画面「テーマ」ページでは、インストール済みアプリがストアのパフォーマンスに与える影響を確認できます（一部条件あり）。各アプリのスコアへの影響を定期的に確認し、効果の薄いアプリは整理しましょう。

アプリ整理のチェックリスト

過去3ヶ月以上使っていないアプリをリストアップする
機能が重複するアプリを統合する（例: 複数のレビューアプリ）
Shopify標準機能（Flow、Segments、Checkoutカスタマイズなど）で代替できないか確認する（ただし、FlowやSegments、チェックアウトの高度なカスタマイズなど一部機能はShopify Plusなどの上位プラン限定です）
アンインストール後にテーマコードの残留を必ず確認・削除する

目安として、アクティブなアプリは20本以内に収めると管理しやすくなります。