本文へスキップ

COLUMN

SEOや離脱率にも関わるサイトスピード。測定と改善方法の一例をご紹介

はじめに

ECサイトの売上や検索順位を上げようとするとき、商品ページの中身やデザインに目が向きがちです。しかし、ページが表示されるまでの速さ(サイトスピード)も、購入率と検索順位の両方に関わります。

この記事では、サイトスピードが売上とSEOに影響する理由、Googleが定める指標「Core Web Vitals」の基準値、PageSpeed Insightsでの測り方、ECで効きやすい改善方法を順に解説します。

サイトスピードが売上とSEOに影響する理由

サイトスピードとは、ユーザーがWebサイトにアクセスしてから、ページが表示されて操作できるようになるまでの速さのことです。「サイト表示速度」「ページ速度」とも呼ばれます。

サイトスピードが大切な理由は、大きく2つあります。

表示が遅いと購入まで進まない

ECでは、商品一覧から商品詳細、カート、購入完了まで何ページも移動します。1ページごとの待ち時間が積み重なるため、表示の遅さは離脱と購入率に直結します。

Googleの依頼でデロイトが欧米37ブランドのモバイルサイトを分析した調査では、表示速度が0.1秒速くなると、小売サイトのコンバージョン率が8.4%、平均注文額が9.2%上がりました。商品詳細からカート投入へ進む割合も9.1%上がっています。

出典:Deloitte「Milliseconds Make Millions」(2020年)

速度の改善と購入の増加が同時に起きたことを示す観察データで、どのサイトでも同じ効果が出るとは限りません。それでも、わずかな改善が購入の手前の行動に効くことを示す数字として参考になります。

検索順位の評価にも使われる

Googleは2018年に、ページの読み込み速度をモバイル検索の順位付けに使い始めました。現在は、表示の速さ・操作への反応・レイアウトの安定を測る「Core Web Vitals」を、検索の順位付けのしくみで使っていると公表しています。

ただしGoogleは、ページの体験が劣っていても、最も関連性の高いコンテンツを表示するとも説明しています。速さは内容の良さの代わりにはならず、同じくらい役に立つページが競うときの差になる要素です。

出典:Google 検索セントラル「ページ エクスペリエンスについて」

また、サーバーの応答が遅いと、Googleのクローラーが一度に読みに来るページ数が減ることがあります。商品数の多いECでは、新しい商品ページが検索結果に出るまでに時間がかかる原因になります。

購入率と検索流入の両方に効くため、サイトスピードはEC運営で優先度の高い改善項目です。

Core Web Vitalsの3つの指標と基準値

Core Web Vitalsは、Googleがページの体験を測るために定めた3つの指標です。2024年3月に、操作への反応を測る指標がFIDからINPに替わりました。

指標測るもの良好改善が必要不良
LCP(Largest Contentful Paint)一番大きな画像や文字のかたまりが表示されるまでの時間2.5秒以下2.5秒超〜4秒4秒超
INP(Interaction to Next Paint)クリックやタップから画面が反応するまでの時間200ミリ秒以下200ミリ秒超〜500ミリ秒500ミリ秒超
CLS(Cumulative Layout Shift)表示の途中でレイアウトがずれる量0.1以下0.1超〜0.250.25超

判定には、実際に訪れた利用者のデータの75パーセンタイル値(訪問の75%がこの値より良い)を使います。3つとも「良好」なら合格です。出典:web.dev「Web Vitals」

サイトスピードの測り方

改善の前に、今の速さを測ります。まず使いたいのが、Googleの無料ツール「PageSpeed Insights(ページスピードインサイト)」です。

URLを入力すると、2種類の結果が出ます。上に出るのは、Chromeの実際の利用者から集めた過去28日間のデータ(フィールドデータ)で、Core Web Vitalsの合否はこちらで判定されます。下に出る100点満点のスコアは、その場で1回読み込んだ測定(ラボデータ)で、遅い原因を探す手がかりに使います。

スコアは測るたびに上下するので、点数の上下に一喜一憂する必要はありません。ECでは、トップページだけでなく、商品一覧・商品詳細・カートなど売上に近いページを測ることが大切です。

サイト全体の状況は、Google Search Consoleの「ウェブに関する主な指標」レポートで確かめられます。改善が必要なURLが、似たページのまとまりごとに表示されます。

ECサイトのサイトスピードを改善する方法

ECで遅くなる原因は、指標ごとにある程度決まっています。まず原因と対策の対応を表で確かめてから、主な改善方法を紹介します。

指標ECでよくある原因主な対策
LCP(表示の速さ)大きなメイン画像・商品画像、サーバーの応答の遅さ画像の軽量化、メイン画像を遅延読み込みにしない、CDN・キャッシュの活用
INP(操作への反応)アクセス解析・広告・レビュー・チャットなど外部スクリプトの多さ使っていないタグを外す、購入に関係しないものの読み込みを後回しにする
CLS(レイアウトのずれ)幅と高さを指定していない画像、あとから差し込まれるバナー画像に幅と高さを指定する、差し込む枠の高さを先に確保する

画像ファイルの軽量化

商品画像やメインビジュアルは、ECのページで最も容量が大きくなりがちです。表示する大きさに合わせてリサイズし、WebPやAVIFなど圧縮率の高い形式に変換すると、見た目をほぼ保ったまま容量を減らせます。

画面の外にある画像は、表示される直前まで読み込みを遅らせる「遅延読み込み」で軽くできます。ただし、ファーストビューのメイン画像を遅延読み込みにするとLCPが遅くなるので、対象から外します。

画像には幅と高さを指定しておくと、読み込み中にレイアウトがずれる(CLSが悪くなる)のを防げます。

外部タグとJavaScriptを整理する

ECサイトには、アクセス解析・広告の計測・レビュー・チャットなど、外部のスクリプトが多く入りがちです。使っていないタグを外し、購入に関係しないものは読み込みを後回しにすると、操作への反応(INP)がよくなります。

CSSやJavaScriptは、余分な改行や空白を除いて容量を減らす「圧縮(minify)」も効果があります。多くの制作環境では公開時に自動で行えるので、元のコードを書き換える必要はありません。

サーバーの応答時間を短縮する

サーバーの応答が遅いと、画像やコードを軽くしても表示は速くなりません。PageSpeed Insightsで「最初のバイトまでの時間(TTFB)」が長いと出る場合は、サーバーの性能や処理を見直します。

CDN(コンテンツ配信ネットワーク)を使うと、画像などのファイルを利用者に近い拠点から届けられ、応答を速くできます。自社でサーバーを運用していない場合は、使っているECプラットフォームやサーバー会社の対応状況を確かめます。

ブラウザのキャッシュを活用する

一度読み込んだ画像やCSSをブラウザに保存しておく「キャッシュ」を設定すると、2ページ目以降の表示が速くなります。商品一覧から詳細へとページを移動するECでは特に効果があります。

データの圧縮(gzip・Brotli)を有効にする

サーバーから送るHTMLやCSS、JavaScriptをgzipやBrotliで圧縮すると、転送する量を減らせます。多くのサーバーやCDNでは、設定だけで有効にできます。

まとめ:測ってから、売上に近いページから直す

サイトスピードは、ECの購入率と検索流入の両方に関わります。まずPageSpeed InsightsとSearch ConsoleでCore Web Vitalsの状態を測り、商品詳細やカートなど売上に近いページから、画像・外部タグ・サーバーの順に改善するのが近道です。

SEO全体の進め方は「ECサイトにおけるSEOとは?」、検索結果での見え方を整える方法は「構造化データとは?」、カートでの離脱の減らし方は「かご落ちとは?」で解説しています。

よくある質問

サイトスピードはSEOにどう影響しますか?

Googleは、表示の速さ・操作への反応・レイアウトの安定を測るCore Web Vitals(LCP・INP・CLS)を、検索の順位付けに使っています。ただし最も重視されるのは内容の関連性で、速さだけで順位が大きく上がるわけではありません。同じくらい役に立つページが競うときの差になる要素です。

サイトスピードを測定するにはどんなツールを使えばよいですか?

代表的なツールは3つです。Googleが提供する「PageSpeed Insights」はURLを入力するだけでモバイル・PC両方のスコアと改善提案を確認できます。「Lighthouse」はブラウザの開発者ツールから詳細な診断が可能です。「GTmetrix」はウォーターフォールチャートで読み込みの詳細を分析できるため、原因特定に役立ちます。

サイトスピードを改善するために、まず取り組むべきことは何ですか?

優先度が高い改善策は3つです。①商品画像の圧縮とWebPなどへの変換(ページの容量を減らす効果が大きい)、②使っていない外部タグ・JavaScriptの削除と読み込み順の見直し、③CDNの導入によるサーバー応答の高速化です。PageSpeed Insightsの改善提案と、Search Consoleで「不良」と出ているページから着手すると効率的です。

NEXT STEP

管理画面で、この施策がどう動くか見られます

実際の管理画面を操作した動画と、施策ごとの進め方をまとめた資料をご用意しています。設定の手間と、運用に必要な体制のイメージがつきます。