Shopifyの表示速度改善｜測定・原因別の対策とSEO

Shopifyの表示速度を改善するときは、遅いページと症状を測定してから、画像・アプリ・テーマの順序を決めます。画像を圧縮するだけでは、クリックへの反応の遅さや画面のずれは直りません。本記事では、実際の利用者のデータとテスト結果を使い分け、購入操作を壊さずに改善する手順を整理します。

表示速度とSEO：点数より購入までの使いやすさを確認

GoogleはCore Web Vitalsをランキングシステムで使用しています。ただし、良好な数値でも上位表示は保証されません。検索意図に答える内容、スマートフォンでの読みやすさ、購入に必要な情報も併せて点検します。PageSpeed Insightsの100点を目的に、必要な商品説明や購入機能を削らないことが大切です。根拠はGoogleのページエクスペリエンス資料で確認できます。

現在の主要指標は次の3つです。良好の目安は、実利用データの75パーセンタイルで判断します。平均値だけで判断せず、モバイルとパソコンを分けて確認してください。

指標の定義と目安はweb.devのCore Web Vitals解説を参照してください。「サーバーがすぐ応答した」「ファイル容量が減った」という結果だけでは、この3つの改善を証明できません。

Shopifyの実利用データとPageSpeed Insightsを使い分ける

Shopifyでは現行のWebパフォーマンスレポートを見る

管理画面のテーマ画面でパフォーマンスの概要を確認し、詳細は分析のレポートでLCP・INP・CLSを探します。レポート名の検索には「contentful」「next」「cumulative」も利用できます。古い総合スピードスコアの解説を前提に操作しないようにしましょう。閲覧権限やデータの収集条件もShopify公式のレポート案内で確認します。

Shopifyのレポートは実際の訪問者の体験を集計します。更新には最大36時間程度かかる場合があり、公開直後の変更を即座に判定する用途には向きません。パスワード保護中など収集条件を満たしていない場合は、データの有無から確認します。

PageSpeed Insightsでは実測とラボテストを区別する

PageSpeed Insightsには、Chrome利用者の実利用データと、一定条件で実行するLighthouseのラボテストがあります。実利用データは過去28日間を対象とし、URL単位のデータが足りなければオリジン単位へ切り替わる場合があります。データなしは、速度が良い・悪いという判定ではありません。

ラボテストは原因を探すために使います。同じURL・端末条件で複数回測り、一度だけ高かった点数で結論を出さないでください。計測日時、モバイルかパソコンか、URL単位かオリジン単位か、使用テーマを記録すると比較しやすくなります。詳細はPageSpeed Insightsの公式説明を参照してください。

症状に合わせて改善する5つの手順

1. 対象を絞る：トップ、主要コレクション、代表商品を選びます。「商品画像が出るまで遅い」「バリエーション選択が固まる」「バナー表示でボタンが動く」のように、再現する操作を記録します。全ページ一括の変更から始めないようにします。
2. LCPが悪い場合は主な表示要素を調べる：レポートでLCP要素を特定し、画像なら表示サイズに対して過大でないか、テーマが適切なサイズを配信しているかを確認します。Shopifyには画像CDNによる最適化があります。外部ツールでの圧縮率を一律に約束せず、文字や商品の質感が損なわれないことも確認します。最初に見える主要画像まで一律に遅延読み込みにする変更は避け、必要ならテーマ開発者に読み込み順を相談します。
3. INPが悪い場合は操作と追加処理を点検する：重い操作の前後で、レビュー、チャット、ポップアップ、計測タグなどが動いていないかを調べます。アプリは利用目的と影響を記録し、複製テーマで有効・無効を比較します。注文、定期購入、在庫連携などへの依存を確認してから整理してください。削除だけで手動追加コードが消えるとは限りません。
4. CLSが悪い場合は表示領域を確保する：画像や動画の寸法・比率をテーマ側で設定し、後から表示する告知が本文や購入ボタンを押し下げていないかを確認します。画面を開いた直後だけでなく、スクロールやアプリの読み込み後も試します。
5. テーマと構成を見直す：更新内容と独自改修を確認し、複製・バックアップを用意してから更新を試します。過剰なセクション、動画、アニメーション、大量の商品を一度に読み込む一覧も点検対象です。テーマ名だけで高速化を保証せず、実際の商品数やアプリを含む条件で比較します。

ShopifyにはCDNや圧縮などが組み込まれています。一般的な監査ツールの「CDNを導入」「サーバー設定を変更」といった提案を、そのまま追加作業にしないでください。ストア側で変更できる内容・アプリ・テーマを切り分ける基準は、Shopify公式の改善ガイドが参考になります。

公開前後のチェックリスト

• 変更前のテーマ、対象URL、測定条件、症状、数値を保存した。
• 一度に変更する範囲を絞り、元に戻せる状態を用意した。
• スマートフォンでメニュー、検索、絞り込み、商品バリエーション選択を試した。
• 画像、価格、在庫、レビュー、カート追加、購入への遷移が正常に動いた。
• 同意管理や計測タグなど、整理した機能の担当者と動作確認をした。
• 公開後に同じ条件で再測定し、LCPだけでなくINP・CLSの悪化も確認した。
• 実利用データの反映期間を待ち、変更日を付けて継続比較する予定を決めた。

検索への影響はSearch Consoleの表示回数・クリック・対象ページの変化で、購入への影響はストアの購入行動で別々に追います。広告、価格、在庫、季節要因も変わるため、速度の変更だけで売上が増えたと断定しないようにしましょう。

よくある疑問

画像を軽くしたのに実利用データが変わらないのはなぜですか？

対象画像が主要な遅延原因でなかった可能性と、集計期間に変更前の訪問が含まれる可能性があります。ラボテストで変更の影響を調べ、実利用データは対象期間・端末・URLの範囲を確認して追跡します。

PageSpeed Insightsを100点にすればSEOは完了ですか？

完了ではありません。点数は診断の一部です。実利用者の体験と、検索した人が必要な情報を得られる内容を確認します。良いスコアだけで上位表示が保証されることもありません。

アプリを全部削除すると速くなりますか？

必要機能を失うおそれがあります。使用目的、表示するページ、処理への影響、他機能との依存を一覧にし、効果を比較できる範囲から整理します。

関連記事と改善の相談

画像制作から整える場合は商品写真の明るさ補正とトリミング、検索施策全体はShopifyでSEOが必要な理由と優先順位も参照してください。調査のご相談はお問い合わせから、対象URL、端末、遅い操作、測定結果、直前の変更内容をお知らせください。