ページ速度・Core Web Vitals

Core Web Vitalsの基準は何秒？

Googleが「良好」とみなす基準は、LCPが2.5秒以下、INPが200ミリ秒（0.2秒）以下、CLSが0.1以下です。3つの指標がすべて「良好」で、はじめてそのページはCore Web Vitalsに合格したとみなされます。

基準は1回の訪問ではなく、訪問の75パーセンタイルで判断します。簡単に言えば、お客様100人のうち75人以上が基準内の速さを体験していれば「良好」です。スマホとパソコンは別々に計算します。

以前は最初のクリックへの反応だけを測るFIDという指標がありましたが、2024年3月から、すべてのクリック・タップへの反応を見るINPに置き換わりました。古い記事でFIDの基準を見かけたら、今とは違うことを覚えておいてください。

PageSpeed Insightsで自分のホームページの速度を測るには？

Googleの無料ツールPageSpeed Insightsにアドレスを入れるだけで、すぐに測れます。結果画面は実際の訪問者の記録と、機械で測り直した診断の2つに分かれているので、両者を区別して読むことがポイントです。

1. 01pagespeed.web.devを開き、自分のホームページのアドレスを入れて「分析」を押します。
2. 02結果が出たら、まず「携帯電話」タブを見ます。お客様のほとんどがスマホから訪れるからです。
3. 03上部の「実際のユーザーの環境で評価する」で、LCP・INP・CLSが「良好」かどうかを見ます。Chromeユーザーの直近28日間の記録なので、いちばん信頼できます。
4. 04訪問者が少ないと、実際の記録が「データなし」と表示されることがあります。その場合は下の「パフォーマンスの問題を診断する」のスコアを参考にします。
5. 05診断の下にある画像・JavaScript関連の改善項目をスクリーンショットしておくと、制作会社に正確に依頼できます。
6. 06トップページだけでなく、メニュー・予約・アクセスのように、お客様がよく見るページもひとつずつ測ってみましょう。

PageSpeedのスコアが測るたびに違うのはなぜ？

下側の診断スコアは、Googleのサーバーがその瞬間にページを読み込み直して計算した値なので、サーバーの状態やネットワークによって数点ずつ上下します。1回測った数字より、何度か測った傾向を見るのが正解です。

広告・チャット・口コミウィジェットのように外部から読み込むコードがあると、相手側のサーバーの状態によって結果がさらに大きくぶれます。スコアが急に下がったら、最近追加した外部コードから疑ってみてください。

100点にこだわる必要はありません。Googleも、検索のためだけに完璧なスコアを追い求めるのは、時間の有効な使い方ではないかもしれないと案内しています。「実際のユーザーの環境」が「良好」なら、十分きちんと管理できています。

上の実際の記録と下の診断スコアが食い違うのも自然なことです。実際の記録は多くのお客様のスマホと通信環境を数週間分集めた値で、診断は決まった1つの条件で測り直した値です。両者が違うときは、お客様が実際に体験した側である実際の記録を優先して信じてください。

ホームページが遅くなるよくある原因は？

小さなお店のホームページが遅くなる原因は、たいてい公開後にひとつずつ追加されたものです。最初は速かったのに、数か月のうちに写真やウィジェットが積み重なって遅くなるケースがよくあります。

原因によって悪化する指標が違います。重いメイン写真はLCPを、重い外部コードはINPを、サイズを指定していない写真や遅れて表示されるバナーはCLSを悪くします。

原因を探すときは、ひとつずつ外してみるのがいちばん確実です。最近追加したウィジェットを一時的にオフにして測り直すと、そのウィジェットがどれだけ遅くしているかが数字でわかります。どうしても必要なウィジェットなら、最初の画面が表示されきった後に読み込むよう変える方法もあります。

• スマホで撮った元の写真を縮小せずにそのままアップしている
• 最初の画面に自動再生の動画や大きなスライドを置いている
• チャット相談・Instagramフィード・口コミウィジェットを何個も付けている
• 使っていない計測コードや昔の広告コードが残っている
• フォントを何種類も読み込んでいる、またはお客様から遠い場所にある遅いサーバーを使っている

速度改善を制作会社に任せるとき、何を依頼すればいい？

「速くしてください」よりも、「どのページのどの指標を良好に」のように目標を決めて依頼するのがおすすめです。そうすれば作業の前後を比べられ、完了したかどうかを判断する基準ができます。

よくある失敗は、スコアを上げるために本当に必要な内容を消してしまうことです。予約ボタンや地図を外して速くなったのなら、お客様にとってはむしろ損です。パソコンだけで確認してスマホを見ないのも、よくある失敗です。

• 改善するページの一覧と目標の指標（例：トップページのスマホLCPを「良好」に）
• 作業前後のPageSpeed Insightsの結果のスクリーンショット
• 現在付いている外部コード・ウィジェットの一覧と、必須なものの印
• 新しい写真をアップしたとき自動で縮小してくれるか
• 保守管理中に速度がまた悪くなったら、誰がいつ確認するか

小さなお店のホームページでは、速度をどう確保する？

いちばん効果が大きいのは最初の画面です。お客様が最初に目にするメイン写真1枚を軽くし、最初の画面より下の写真はスクロールしたときに読み込むようにするだけでも、体感が大きく変わります。

ピラティススタジオなら、最初の画面のレッスン動画をメイン写真に替え、動画は下の「レッスン紹介」に移せます。飲食店なら、メニュー表の写真を何十枚も載せる代わりにメニューを文字で書き、看板メニューの写真だけを置けば、速くなるうえ検索にもよく読み取られます。

写真を軽くしてもあまり改善しないなら、サーバーを疑ってみる必要があります。診断で「サーバーの応答が遅い」という項目が出たら、ホスティングのスペックやサーバーの場所を点検し、お客様に近い場所からファイルを届けるCDNを使うのも一つの方法です。

ISSYMOは公開前の基本設定として画像最適化と速い最初の画面を組み込み、保守管理のサブスクリプションでは、重い画像が新たに増えていないかを毎月点検します。