Shopifyストアの表示速度を改善する方法 — SEOに直結する高速化対策

「ページの読み込みが遅い気がするけど、何をどう直せばいいのかわからない」

Shopifyストアを運営していて、そんなモヤモヤを感じたことはありませんか。実は、表示速度はSEOの評価にも、お客さんの購入率にも、思っている以上に大きく影響しています。

Googleは2021年から Core Web Vitals をランキング要因に組み込んでいますし、ページの読み込みが1秒遅れるだけでコンバージョン率は大きく下がるというデータもあります。つまり、速度改善は「やったほうがいい」ではなく「やらないと損をしている」レベルの話です。

この記事では、Shopifyストアの 表示速度を改善する具体的な方法 を、初心者でもできるものからテーマのカスタマイズまで段階的にまとめました。

Core Web Vitals（コアウェブバイタル）

Googleがページのユーザー体験を評価するために定めた3つの指標のこと。読み込み速度（LCP）、操作への応答性（INP）、視覚的な安定性（CLS）で構成されます。2021年からGoogle検索のランキング要因に含まれています。

出典：Google / Deloitte - Milliseconds Make Millions、Google - Mobile Page Speed Benchmarks

なぜ表示速度がそこまで重要なのか

表示速度の改善は、3つの面で直接的なメリットがあります。

1. 01

   SEO評価が上がる

   Googleは Core Web Vitals をランキングシグナルとして使っています。同じようなコンテンツのページが2つあれば、速いほうが上位に表示されやすくなります。特にモバイル検索では、速度の影響が顕著です。
2. 02

   コンバージョン率が改善する

   ページが速く表示されると、お客さんはストレスなく商品を閲覧・購入できます。Amazonの調査では、100ミリ秒の遅延で売上が1%減少すると報告されています。小さな改善の積み重ねが、売上に直結します。
3. 03

   離脱率が下がる

   ページの読み込みが遅いと、お客さんはページが表示される前にブラウザの「戻る」ボタンを押してしまいます。せっかく広告やSNSで集客しても、ストアにたどり着く前に離脱されては意味がありません。

出典：Amazon Internal Study（Greg Linden, 2006）

Shopifyの速度スコアを確認する

改善の第一歩は、現状を把握することです。Shopifyには管理画面から速度スコアを確認できる機能が用意されています。

1. 1

   Shopify管理画面を開く

   管理画面の オンラインストア → 速度 にアクセスします。ここにストア全体の速度スコアが表示されます。
2. 2

   スコアの意味を理解する

   Shopifyの速度スコアは、Google Lighthouseのパフォーマンススコアをもとに算出されています。スコアは0〜100で、50以上なら平均的、70以上なら良好と考えてOKです。
3. 3

   PageSpeed Insightsでも確認する

   より詳しい診断は Google PageSpeed Insights で確認できます。ストアのURLを入力すると、LCP・INP・CLSのスコアと改善提案が表示されます。

参考：Shopify公式ヘルプ - オンラインストアの速度

画像を最適化する

Shopifyストアの速度低下の原因として、もっとも多いのが 画像のファイルサイズ です。ここを改善するだけで体感速度が大きく変わります。

• 画像をWebP形式に変換する（Shopifyは自動でWebP配信に対応）
• 商品画像は幅2048px以内にリサイズする
• alt属性（代替テキスト）を設定する（SEOにも有効）
• ヒーロー画像やスライダー画像を圧縮する
• 遅延読み込み（Lazy Loading）が有効になっているか確認する

Shopifyは2022年以降、対応ブラウザに対して 自動でWebP形式に変換して配信 してくれるようになりました。ただし、アップロードする元画像が大きすぎると、変換後もファイルサイズは大きいままです。

商品画像はアップロード前に 幅2048px以内・ファイルサイズ200KB以下 を目安に圧縮しておきましょう。無料ツールなら Squoosh（Google製）や TinyPNG がおすすめです。

参考：Shopify公式ヘルプ - 画像のベストプラクティス

アプリを整理する

Shopifyの強みはアプリで機能を拡張できることですが、 アプリの入れすぎは速度低下の最大の原因 のひとつです。

アプリをインストールすると、テーマにJavaScriptやCSSが追加されます。問題なのは、 アプリをアンインストールしてもコードが残ることがある という点です。

1. 1

   インストール済みアプリを棚卸しする

   管理画面の 設定 → アプリと販売チャネル で一覧を確認します。「このアプリ、最後に使ったのいつだっけ？」と思うものがあれば、それは削除候補です。
2. 2

   使っていないアプリをアンインストールする

   月額料金が発生しているアプリは特に要注意です。速度だけでなくコスト面でも、不要なアプリは削除しましょう。
3. 3

   アンインストール後の残留コードを確認する

   テーマエディタの コード編集 を開き、アプリ名で検索してみてください。削除したはずのアプリのコードが残っていることがあります。自信がなければ、テーマのバックアップを取った上で対応しましょう。

参考：Shopify公式ヘルプ - アプリの管理

テーマの選び方と軽量化

テーマはストア全体の速度に大きく影響します。機能が豊富なテーマほど、裏側で動くコードも多くなりがちです。

Shopifyが公式に提供する無料テーマ Dawn は、軽量かつ高速なテーマの代表格です。Online Store 2.0に対応しており、セクション構成の自由度も高いため、速度とカスタマイズ性を両立できます。

速度を重視するなら、テーマ選びで以下のポイントを確認しましょう。

• Online Store 2.0対応のテーマか
• テーマのデモサイトをPageSpeed Insightsで計測してみる
• 不要なセクション（スライダー・動画背景・アニメーション）を無効化できるか
• フォントの読み込み数が最小限か（システムフォント推奨）

参考：Shopify公式 - 無料テーマ一覧

Liquid・JavaScriptの最適化

ここからは少し技術的な内容になりますが、知っておくだけでも改善のヒントになります。

Shopifyのテーマは Liquid というテンプレート言語で構成されています。Liquidコードの書き方によっても、ページの生成速度は変わります。

1. 01

   不要なLiquidループを減らす

   コレクションページで全商品をループ処理していると、商品数が増えるほどページの生成が遅くなります。ページネーション（ページ分割）を適切に設定しましょう。
2. 02

   JavaScriptの読み込みを最適化する

   scriptタグに defer や async 属性をつけると、HTMLの解析をブロックせずにスクリプトを読み込めます。テーマのコードを確認して、外部スクリプトが render-blocking になっていないかチェックしましょう。
3. 03

   使っていないCSS・JSを削除する

   テーマを長く使っていると、カスタマイズの過程で使われなくなったCSSやJavaScriptが残っていることがあります。PageSpeed Insightsの「使用されていないJavaScriptの削減」という項目に具体的なファイルが表示されます。
4. 04

   サードパーティスクリプトを見直す

   Google Analytics、Facebook Pixel、チャットウィジェットなど、外部サービスのスクリプトも速度に影響します。本当に必要なものだけに絞りましょう。

Core Web Vitalsを理解して改善する

Core Web Vitals は3つの指標で構成されています。それぞれの意味と改善ポイントを押さえておきましょう。

出典：Google - Web Vitals

速度改善の優先順位チェックリスト

「全部やるのは大変」という方のために、 効果が大きい順 に整理しました。上から順番に取り組んでみてください。

1. 1

   画像を圧縮・最適化する

   もっとも手軽で効果が大きい施策です。特にトップページのヒーロー画像と商品画像を見直しましょう。
2. 2

   不要なアプリを削除する

   使っていないアプリのアンインストールと残留コードの確認。これだけで体感速度が変わることも多いです。
3. 3

   テーマの不要な機能をオフにする

   スライダー、動画背景、重いアニメーションなど、使っていないセクションを無効化します。
4. 4

   Webフォントを見直す

   日本語Webフォントは特にファイルサイズが大きいため、システムフォントへの切り替えを検討しましょう。
5. 5

   サードパーティスクリプトを整理する

   不要な計測タグやウィジェットを削除します。
6. 6

   テーマの変更を検討する

   上記をすべて試してもスコアが低い場合は、テーマ自体の見直しを検討します。Dawn等の軽量テーマへの移行が有効です。

よくある質問

まとめ

Shopifyストアの表示速度は、SEOの評価、コンバージョン率、そしてお客さんの満足度に直結しています。技術的に難しいことをすべてやる必要はありません。

まずは 画像の最適化 と 不要なアプリの削除 から始めてみてください。この2つだけでも、体感速度は確実に変わります。そのうえで余裕があれば、テーマの見直しやコードの最適化に取り組んでいくのがおすすめです。

速度改善とSEO対策をセットで進めたい方は、こちらの記事もあわせてご覧ください。

→ ShopifyのSEO対策を詳しく見る

これからShopifyを始める方は、初期設定のガイドも参考にどうぞ。

→ Shopifyの始め方を10ステップで学ぶ