← すべてのガイド

ナビゲーションとページ速度 — Core Web Vitalsを損なわないメニューアプリの選び方

Core Web Vitalsとは何か、なぜ気にすべきなのか

Core Web Vitalsとは? LCP・CLS・INPをわかりやすく解説し、Googleが定める「良好」のしきい値と、この3つの指標がストアのSEOと売上にどう影響するのかを説明します。

Core Web Vitalsとは何か、なぜ気にすべきなのか

オンライン販売を始めたばかりの頃、私はページ速度なんて開発者が考える問題だと思っていました。ところが、コンテンツは何も変えていないのに、ストアの検索順位が下がってしまったのです。そこでようやく腰を据えて、ゼロから勉強することにしました。すると、Googleには顧客の実際の体験を測る3つの指標があることがわかりました。それがCore Web Vitalsです。この3つの数字を理解するのは難しくありません。そして、それはあなたのストアが顧客の目に — そしてGoogleの目に — 速く映るか遅く映るかを教えてくれます。

この記事では、3つの指標をわかりやすい言葉で説明し、Googleが公表している「良好」のしきい値を示したうえで、なぜそれが順位と売上にとって大切なのかをお話しします。

Core Web Vitalsとは何か

簡単に言えば、Core Web Vitalsとは、実際の人がウェブページを使ったときに、それがどれだけ速くスムーズに動くかをGoogleが判断するための3つの指標です。理想的な実験室のマシンで測るのではなく、ストアを訪れる人が実際に使っているスマホやネットワーク上で測られます。

3つの指標は、LCP(ページがすぐ表示されるか)、CLS(レイアウトが飛び跳ねないか)、INP(タップしたときにすぐ反応するか)です。それぞれが、顧客がページを開いたときに抱く具体的な感覚に対応しています。

Googleは75パーセンタイル — つまり訪問の75% — をもとに評価し、モバイルとデスクトップを分けて見ます。わかりやすく言えば、ほんの一部の運の良い訪問だけでなく、大半の顧客がそのページを快適だと感じて初めて「良好」と認められるということです。

LCP — ページがすぐ表示されるか、それとも遅いか

LCPはLargest Contentful Paint(最大コンテンツの描画)で、画面上で最も大きな要素が表示される瞬間を指します。たいていはページ上部のバナー画像、メインの商品画像、あるいは大きな見出しのブロックです。顧客がそれを見たとき、「ページが読み込み終わった」と感じます。

Googleによれば、良好のしきい値は2.5秒未満です。4秒を超えると「不良」とみなされます。その間はすべて「改善が必要」です。

想像してみてください。顧客がFacebook広告から商品リンクをタップし、道の真ん中に立って真っ白な画面を待っている場面を。1秒過ぎるごとに、その人が離脱する可能性が積み上がっていきます。画像が重くなりがちなファッションやコスメのストアでは、LCPが最も遅くなりやすいポイントです。

LCPを遅くする原因として多いのは、重すぎて圧縮されていない画像、ページを開いたときにバックグラウンドで動きすぎているアプリ、あるいはメインのコンテンツを表示する前に余計なものを次々と読み込むテーマです。

CLS — レイアウトが飛び跳ねないか

CLSはCumulative Layout Shift(累積レイアウトシフト)で、読み込み中に要素がどれだけ動くかを測ります。Googleによれば、良好のしきい値は0.1未満です。

これは誰もが一度は経験したことのあるイライラです。「カートに追加」をタップしようとした瞬間、バナーや遅れて読み込まれた画像が割り込んできてボタンが下に押しやられ、指が違う場所をタップしてしまう。ときには広告を誤ってタップしてしまうこともあります。それがまさにレイアウトシフトです。

メニューはおなじみの犯人です。ナビゲーションバーがコンテンツの後から読み込まれると、顧客が読んだりタップしたりしているまさにその瞬間に、その下にあるすべてを押し下げてしまうことがあります。顧客はその感覚を言葉にできませんが、ごちゃごちゃしたページを見て信頼を失います。

CLSを減らす一般的な方法は、画像・バナー・メニューのためにあらかじめスペースを確保しておくことです。そうすれば、それらが読み込まれたときに、すでに用意された枠に収まり、ほかの部分を押しのけることがありません。メニューアプリを選ぶときは、表示されるときにコンテンツを飛び跳ねさせないものを選びましょう。

INP — タップしたときにすぐ反応するか

INPはInteraction to Next Paint(次の描画までのインタラクション)で、顧客が操作(タップ、タッチ、入力)してから画面が反応するまでの遅延を測ります。Googleによれば、良好のしきい値は200ミリ秒未満です。

覚えておきたい点が一つあります。INPは、Googleによれば2024年3月12日に、Core Web VitalsのなかでFID(First Input Delay)に正式に取って代わりました。理由は、FIDが最初のインタラクションだけを測っていたのに対し、INPはセッション全体のすべてのインタラクションを追跡するため、より実態に近いからです。FIDに言及する古いドキュメントを読んだとしても、今気にすべき数字はINPです。

INPは「このページはもたつくな」という感覚と密接に結びついています。顧客がスマホでハンバーガーメニューを開こうと1回タップし、0.5秒後にようやくメニューが開く。その0.5秒のあいだに端末が固まったと思い、もう一度タップし、そしてイライラする。メニューがバックグラウンドで動かすコードが多いほど、この遅延はひどくなります。

私がインストールしていたメニューアプリに本気で注意を向け始めたのは、このときでした。私はNavi+(naviplus.io)に乗り換えましたが、その理由の一つは、ページを遅くしないように最適化されているからです。モバイル下部のTab BarメニューやSlide Menuでは、顧客が直接タップしたときの反応の良さがINPに影響するため、軽量なアプリならこの数字を抑えやすくなります。

なぜCore Web Vitalsを気にすべきなのか:SEOと売上

率直な疑問です。この3つの数字は気にする価値があるのか、それとも単なる技術的な話なのか。

価値はあります。Googleは、Core Web Vitalsを含むページエクスペリエンスがランキング要因であると明言しています。最も重要な要因ではありません — 良いコンテンツが依然として土台です — しかし、2つのページのコンテンツが同じくらい良いとき、速度こそが、どちらを上に置くかをGoogleが選ぶ決め手になり得ます。遅いストアは、まさにあなたが競っているキーワードで、より速いページに簡単に負けてしまうのです。

その連鎖はかなり単純です。遅いストアは順位が下がり、順位が下がればオーガニックの流入が減り、流入が減れば注文が減る。広告を出さずにSEOに大きく頼っている販売者にとって、これは漏らしたくない無料の顧客源です。

速度は順位に影響するだけでなく、コンバージョン率にも影響します。Baymard Instituteによれば、ECにおけるカート放棄率の平均は約70%です(50件の研究をまとめた数字です)。原因はさまざまですが、読み込みが遅かったりカクついたりするページが助けにならないのは確かです。顧客がすでにカートまでたどり着いていながら待たされたり、レイアウトが飛び跳ねて誤タップしたりすれば、離脱する確率は上がります。

救いなのは、この3つの指標が測定でき、改善できるということです。当てずっぽうにする必要はありません。Google Search ConsoleかPageSpeed Insightsに行き、ストアのURLを入力すれば、ツールがLCP・INP・CLSの現状と、どこが赤信号になっているかを教えてくれます。

忙しい人のための実践的な順番です。

  • 画像が重すぎないかを確認する(LCPに影響)。
  • インストールしているアプリを見直し、バックグラウンドで多くのコードを動かしているものを探す(INPに影響)。
  • メニューやバナーが読み込み時にコンテンツを飛び跳ねさせていないかを確認する(CLSに影響)。

多くのストアは時間とともにアプリを積み重ねていきますし、メニューはすべてのページに表示されます。だからこそ、レイアウトを押しのけない軽量なナビゲーションアプリは、検討する価値のある投資なのです。

自分をエンジニアに変える必要はありません。この3つの数字が顧客の感じ方について何を語っているかを理解し、定期的にチェックし、ツールを選ぶとき — とくにすべてのページに表示されるメニューアプリを選ぶとき — それがストアを遅くしていないかに目を向ければ十分です。

この記事は、より大きなガイドナビゲーションとページ速度 — Core Web Vitalsを損なわないメニューアプリの選び方の一部です。

シェア Facebook X