店舗サイトのスマホ表示速度。満点を目指さずに、まず直す3か所

「サイトが重いと言われたが、どこから直せばいいのか分からない」

店舗サイトでよくある行き詰まり方です。業者に聞くと全部直す話になり、自分で調べるとスコアの話ばかり出てくる。

ここでは公式ドキュメントから、どこまでやれば十分かの線を先に引きます。

速度は順位の要素だと明記されている

まず位置づけです。Googleはこう書いています。

Core Web Vitals は、その他のページ エクスペリエンス要素とともに、Google のコア ランキング システムがランキングを決定する際に考慮する要素です。

一方で、単一の「ページエクスペリエンス シグナル」はあるかという問いには、単一のシグナルはありませんと答えています。速度だけで順位が決まるわけではない、ということです。

重要度についての記述も具体的です。検索語句に一致する内容の濃いページが多数ある場合、その中で順位を上げるには優れたページエクスペリエンスが重要になるとされています。つまり競合が多い検索語ほど効いてくる要素です。

順位より手前の話もあります。遅いページは、読まれる前に戻られます。予約ボタンまで到達しなければ、内容がどれだけ良くても意味がありません。導線の設計そのものはホームページの予約導線はどこでつまずくかに書いています。

覚える数字は3つだけ

指標は3つです。目標値もそれぞれ示されています。

指標	測るもの	目標
LCP	読み込みパフォーマンス	ページの読み込み開始から2.5秒以内
INP	応答性	200ミリ秒未満
CLS	視覚的安定性	0.1未満

計測は Search Console の Core Web Vitals レポート、または PageSpeed Insights で行えます。

満点は目指さない

ここが一番伝えたい部分です。Googleは次のように書いています。

Search Console の Core Web Vitals レポートのようなレポートやサードパーティのツールで良い結果が得られても、Google 検索の検索結果で上位に表示されることが保証されるわけではありません。

続きがあります。SEO上の理由のためだけに満点を取ろうとするのは、有効な時間の使い方とは言えないとされています。

さらに、Core Web Vitals 以外のページエクスペリエンスの要素が検索結果でのランキング上昇に直接貢献することはありませんとも明記されています。HTTPSやモバイル表示は、それ自体が順位を押し上げるわけではない、ということです。

なお評価は一般的にページ単位で行われ、一部サイト全体での評価も実施されるとされています。全ページを一斉に直す必要はなく、流入のあるページから順にで構いません。

まず直す1か所目：ファーストビューの画像

店舗サイトで LCP を決めているのは、たいてい最初に見える大きな画像です。ここに3つの落とし穴があります。

ブラウザは最初のHTMLを読んだ時点で必要な画像を見つけようとします。ドキュメントを読んだだけでは見つけられない例として、次が挙げられています。

• JavaScriptで動的に追加される画像
• src や srcset を隠す遅延読み込みライブラリで読み込まれる画像
• CSSの背景画像が必要な要素

つまりファーストビューの画像に遅延読み込みを付けない、CSSの背景画像にしない、という2点です。「画像は全部 lazy にしておけば速い」という設定は、一番上の画像に対しては逆効果になります。

もう1つ、知っておくと無駄が減る話があります。画像をより圧縮したり WebP や AVIF に変えたりしても、LCPが改善しない場合があるとされています。読み込み時間で浮いた分が、レンダリングの遅延側に移るだけになるためです。圧縮は必要ですが、それだけで終わらせないでください。

参考として、最適化されたページでの内訳の目安も示されています。

サブパート	割合の目安
サーバーの応答（TTFB）	約40%
リソース読み込みの遅延	10%未満
リソースの読み込み時間	約40%
要素のレンダリングの遅延	10%未満

「遅延」と名の付く2つを、できるだけゼロに近づけるという考え方です。

2か所目：レイアウトのずれ

CLSは、読み込み中に表示が動いてしまう量です。主な原因として挙げられているのは次の4つです。

• ディメンションのない画像（幅と高さが指定されていない画像）
• サイズのない広告、埋め込み、iframe
• サイズが指定されていない動的に挿入されたコンテンツ
• ウェブフォント

店舗サイトで実害が出やすいのは1つ目と3つ目です。押そうとした瞬間にボタンが下へ動くと、来店直前の人が別の場所を押します。画像に幅と高さを入れる、後から差し込まれるバナーの場所をあらかじめ空けておく。この2つで大半は収まります。

3か所目：全画面のポップアップ

速度とは別枠ですが、同じページエクスペリエンスの話です。

煩わしいインタースティシャルとダイアログは、主にプロモーション目的で、ユーザーのコンテンツ閲覧を妨害するページ要素と定義されています。よくあるミスとして、インタースティシャルでページ全体を覆うこと、同意や入力のためユーザーを別ページへリダイレクトすることが挙げられています。

一方で、年齢確認のように法的義務があるもの、画面の一部だけを覆う小型バナーは問題にならないとされています。

クーポンやLINE登録の案内を全画面のモーダルで出している店舗サイトは、ここを一度見直す価値があります。問い合わせが発生しない原因の並べ方はホームページから問い合わせが来ないときにまとめています。

まとめ

• Core Web Vitals はランキングの考慮要素。ただし単一のシグナルではない
• 目標はLCP 2.5秒以内、INP 200ミリ秒未満、CLS 0.1未満
• 満点を取ることは推奨されていない。SEO目的だけで追わない
• 評価は一般的にページ単位。流入のあるページから直す
• ファーストビューの画像に遅延読み込みを付けない、CSS背景画像にしない
• 圧縮だけではLCPが動かない場合がある
• 画像に幅と高さを入れる。後から出る要素の場所は先に空けておく
• 全画面を覆うポップアップは避ける。小型バナーは問題にならないとされている

来店前の接点がどう見えているかを外から確認したい方は、無料のMEO診断をご利用ください。店名とGoogleビジネスプロフィールのURLだけで送れます。