Shopifyの表示速度改善：テーマ・アプリ・画像

Shopifyストアはどれも同じサーバーとCDNで動いているので、遅いストアが遅いのは、読み込んでいるもの（テーマ、アプリのスクリプト、画像、動画）のせいです。Shopifyでの表示速度の最適化とは、ホスティングを変えることではなく、それらを削り、軽くすることです。ほとんどのストアで最も効果が大きいのは、使っていないアプリのコードの削除、ヒーロー画像の圧縮、ウィジェットの遅延読み込みです。

このガイドでは、速度を正しく測る方法を示し、効果が出やすい順に対策を説明します。ShopifyのSEOガイドの一部です。

正しいページを測る

トップページだけでなく、商品ページとコレクションページをテストしましょう。上位表示され、購入者が最初に訪れるのはそれらのページです。

Google PageSpeed Insights は1回の読み込みのラボスコアを示し、ストアの訪問者が十分にいれば、直近28日間のChromeユーザーによる実際のCore Web Vitalsも示します。Googleが使うのは実ユーザーの数値です。
Search ConsoleのCore Web Vitalsレポート はURLを状態別にグループ化するので、すべての商品ページに共通の問題があるかが分かります。
ストア分析にあるShopifyのWebパフォーマンスレポート は同じ実ユーザーの指標を時系列で示すので、変更が効いたかの確認に便利です。

3つのCore Web Vitalsに集中しましょう。Largest Contentful Paint（メインの画像やテキストが表示される速さ）、Interaction to Next Paint（タップへのページの反応の速さ）、Cumulative Layout Shift（要素がどれだけずれ動くか）です。ラボスコアはテストごとに上下するので、満点の100を追いかけないでください。

1. 使っていないアプリのコードを削除する

アプリは、Shopifyストアが遅くなる最も一般的な原因です。ストアの表側に関わるアプリは、どれもすべてのページにJavaScriptとCSSを追加する可能性があります。

入れているアプリを一覧にします。もう使っていないものはアンインストールします。
アンインストールしても、アプリがテーマに追加したコードが消えるとは限りません。テーマのファイル（Online Store > Themes > Edit code）でアプリ名を検索し、残ったスニペットやscriptタグを削除します。
テーマアプリ拡張機能（テーマエディターで追加するアプリブロック）を使うアプリを選びましょう。アンインストール時にきれいに削除され、配置した場所でしか読み込まれません。
残すアプリについては、すべてのページで読み込まれていないか確認します。サイズ表が必要なのは商品ページだけです。

2. 最も大きな画像を直す

ほとんどの商品ページとコレクションページで、最も大きな要素は商品写真かヒーローバナーです。これを速くしましょう。

適切なファイルをアップロードする。 写真はアップロード前に幅2,000〜2,500ピクセル程度にリサイズし、圧縮します。ShopifyのCDNはリサイズ版とWebPのような新しい形式を自動で配信しますが、巨大な元画像はやはり時間がかかります。
最初の画像は遅延読み込みしない。 ページ上部の画像はすぐに読み込むべきです。遅延読み込みはもっと下にある画像のためのものです。
レスポンシブ画像を使う。 最新のテーマは、Shopifyの image_url と image_tag フィルターで画面ごとに適切なサイズを配信します。古いテーマは、すべての端末に大きなサイズを1つだけ配信していることがあります。
ヒーローでの動画の自動再生を避ける。 動画が必要なら、まずポスター画像を表示し、動画はそのあとで読み込みます。

3. ウィジェットを遅れて読み込む

レビュー、チャットの吹き出し、ポップアップ、アップセルのカルーセル、SNSのフィードを、商品より先に読み込む必要はほとんどありません。

チャットとポップアップは、ページが操作可能になってから、または少し遅らせて読み込みます。
レビューのウィジェットは、メインのコンテンツを妨げないよう、スクロールしないと見えない位置に置きます。SEOのため、レビューの本文はページのHTMLに残しておきます。
もう見ていない第三者のトラッキングピクセルは削除します。1つごとにスクリプトが増えます。

4. 最新のテーマを使う

Shopifyの無料のDawnベースのテーマを含め、Online Store 2.0向けに作られたテーマは、アプリブロック、レスポンシブ画像、軽いJavaScriptを前提に設計されています。重いスライダーとjQueryを使った数年前のテーマは、何を削っても遅いままのことがあります。

切り替える前に、新しいテーマのデモ商品ページをPageSpeed Insightsでテストしましょう。自身のデモで遅いテーマは、あなたの商品でも遅くなります。

5. レイアウトのずれを止める

ページの読み込み中にコンテンツがずれ動くと、Cumulative Layout Shiftが悪化し、購入者をいらだたせます。

画像に幅と高さを指定します（Shopifyの image_tag フィルターが追加します）。
読み込み後に表示されるバナーやお知らせバーのためにスペースを確保します。
カスタムフォントは font-display: swap で読み込み、ウェイトの数を絞ります。

あまり効果がないこと

高速化アプリ。 ほとんどがページに独自のスクリプトを追加します。コードを足すより削るほうが効果的です。
ホスティングやCDNの変更。 Shopifyではできませんし、する必要もありません。
数キロバイトのCSSの圧縮。 アプリの削除やメイン画像の修正と比べると、実ユーザーの指標を動かすことはまれです。

速さを保つ

アプリやセクションを追加するにつれて速度は低下します。新しいアプリを入れるたびに商品ページを再確認し、毎月Core Web Vitalsレポートを見ましょう。zaDojoのようなサイト監査なら、ストア全体で遅いページや大きすぎる画像を検出するので、1ページずつテストする必要はありません。

よくある質問

Shopifyの表示速度はSEOに影響しますか？ はい、少しは影響します。Core Web Vitalsは順位のシグナルですが、コンテンツと関連性のほうが重要です。速度がより大きく影響するのは売上です。購入者は遅い商品ページから離れていきます。

Shopifyの良い速度スコアとはどのくらいですか？ 実ユーザーのデータでCore Web Vitalsが「良好」になることを目指しましょう（Largest Contentful Paintが2.5秒未満、Interaction to Next Paintが200ミリ秒未満、Cumulative Layout Shiftが0.1未満）。100点満点のラボスコアは目安であって、目標ではありません。

Shopifyストアがモバイルで遅いのはなぜですか？ スマートフォンは処理能力も回線も遅いので、アプリの重いJavaScriptの影響がはるかに大きくなります。まずモバイルでテストしましょう。