ECサイトの「スピード改善」｜0.1秒の表示遅延が離脱を招く技術的理由

世界最大のECサイトであるAmazonは、過去のA/Bテストにおいて衝撃的なデータを発表しています。

同社の調査によると、ページ読み込み速度が 0.1秒（100ミリ秒）遅れるごとに、売上が1%減少するという結果が出ています。

出典：Amazon Found Every 100ms of Latency Cost them 1% in Sales – GigaSpaces

これは、年商1億円のECサイトであれば、わずか0.1秒の遅延で年間100万円の損失が出ることを意味します。逆に言えば、スピードを改善するだけで売上を底上げできるポテンシャルがあるということです。

Googleの調査データ（Think with Google）によると、モバイルサイトの読み込み時間が長くなるほど、ユーザーの直帰率（何もせずにサイトを去る確率）は急激に上昇します。

出典：New Industry Benchmarks for Mobile Page Speed – Google (PDF)

特にスマートフォンユーザーは「待つこと」に対して非常にシビアです。移動中や隙間時間にショッピングを楽しむユーザーにとって、表示の遅さはストレスそのものです。

ECサイトは商品の魅力を伝えるために多くの高画質写真を使用します。しかし、撮影したままの巨大なデータをそのままアップロードしてしまうと、ページの読み込みに膨大な時間がかかります。

• 一眼レフで撮影した数MBある画像をそのまま掲載している
• スマホ表示なのにPC用の巨大な画像を読み込ませている
• 次世代フォーマット（WebPなど）を活用していない

「便利そうだから」と機能拡張アプリを次々とインストールしたり、広告計測タグを大量に埋め込んだりしていませんか？

外部スクリプト（JavaScript）が増えるほど、ブラウザの処理負荷が高まり、メインコンテンツの表示（LCP）や操作への反応（INP）が遅れます。特に、すでに使っていないアプリのコードが裏側で動き続けているケースはよくある失敗例です。

利用しているサーバーのスペック不足や、古いシステム設計がボトルネックになることもあります。ただし、ShopifyやmakeshopなどのSaaS型カートシステムを利用している場合、サーバー環境はプラットフォーム側に依存するため、ユーザー側では「設定」や「構築方法」での最適化がメインになります。

不要なアプリの削除とコード整理

Shopifyアプリは手軽に機能を試せる反面、削除しても「残骸コード」がテーマファイル内に残ることがあります。定期的にアプリの利用状況を見直し、完全に削除するだけでなく、テーマのLiquidファイル内に不要なコードが残っていないか専門的なチェックを行うことが重要です。

画像の最適化とLazy Load

Shopifyは自動でWebP変換などを行ってくれますが、元データが巨大すぎると処理に負荷がかかるため、アップロード前の圧縮を推奨します。また、ファーストビュー（最初に表示される画面）以外の画像には loading="lazy" を付与し、遅延読み込みさせることで初期表示を高速化します。

クリエイターモードの活用

従来の「ベーシックモード」よりも、HTML/CSSの自由度が高く、SEOや表示速度に有利な設計が可能な「クリエイターモード」への移行を推奨します。クリエイターモードでは、無駄なタグの出力を抑え、スマートなソースコードを実現できます。

トップページの軽量化

特集バナーやランキング、Instagram連携などをトップページに詰め込みすぎると、表示速度が著しく低下します。ユーザーが見たい情報は何かを整理し、コンテンツの引き算を行うことも立派なスピード改善策です。