Shopifyの表示速度を改善する方法と、遅い原因の見つけ方

表示速度が大事な理由と、目安

表示が遅いほど、ページが出る前に離れてしまうお客様が増えます。Googleも、表示の速さなどの指標（Core Web Vitals）を、検索順位を決める要素の一つとして使っています。

PageSpeed Insights のモバイルのスコアは、性能の低いスマートフォンと遅い回線を想定して測るため、画像やアプリの多いネットショップでは低く出がちです。100点を目指す必要はありません。この診断では、50点以上を良好、30点以上を標準としています。また、同じストアでも測るたびに数点から10点ほどぶれます。

遅い原因の見つけ方

• 管理画面の「オンラインストア」→「テーマ」にある、ウェブパフォーマンスの指標を見ます。実際にストアを訪れたお客様の環境での速さが分かり、「レポート」からは日ごとの変化も見られます。アプリを入れた日やテーマを変えた日から悪くなっていれば、それが原因の候補です。
• Googleの PageSpeed Insights（pagespeed.web.dev）で、トップページと商品ページをモバイルで測ります。
• 原因の多くは、アプリや計測タグのプログラム、大きな画像や動画、日本語のWebフォント、古い世代のテーマのどれかです。
• この診断では、ページで読み込んでいるプログラムをアプリごとに集計し、どのアプリが表示を遅くしているかを示します。

自分でできる改善

• 使っていないアプリを削除します。ただし、アプリがテーマのコードに直接追加したコードは、アンインストールしても残ることがあります。アプリの案内に沿って消すか、制作会社に依頼してください。
• テーマエディタの左側にある「埋め込みアプリ」で、使っていないアプリをオフにします。チャットやポップアップ、計測のアプリの多くは、ここから読み込まれています。
• レビュー、ポップアップ、チャットなど、同じ役割のアプリが2つ以上入っていたら、1つにまとめます。
• トップページの重い部品（何枚も切り替わるスライドショー、自動で再生される動画、Instagramの埋め込みなど）を減らします。特に、最初に表示される部分を軽くすると効果が出やすくなります。
• 数MBある写真は、縮小・圧縮してから登録し直します。写真はPNGではなくJPGで登録すると軽くなります。商品説明やページの本文に貼った画像は元の大きさのまま読み込まれるので、縮小してから貼り直します。Shopifyは表示する大きさに合わせて画像を縮小して配信できますが、テーマの作りによっては元の大きさのまま読み込まれることがあります。
• 日本語のWebフォントをアプリやコードで追加している場合は、本当に必要かを見直します。端末に入っているフォントを使えば、フォントの読み込みはなくなります。

コードの改修が必要な改善

次のような改善は、テーマのコードを直す必要があります。費用の目安は20万〜50万円（税別）、期間は2〜4週間です。テーマの移行まで必要な場合は、60万〜180万円（税別）、1〜3か月が目安です。診断で原因が分かっていれば、調査から始めずにお見積もりできます（無料）。

• アンインストールしたあとに残ったアプリのコードの削除
• アプリや計測タグのプログラムを、表示のあとで読み込むようにする（defer・async）
• 表示する大きさに合った画像を読み込むようにする（srcset・sizes。画像だけなら3万〜10万円（税別）が目安）
• テーマとアプリで重複して読み込んでいるプログラム（jQuery など）の整理
• 古い世代のテーマから、今の仕組み（Online Store 2.0）に対応したテーマへの移行

KUNI.TECHに相談する（無料）

この診断で確かめていること

Googleの PageSpeed Insights でスマートフォンでの表示を実際に計測し、スコアと表示速度の指標（Core Web Vitals）を示します。あわせて、アプリごとのプログラムの影響、画像・Webフォント・表示を止めるファイルの問題、読み込んでいるアプリの数と重複を示します。

計測は1回分の結果です。実際のお客様の環境での速さは、管理画面のウェブパフォーマンスの指標で確かめてください。