ECサイトの表示速度は売上に直結する重要な要素です。

本記事では、画像最適化、キャッシュ活用、コード圧縮など、即実践できるECサイトの表示速度改善の具体的手法を解説します。

是非、改善にお役立てください。

ECサイトにおける表示速度の重要性

ECサイトの表示速度は、ユーザー体験と売上を左右する最重要指標の一つです。

特にECサイトでは、直帰率が下がると売り上げにも影響が大きいため重要度の高い要素です。

また、ページ速度はGoogleのSEOランキング要因として採用しており、遅いサイトは検索順位が下がるリスクもあります。

売上への直接的影響

ECサイトの表示速度は売上に大きな影響を与えます。

Amazon の調査によると、ページ読み込み時間が0.1秒遅延するだけでECサイトの売上が1%減少することが判明しています。

特にモバイルユーザーは待ち時間に敏感で、3秒以上かかると53%が離脱してしまいます。

この表示速度が1秒改善されるとコンバージョン率が最大27%向上するというデータもあり、カート放棄率の低減にも効果的です。

つまり、表示速度の改善は広告費をかけずに売上を伸ばせる、最もコストパフォーマンスの高い施策なのです。

ユーザー体験（UX）への影響

表示速度はユーザー体験の基盤を形成する最も重要な要素です。

ページ読み込みが1秒から2秒に遅延するだけで直帰率が32%増加し、快適なショッピング体験を損ないます。

遅いサイトはユーザーにストレスを与え、商品閲覧の意欲を低下させ、ページビュー数の減少を招きます。

特に商品画像の表示遅延やカート追加ボタンの反応の遅れは、購買プロセスを中断させる大きな要因となります。

また、表示速度の悪いサイトは「管理が行き届いていない」「信頼できない」といったネガティブなブランドイメージを植え付け、リピーター率の低下にもつながります。

逆に高速なサイトはユーザーに安心感を与え、サイト内回遊を促進し、顧客満足度とロイヤリティの向上を実現します。

SEOへの影響

表示速度はGoogleの検索順位を決定する重要なランキング要因です。

2021年6月からGoogleはCore Web Vitals（LCP、INP、CLS）を正式なランキングシグナルに組み込み、表示速度の遅いサイトは検索順位が下落するリスクに直面しています。

特にモバイルファーストインデックスが主流となった現在、モバイル端末での表示速度が重視され、スマホでの読み込みが遅いサイトは大幅に評価を下げます。

実際の調査では、表示速度を改善したECサイトが検索順位で平均5〜10位上昇した事例も報告されています。

また、表示が速いサイトはクローラーの巡回効率も向上し、新商品ページのインデックス速度が早まります。

これにより、広告費をかけずにオーガニック検索からの流入を増やすことができ、長期的な集客力強化につながります。

Core Web Vitalsについて

LCPについて

INPについて

CLSについて

ECサイトの表示速度の計測方法

基本的にECサイトの表示速度を計測する場合はPageSpeed Insightsを活用するといいでしょう。

計測結果はもちろん、具体的な改善ポイントも確認できます。

PageSpeed Insightsでの計測方法と確認方法

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。

ここでの注意点として、サイト全体の速さではなくページ単位で計測されるということだけ理解しておきましょう。

計測に1分前後ほど待つ場合がありますが、計測結果や改善点も詳しく表示されます。

スマホ・デスクトップの数値が見分けられる

計測されると下記の画像のような表示となり計測結果も表示されます。

ここでは、URL入力のすぐ下の部分（画像の赤で囲われている箇所）でスマホとデスクトップそれぞれの計測結果を別に見ることができます。

スマホとPCでは大きく差が生まれることが多く、スマホ・デスクトップ別にどこを修正したらいいか確認する際はこちらを見るようにしましょう。

実際のユーザーの環境での評価の見方

URL入力欄の少し下の部分に「実際にユーザー環境で計測する」という項目が出てきます。

実際にユーザー環境で計測された数値は下記画像の赤枠部分で確認することができます。

ポイントとして、ここで表示されているデータは「実際のユーザーの環境」での評価となります。

実際のユーザーの環境というのは、Chrome User Experience Report（CrUX）データに基づいており、以下の具体的な条件が加わり測定されています。

• wデバイスやブラウザ環境
• 回線速度や接続環境
• 地理条件

そのため「実際のユーザーの環境で計測されている数値」となり、ユーザー環境によっても変動することだけ理解しておくといいでしょう。

ここでは

• LCP：ページ内で最も大きなコンテンツが表示されるまでの時間
• INP：ユーザーの操作に対するページの応答速度
• CLS：ページ表示中のレイアウトの予期しない移動量
• FCP：ページ内で最初のコンテンツが表示されるまでの時間
• TTFB：サーバーが最初のデータを返すまでの時間

これらの数値の評価が確認できます。

それぞれの指標に関しての詳しい解説は「LCP」「INP」「CLS」「FCP」「TTFB」こちらのリンク先をご覧ください。

パフォーマンスの問題を診断するの見方

更に下の方へスクロールすると、下記の画像のように「パフォーマンスの問題を診断する」という項目があります。

ここでは、パフォーマンス、ユーザー補助、おすすめの方法、SEOという項目に分けて改善方法が公開されます。

それぞれ詳しく解説していきます。

「パフォーマンス」の項目の見方について

パフォーマンスの項目は下記の画像のような項目が表示されています。

ここでは

• FCP：ページ内で最初のコンテンツが表示されるまでの時間
• LCP：ページ内で最も大きなコンテンツが表示されるまでの時間
• TBT：ページが操作不能な時間の合計
• CLS：ページ表示中のレイアウトの予期しない移動量
• SI：ページの可視部分が表示される平均速度

これらの数値の評価が確認できます。

「パフォーマンス」の項目に関しては、「FCP」「LCP」「TBT」「CLS」「SI」という５項目の指標の数値が見れます。

また「パフォーマンスの問題を計測する」セクションは、Lighthouseエンジンによるラボデータ（シミュレーション環境）で測定されているという点は押さえておきましょう。

具体的には、下記のような環境下で計測されている数値となります。

• CPUを4倍スローダウン
• ネットワークを4G LTE速度に制限
• モバイルは375×667px画面
• デスクトップは1920×1080px画面
• キャッシュなしの初回訪問の状態

実際のユーザー環境とは異なる理想的な実験室環境で、具体的な技術的問題の特定と改善提案に特化した診断結果となります。

インサイト・診断項目の見方

更にスクロールしていくと、下記の画像のようなINSIGHTS、診断という項目が出てきます。

ここでは、計測結果に応じた具体的な改善内容が確認できます。

上記画像の①では、各指標別の改善項目を絞り込むことができます。

②に関しては、具体的に改善余地のある項目が並びます。

更に右側にある③をクリックすると、更に詳しい改善箇所なども表示されます。

具体的な改善箇所を確認する場合は、インサイト・診断項目を確認して改善を進めましょう。

ECサイトの表示速度低下の主な原因

ECサイトで表示速度が遅くなる原因を理解することで、効果的な改善策を立てることができます。

主に下記のような原因が多くあります。

画像ファイルの最適化不足

画像はECサイトのデータ通信量の多くを占め、表示速度低下の最大要因となっています。

主な原因は、高解像度の商品画像を最適化せずにそのままアップロードすることや、レスポンシブ対応が適切にできていない場合に表示速度低下の要因となることがほとんどです。

デジカメやスマートフォンで撮影した画像は数MBに達することもあり、1ページに複数枚配置すると読み込みに10秒以上かかるケースもあります。

また、適切なフォーマット選択の誤りも問題です。写真にPNG形式を使用するとファイルサイズが肥大化し、逆に図形やロゴにJPEGを使うと画質が劣化します。

JavaScriptの肥大化

JavaScriptの肥大化は、ECサイトの表示速度を著しく低下させる深刻な問題です。

特にECサイトの場合によく見受けられるのが、多機能なスライダー、チャットボット、レコメンド機能など、ユーザー体験向上を目指して導入した各種ライブラリが積み重なり表示が遅くなってしまうケースも珍しくありません。

特に問題なのは、JavaScriptはダウンロード後にブラウザで解析・実行されるため、CPUリソースを大量に消費し、低スペックのスマートフォンでは画面が固まったように感じられることです。

また、外部タグの過剰な実装も要因の一つで、広告タグ、アクセス解析ツール、SNS連携ボタンなどを無計画に追加すると、それぞれが独立してスクリプトを読み込み、レンダリングをブロックします。

JavaScriptの最適化について詳しくは「JavaScriptの速度改善方法」もご覧ください。

CSSの最適化不足

CSSの最適化不足は、ECサイトのレンダリング速度を大幅に遅延させる要因です。

最も一般的な問題は、未使用のCSSコードが大量に残存していることです。

テンプレートやフレームワークを導入する際、実際には使わないスタイル定義まで読み込んでしまい、ファイルサイズが肥大化します。

また、複数のCSSファイルを統合せずに個別に読み込むと、HTTPリクエスト数が増加し、通信時間が延びます。

さらに、レンダリングブロッキングの問題です。CSSはページ表示前にすべて読み込まれるため、ファイルサイズが大きいほどファーストビューの表示が遅れます。

サーバーレスポンス時間（TTFB）の遅延

TTFB（Time To First Byte）とは、ブラウザがリクエストを送信してから最初のデータを受信するまでの時間を指し、Googleは200ミリ秒以内を推奨しています。

ECサイトでTTFBが遅延する主な原因は、サーバースペック不足です。

共有サーバーでは他サイトの影響を受けやすく、アクセス集中時にレスポンスが著しく低下します。

また、データベースクエリの最適化不足も深刻で、商品検索や在庫確認で複雑なSQL処理を実行すると、毎回数秒のタイムラグが発生します。

さらに、サーバーとユーザー間の物理的距離も影響し、海外からのアクセスでは往復通信時間が長くなります。

キャッシュ機能の未実装やPHP・データベースのバージョンが古いことも要因となり、これらが複合的に作用してページ全体の表示速度を大幅に悪化させるのです。

TTFBについてやサーバーの速度改善方法も是非参考にしてみてください。

キャッシュ設定の不備

キャッシュ設定ができていないと、ECサイトで同じデータを何度も読み込ませる無駄を生み、表示速度を著しく低下させます。

ブラウザキャッシュが未設定の場合、リピーターでも毎回すべてのCSS、JavaScript、画像ファイルをダウンロードするため、通信量が膨大になります。

適切に設定すれば、2回目以降の訪問で読み込み時間を削減できます。

また、サーバーサイドキャッシュの未実装も問題です。

さらに、CDN（コンテンツデリバリーネットワーク）を導入していないと、静的ファイルの配信が遅く、特に地理的に離れたユーザーへの表示速度が大幅に悪化してしまいます。

外部スクリプト・タグの過剰

外部スクリプトやタグの過剰な実装は、ECサイトの表示速度を劇的に低下させる見落とされがちな原因です。

ECサイトでは特にユーザーの利便性を求め、Google Analytics、広告トラッキングタグ、チャットツール、レビューウィジェット、SNS連携ボタンなど、追加された外部スクリプトが増えてしまいがちです。

これらは各々が独立したサーバーへリクエストを送信するため、通信回数が激増し、1つでも応答が遅いと全体の読み込みが停滞します。

特に問題なのは、これらのスクリプトが同期的に読み込まれるとレンダリングがブロックされ、画面が真っ白なまま数秒間表示されない状態が発生することです。

また、外部サービス側のサーバー障害やメンテナンスの影響を直接受けるため、自社サイトの表示速度をコントロールできなくなるリスクもあります。

定期的な見直しと非同期読み込みの実装が不可欠です。

ECサイトの表示速度改善の9施策

それでは、具体的な改善施策を12項目に分けて詳しく解説していきます。

優先順位の高いものから順番に取り組んでいけば、確実に改善効果を実感できるはずです。

画像の圧縮とレスポンシブ画像の活用

画像最適化は、ECサイトの表示速度改善で最も効果的な施策です。

特に表示速度の改善に有効な方法として下記の方法が挙げられます。

• 画像圧縮させる
• レスポンシブ画像を活用

まず一つ目は圧縮率の調整によってファイルサイズ削減可能です。

それぞれの画像圧縮によりファイルサイズが減ります。

また、レスポンシブ画像を活用し、表示される端末別に適切な画像サイズへのリサイズと実際の表示領域に合わせて縮小することで、データ量を大幅に削減できます。

レスポンシブ画像について

次世代フォーマット画像の活用

次世代フォーマット画像の導入は、ECサイトの表示速度を劇的に改善する最先端の施策です。

WebPは従来のJPEGやPNGと比較してもファイルサイズが小さく容量の削減が可能で、画質を維持したまま高速表示を実現します。

さらに新しいAVIF形式は、WebPよりも20〜30%軽量化でき、色再現性も優れているため、商品画像の魅力を損なわずデータ量を最小化できます。

非対応ブラウザにはJPEGがフォールバックされるため互換性も確保されます。

変換ツールやCDNの自動変換機能を活用すれば、既存画像を一括処理できるため、導入の手間も最小限に抑えられます。

次世代フォーマット画像について

Lazy Load（遅延読み込み）の実装

Lazy Loadは、画面に表示されていない画像や動画を後回しにして読み込む技術で、初期表示速度を大幅に改善します。

ECサイトでは商品一覧ページに数十〜数百点の商品画像が並ぶため、すべてを一度に読み込むと通信量が膨大になり、ファーストビューの表示に10秒以上かかることもあります。

Lazy Loadを実装すれば、ユーザーがスクロールして画面に入る直前に画像を読み込むため、初期ロード時間を短縮できます。

最も簡単な実装方法は、imgタグにloading="lazy"属性を追加するだけで、主要ブラウザがネイティブ対応しています。

より高度な制御が必要な場合は、Intersection Observer APIを使用し、読み込みタイミングを細かく調整できます。

ただし、ファーストビューの画像には適用せず、スクロールしないと見えない画像のみに限定することが重要です。

これにより、データ通信量を削減しながら快適な閲覧体験を提供できます。

Lazy Load（遅延読み込み）について

キャッシュの活用

キャッシュの活用は、ECサイトの表示速度を多層的に改善する強力な施策です。

ブラウザキャッシュでは、CSS、JavaScript、画像などの静的ファイルをユーザー端末に保存し、再訪問時の読み込み時間を短縮できます。

サーバーサイドキャッシュでは、商品一覧や詳細ページのHTML出力を一時保存することで、毎回のデータベース処理を省略し、サーバーレスポンスを高速化します。

オブジェクトキャッシュでは、データベースクエリ結果をメモリに保持し、頻繁にアクセスされる商品情報や在庫データの取得を瞬時に完了させます。

これらを組み合わせることで、初回訪問からリピーター訪問まで全体的なパフォーマンスが向上し、離脱率低下とコンバージョン率向上を実現します。

内部CSS化の実施

内部CSS化は、ファーストビューの表示に必要な最小限のCSSをHTML内に直接記述する技術です。

外部CSSファイルの読み込み待ち時間を削減し、初回コンテンツ描画時間（FCP）を劇的に改善できます。

特にLCPに影響する重要な要素のスタイルを優先的に内部CSS化することで、ユーザーは即座にメインコンテンツを閲覧できます。

残りの非クリティカルなCSSは遅延読み込みすることで、初期表示速度とページ全体のバランスを最適化できます。

CSS・JavaScriptの非同期読み込み

CSS・JavaScriptの非同期読み込みは、スクリプトタグにasync属性やdefer属性を追加することで、HTMLの解析をブロックせずにリソースを読み込む技術です。

asyncは読み込み完了後すぐに実行し、deferはHTML解析完了後に順序通り実行します。

これによりレンダリングブロックを回避し、ファーストビューの表示が大幅に高速化されます。

レンダリングブロックについて

サードパーティスクリプトの最適化

サードパーティスクリプトの最適化は、ECサイトの表示速度改善で見落とされがちな重要施策です。

Google Analytics、広告タグ、チャットツール、SNSウィジェットなど、複数の外部スクリプトが同期的に読み込まれると、メインコンテンツの表示が数秒遅延します。

まず実施すべきは不要なタグの削除で、使用頻度が低い計測ツールや過去のキャンペーン用タグを整理するだけで、リクエスト数を削減できます。

次に、async属性やdefer属性を付与して非同期読み込みに変更すれば、スクリプトがページレンダリングをブロックせず、ユーザーは即座にコンテンツを閲覧できます。

外部スクリプトは必要最低限に絞り、読み込み優先度を適切に設定することで、ファーストビューの表示速度が大幅に向上し、直帰率の低下につながります。

CDN（コンテンツデリバリネットワーク）の導入

CDNの導入は、地理的な距離による表示速度の遅延を解消する効果的な施策です。

通常のサーバー構成では、東京にサーバーがある場合、大阪からのアクセスは高速でも、海外や遠隔地からは物理的距離により応答時間が数秒遅延します。

CDNは世界中に分散配置されたエッジサーバーに画像、CSS、JavaScriptなどの静的コンテンツをキャッシュし、ユーザーに最も近いサーバーから配信することで、読み込み時間を短縮します。

Cloudflare、Amazon CloudFront、Akamaiなどの主要サービスがあり、設定も比較的簡単です。

特にECサイトでは商品画像が大量にあるため、CDN経由で配信すればオリジンサーバーの負荷が軽減され、アクセス集中時でも安定した速度を維持できます。

さらに、SSL/TLS対応やDDoS攻撃の防御機能も備えているため、セキュリティ強化も同時に実現できる一石二鳥の施策といえます。

CDNについては「CDNとは」の記事で解説しています。

サーバースペックの最適化

サーバースペックの最適化は、ECサイトの根本的なパフォーマンス向上に直結する重要施策です。

共有サーバーでは他サイトの影響を受けやすく、アクセス集中時にレスポンスが著しく低下するため、専用サーバーやVPSへの移行が推奨されます。

特にCPUとメモリの増強は効果的で、動的ページ生成やデータベース処理が高速化され、TTFB（最初のバイト到達時間）を数秒から数百ミリ秒に短縮できます。

SSDストレージの採用も不可欠で、従来のHDDと比較して読み書き速度が5〜10倍向上し、商品検索や在庫照会のレスポンスが劇的に改善します。

また、HTTP/2やHTTP/3プロトコルへの対応により、複数ファイルの並列ダウンロードが効率化されます。

さらに、PHPやMySQLなどのソフトウェアを最新バージョンにアップデートすることで、処理速度とセキュリティが同時に向上します。

適切なサーバー環境は、他の最適化施策の効果を最大限に引き出す基盤となります。

HTTP/2やHTTP/3については「HTTP/3とは？HTTP/2の違いや特徴を比較」の記事で詳しく解説しています。

最後に

ECサイトの表示速度改善は、お客様に快適なショッピング体験を提供し、売上向上を実現するための重要な投資です。

技術的な側面だけでなく、ビジネス戦略としても位置づけて取り組むことで、長期的な競合優位性を確保できるでしょう。

今回ご紹介した9施策を参考に、ぜひ表示速度改善に取り組んでみてください。

きっと、お客様からの反応や売上の変化を実感していただけるはずです。

表示速度の改善に関してご質問やお困りのことがございましたら、ぜひ専門家にご相談ください。

一緒に、より良いECサイトを作り上げていきましょう。