EP7 – Core Web VitalsとFIDからINPへの移行

Beyond the Edgeの紹介エピソード7–コアウェブバイタルとFIDからINPへの移行

「Beyond the Edge」のこのエピソードでは、Ishan Anandが、ウェブサイトパフォーマンス評価の重要な指標セットであるGoogleのCore Web Vitalsの変更についてのディスカッションをホストしている。 EdgioのRob WakerlyとEllery Womackが加わり、変更に適応してCore Web Vitalsに合格する方法についての専門知識を共有している。 会話では、最大のContentfulペイント、累積レイアウトシフト、最初の入力遅延などの指標を含むCore Web Vitalsの技術的側面を掘り下げ、ウェブサイト最適化における重要性を強調する。 チームは、キャッシング、画像最適化ツールの使用、キャッシュ制御ヘッダーの調整など、これらの指標を改善するための実用的な戦略について議論する。 また、Core Web Vitalsの最適化が、コンバージョン率やオーガニックトラフィックなどのビジネス成果に与える影響にも触れており、さまざまな企業との実際の事例を参考にしている。 GoogleがFIDをINPに置き換える準備をしている中で、より広範なユーザーインタラクションを考慮したメトリクスである。議論は、これらのメトリクスの先を行き、ウェブサイトが速度と応答性のためのこれらの進化する基準を確実に満たすために専門家の戦略を採用することの継続的な重要性を強調している。

Ishan Anand:こんにちは、Beyond the Edgeへようこそ。現代のデジタルビジネスに影響を与えるトレンドの内外を掘り下げる。 今日、私たちのトピックはコアウェブバイタル、Googleがあなたのウェブサイトの速度をランク付けするために使用するすべての重要な指標。

私はあなたのホストであるIshan Anand、Edgio ApplicationsおよびEdge Platformの製品担当VPであり、トップ企業が最もミッションクリティカルなWebサイトを高速化、最適化、ホストするために使用されている。 今日私はEdgioのプロダクトデリバリーのシニアディレクターRob WakerleyおよびEdgioのエンジニアリングのシニアディレクターEllery Womackによって加わる。 ロブ君から始めよう あなたの経歴とコアバイタルとの関係について教えて。

Rob Wakerly :ねえ、ありがとう、イシャン。 今日は来て嬉しい 私の経歴はテクノロジーコンサルティングで、あらゆる規模の企業や企業向けのカスタムテクノロジーと実装の戦略と提供を含む。 私は2年前にEdgioに加わり、すぐにそれらがビジネスに持つことができる何の大きい影響の少なくとも部分について知るべきであるすべてを学んだ。 顧客や様々な業界が、顧客体験を改善するためにサイト用のバイタルのコアを改善するのを支援する、実装プロジェクトの一部であることはかなりエキサイティングだった。

Ishan Anand:ありがとう、素晴らしい、ありがとう。 エラリー、バイタルズのコアでの経験を教えてくれ

Ellery Womack :ありがとう、Ishan。 私は建築家、エンジニア、Qの私達のチームと一緒に過去3年間Edgioにあった主に私達の顧客がEdgioプロダクトから可能な限り最も価値を運転するのを助けるように。 私たちが行った方法の1つは、顧客と協力してバイタルのコアを改善し、収益の増加とSCOの利益を得ることであり、すべての製品とすべてのプラットフォームでこれを行う。 フィンテック、eコマース、Salesforce、Shopify、何でも、私たちはあなたを助けるためにここにいる。

Ishan Anand:素晴らしい それでは、それを分解して、聴衆のための最初の部分から始めよう。Core Web Vitalsとは何か、そしてなぜそんなに重要なのか。

Ellery Womack氏: 2022年5月、GoogleはCore Vitalsを発表した。Core Vitalsは、ユーザーエクスペリエンスに影響を与えた最も重要な技術的KPIであるとGoogleが感じたものを測定する一連の指標である。 目標はあなたのWebページの速度、応答性、および視覚的な負荷を評価することだった。 最初のメトリクスは最大のContentful Paintであり、これはレンダリングされたページ上の折り目の上に表示される最大の要素の速さを示す尺度である。 これは典型的なアクションの呼び出しと、それがレンダリング時にページ上でどれだけのコンテンツがシフトしているかの尺度である累積レイアウトシフトと同様に。 おそらくあなたのウェブサイトの悪い累積レイアウトのシフトかCLSスコアを誘発する広告の多くがある多くのニュースサイトに行ったことがある。 そして最後に、First Input Delayこれはユーザーが最初の対話をした時の尺度で、タブやクリックのようなものだ。ページがそれに反応して何かを再描画したりレンダリングしたりするのにかかる時間は? そして2024年3月から、FIDはINPまたはInteraction to Next Paintに置き換えられている。これは、ウェブサイト上のユーザージャーニー全体のすべてのインタラクションを調べるものだ。

Ishan Anand:ロブ・エラリーはコア・ウェブ・バイタルとは技術的に何かを分析した なぜ重要なのか説明してくれないか?

Rob Wakerly :ええ、飛び込んでみよう。 Core Web Vitalsで本当に素晴らしいと思うことの1つは、サイトのパフォーマンスについて話す共通のフレームワーク、共通の言語を提供することだと思う。 そしてこれの前にあなたの場所がいかにして実行していたかについて話す大きい方法がなかった。 そして、あなたは、ああ、私のサイトのパフォーマンスが良くないか、読み込みに時間がかかりすぎると言うかもしれない。 でもどうやって測ったの? 共通言語は何だったか知ってる? 実際にはなかった そしてそれはCore Web Vitalsについての強力な事の一つはそれが私達に共通の言語を与える事であり、なぜそんなに重要なのかこれらの事があなたの場所のビジネスの結果そしてビジネスのパフォーマンスにまた巨大な推進力を有するのである。

これがあなたの場所にどのように影響を与えることができるかについて考えるとき、電子商取引サイトへのトラフィックのおよそ43%は有料広告のための有料または直接チャネルとは対照的にGoogleの検索を通って来るなど。 さらに、eコマースの収益のほとんどは、73%が、Core Web Vitalsの影響を受けるサイトを検索して紹介されている人々から来ている。 Core Web Vitalsは検索エンジン最適化の一部であり、Googleの検索ランキングにいる場所であるため。 そしてそれはまたあなたの場所の経験の大きい運転者である。 人々があなたの場所に来るとき、経験を好むかどうか、Core Web Vitalsは測定を助けることを行っている。 そしてよい中心網のバイタルを有すれば、人々があなたの場所を使用するために他を参照することを楽しみ、本当らしいことを行っている。 それらは実際にあなたがあなたの場所とのあなたと持っているあなたのビジネスおよびあなたのオンラインプレゼンスに広い影響を有する。

Ellery Womack氏:ロブが言っていることに加えて、人々がGoogle検索をすると、検索結果のクリックスルーの55%がオーガニック検索結果の上位3つに移動する。 トップ3に入っていなければクリック数の半分以上は届かない これはちょうどあなたのウェブサイトが速いことを確かめることの重要性を強調するために意味され、それらの上の3つの調査結果にとどまるために可能なすべてをしたいと思う。

Ishan Anand:ええ、強調したいのは、Googleがあなたのウェブサイトの速さを測る方法だということ。 しかし、Googleとは独立して、これらの指標を改善することで、顧客体験が向上する。 つまり相乗効果があり非常に有益である その前にhttpアーカイブとChrome User Experienceレポートからデータを取り出してみたところGoogleはトラフィックが十分なサイトのバイタルのコアを公開していてデスクトップサイトの53%がコアバイタルを渡していることを示していたつまり半分弱が失敗している モバイルサイトの45%がコアバイタルを通過している。つまり、ウェブの半分以上がモバイルでの通過に失敗している。 だから、コアバイタルを通過していないウェブの半分をわずかに超えている。 人々は、彼らがパスしない場合Elleryを取得し始めるために何ができるか?

エラリー・ウーマック:素晴らしい コアバイタルを改善するためにできることはたくさんある。その一つはキャッシュだ。 Edgioのようなエッジネットワーク上で、コンテンツをできるだけ多くキャッシュしたい。 これはCSSファイル、画像、HTMLであり得る。 あなたのウェブページのために、特定のデバイスのための右のサイズの画像を右の品質および右のフォーマットで提供するように画像最適化ツールを使用したいと思う。 iPhone用なら、圧縮してそのデバイス用に最適化されるウェブファイルフォーマットを提供したい。

オリジンサーバーが常に適切なキャッシュ制御ヘッダーで応答するように設定されていることを確認する必要がある。そうすれば、ブラウザはこのコンテンツをキャッシュできる期間を知ることができるので、これを取得するためにインターネットに戻る必要がない。 これは時間の経過とともに多くを変更しない静的ファイルのようなファイルのために大きい。 CSS、JavaScript、画像、フォントを考えてみて。 これらは常にブラウザにキャッシュする必要がある。

HTMLドキュメントの先頭にpreloadヘッダーとpreconnectヘッダーを追加してもらいたい。 これが行うことは、あなたのウェブサイトをロードするときに最初に気づくことであるあなたがおそらくロードするつもりであるので、サードパーティの呼び出しの多くを持っているだろうGoogleタグマネージャーやTealiumをロードしようとしているので、あちこちからFacebookやInstagramのピクセルをロードしようとしている。 あなたのウェブサイトにKlaviyoおよび他の購入を知っているようなサードパーティシステムへの依存性があり、後で解決策を支払い、それらはすべてページに資産をロードする必要がある。 そのたびに接続を開くかダウンロードして ページが読み込まれたときにすぐに発生するプレコネクトを追加できれば、ウェブサイトがそのコンテンツを読み込む準備ができたときにロードが少し速くなり、プレロードではレスポンスのストリーミングが可能になり、複数のコンテンツを一度にロードできるようになる。

私たちはLCPまたは最大のContentfulペイントについて話しました。これは、あなたのページ上のアクションやヒーローイメージへの呼び出しを知っている。 preloadタグを加えることによって実際にWebページとのそれをロードすることができ、これはあなたがあなたの最も大きいContentfulペイントを増進するためにすることができる最も重要な事の1つである。 スクリプト管理を使うことも推奨されるので、必須ではないスクリプトにdeferやasyncを追加したり、特定のブラウザイベントが発生したときに動的に注入することもある。 でもこれ以上にできることはたくさんある 我々は、開発者が無料で24時間でWebページを高速化できる5つの方法と呼ばれる私たちのウェブサイトにある記事を書き、ここでポッドキャストとリンクする。 だから私は人々にそれを見てもらうことを強くお勧めします質問があれば私たちはいつもここにいることを知っている

Ishan Anand:ええ、その記事は本当に良い情報源だね。 ロブパスするのはどれくらい難しい? 引用できるコア・ウェブ・バイタルを整流することで企業が達成した成果の例は何か？

Rob Wakerly :そうだね。これは、Crux、Ishanから取得したデータを結びつける前に話したように、Core Web Vitalsをパスするサイトとパスしないサイトを比較すると、顧客にとっての体験という点で目立つ。 例えば、LCPのページ読み込み時間が1秒短縮されれば、コンバージョン率は8.4%以上向上する。 我々は、このトピックについて多くの顧客やビジネス関係者と話をしている。技術チームだけでなく、マーケティングやビジネスサイドの人々も、彼らはそれに興奮している。なぜなら、これが影響を与えるビジネスKPIだから。 例えば、大手マットレス小売業者と協力して、ホームページでLCPを80%改善し、製品詳細ページまたは製品カテゴリページで同様の改善を支援した。 製品詳細ページだけでコンバージョン率が19%向上したことでメリットがあった。 同じような結果がスパングラーキャンディでも見られた 彼らはCore Webの重要な改善を実装し、60%の改善を行った。 そう、彼らは今通過しているし、顧客が彼らの場所を大いに楽しむのを見ている。 私たちは多国籍ファッションコングロマリットと協力して、LCPを45%高速化し、そのサイトでユーザーあたりの収益が76%増加した。

我々は、技術への単純な変更によって、我々はそうではない、これは、ユーザーエクスペリエンスやサイトのデザインを変更してもいないことを、私たちの顧客と一貫してこれらの種類の結果を見る。 これはパフォーマンスの最適化が特にこの種の増加をもたらし、収益やコンバージョンだけでなく、オーガニックトラフィックも増加する。 私たちは靴のカーニバルがオーガニックトラフィックの22%の増加を達成するのを助けた、これは再びSEOに結びつくから。 つまり、さまざまなビジネスKPIに幅広い影響がある。 顧客がこれらのプロジェクトに参加でき、ROIがすぐそこにあるとき、それは本当に刺激的である、それはである。

Ellery Womack :ロブがこれらの単純な変更を呼んだのを聞いたことがあるかもしれない。 基本的には80/20または90/10のルールのようなものがあり、ここではコアウェブバイタルを改善し、SEOを改善するためのそれらの利点のほとんどはほとんど努力を要しない。 チューニングを継続して利益を得たいお客様には、作業量が増えている。 しかし、これらのケースの多くでは、前もって少量の作業で利益のほとんどを達成することができる。

Ishan Anand:そうだね、まさにそこに行くつもりだったんだ。 この時代には、AGI、インテリジェントなチャットボット、およびwhiz bang機能があり、サイトの速度を向上させることは、多くの場合、大規模な種類の変換イニシアチブよりもはるかに容易に、実際に有形のROIをもたらす低いぶら下がった果実のようなものである。 特に現在の経済情勢の中では、収益を増やす方法として検討する価値がある。 Edgioは、企業がコアWebバイタルを常に把握し、改善を行うのにどのように役立つか？

エラリー・ウーマック： Core Web Vitalsは、Edgioが支援できるサイトの配信速度と、配信後のサイトのコードのパフォーマンスの両方に影響されるため、適切なプラットフォームと適切な専門知識が必要であり、多くの場合、その両方が必要である。 私達は両方の独特なセットを提供する。 あなた自身で実行できる高速エッジ開発プラットフォームだけでなく、私たちのプロのパフォーマンスエキスパートであるRobと私が取り組んでいるチームは、コード内のどこにいてもCore Web Vitalsの課題を解決するのを助ける。 私たちはあなたのウェブサイトを非常に迅速に配信することを確認したいだけでなく、配信されているコンテンツがウェブブラウザ用に最適化されていることを確認したいので、Googleに報告されているデータが説得力がある。 そして、あなたのウェブサイトを閲覧しているユーザーは、彼らが望んでいる結果を得る。 私達はそれらが私達の顧客がすることを助けることができる何かである私達の顧客ができる何かである、速くページをロードし、サブ秒のページ間の遷移を有することを望む。

Ishan Anand:それは、ネットワーク上でもコード上でも、スタック全体の真のパートナーになれることだ。 Core Web Vitalsとは何か、なぜそれほど重要なのかを知ったところで、Core Web Vitalsで起こった最近の変更、FIDからINPへの移行について話してみよう。 エラリー、それを説明してくれないか?

(エラリー・ウーマック)もちろん 最初の入力遅延(FID)から次のペイント(INP)への変更は2024年3月に行われた。 ここでの主な違いは、あなたのウェブページとインタラクションの最初のインタラクションのみを測定するFIDである。 Next Paintは実際にあなたのウェブページで起こった最初の50のインタラクションを見て、そのグループから最悪のものを取り除き、その後は次の50を見る。 だから、実際には達成するのはずっと難しい指標だ。 人々はページに着地し、通常同じ行動を最初に取る。 例えば、eコマースサイトのホームページにアクセスすると、ナビゲーションを見てカテゴリに移動し、カテゴリを実行できるようになる。 製品タイルをクリックしてPDPに行き、そこからカートに追加すると、この幸せなパス。

Interaction to Next Paintでうまくスコアを付けるのは本当に簡単だが、このINPへの変更であなたを傷つけるような、直感的ではない他のものがある。 私たちが顧客を助けることで見たのは、幸せな道の一部ではないことがあなたを悩ませることである。 例えば、あなたがサインアップモーダルを持っているかもしれないし、それを閉じるためにクリックすることは遅いかもしれないし、報酬のためにサインアップするためにフォームであなたの電子メールを送信することは遅いかもしれない。 PLPのクイックビューのようなものは開いたり閉じたりするのに遅い、またはスウォッチを変更するのに少し時間がかかる次の画像をロードする。

要素をクリックする前にブラウザにそのコンテンツをロードしてキャッシュし、その遷移が非常に迅速になるようにする予測プリフェッチのような、それを助けることができるツールとプロセスがある。 でも、ホームページにあるIの幸せな道を見てみると、PLDやPDPなどを見てみると、それを最適化するのはとても簡単だ。 どんな相互作用が起こり得るのか、またこれらがマイクロバイタルにどのような影響を与えるのかを見つけるのは難しい。 また、Edgioの顧客は無料で、INPに影響を与えるすべてのインタラクションを追跡してレポートするリアルタイムユーザーモニタリングの略であるRUMツールを持っている。 どのページ、どのインタラクションが最も悪いINPスコアを引き起こしているかを特定するのに役立つので、チームは優先順位を付けて修正することができる。

Ishan Anand:実際に掘り下げて、指摘されたことを強調したい。新しい指標だけでなく、古いFIDよりも渡すのが難しいということ。 だから、あなたは突然、ダイムを渡さないように通過から行くことができ、それを実現しない。 ある意味、これをGoogleの大きなアップデートのように扱う。 突然すべてが再ランクされ、空が落ちているSEO分野にいるならば、回復する方法を理解する必要がある。 これは警告の時間を与えてくれて文字通り数字を教えてくれた INPに失敗したら突然コアバイタルに失敗してランキングに影響する 手を差し伸べることは間違いなく助けることができる。

最初は理解していなかったコアウェブバイタルを扱うこのプロセスを通して学んだ誤解や多分何かである。 それは聴衆のための有用な学び、ロブ。

Rob Wakerly : Core Web Vitalsについて少し調べたり、それについて話せる人に話したりすると、かなり早くアイデアが得られると思う。 でももう一つ知っておくべきことは「これでどうしよう？」 「どうやって測定するか?」 どうすれば開発フローに組み込むことができるか？ サイトを持っていて、それらを改善したいとしよう。 Elleryは改善のためにできることをいくつか話したが、その継続的な測定を行い、それをどのように伝えるかについて、正しい方法は何か?

Ellery氏は、サイト上でリアルタイムを測定するRUMツールを指摘した。これは、プロダクションサイトやライブサイトに最適である。 でも他にも考慮すべきことがある あなたのサイトの常に新しいバージョンを開発しているので、それら2つをどのようにテストするか。 テストのために本番環境に移行するまで待つ必要はない。 ねえ、私のパフォーマンスは、少なくとも以前と同じか、それともそれ以上か?

私が指摘したいのは合成テストで、合成テストは非常に強力である。なぜなら、どんな環境でも実行できるからだ。 開発環境、QA環境、ステージング環境でCore Web Vitalsを測定するための模擬テストを実行できる。 どんな新しいリリース候補でも、それがどのように動作しているかを見ることができ、私が述べたように、それが以前のバージョンと同じか、またはより良いパフォーマンスをしていることを確認する。 あなたがしたいと思う最後の事があなたの場所の変更を導入し、それが手遅れになるまであなたの性能をタンクさせ、それを見つけないので。 だから合成テストは重要だ

私達はそれがリアルタイムであり、交通があなたの場所でしているものを見ることができるのでRUMの利点について話した。 そして三つ目のカテゴリーは、おそらく最も重要なのは実際のChrome UXレポートだ。cruxは何をGoogleが28日間かけて測っているのかをサイトのパフォーマンスに基づいて測っているのかを測る略語だ。 そしてそれは彼らがSEOのために使用するものであるのでとても重要である。 だから、あなたがグーグルが見ているものを見て、有機的な結果であなたをランク付けする方法を見たい時は、あなたの核心が良い形になっていることを確認して、そうでないなら、それに対処できるように、それに気づいておいて欲しい。 これらの様々な種類のパフォーマンステストやツールは、これら全てに別の層を追加するものであり、それらがどのように機能し、どのように使用するかを理解するのに本当に重要である。

Ishan Anand:ええ、あなたが指摘しているのは回帰だ。例えば、パフォーマンスを向上させることができて、突然、あなたが言ったように実際に変更を加えることが非常に簡単になり、突然パフォーマンスを元に戻すことができるようになった。 それは非常に頻繁に起こり得る。 そこでRUMのようなツールは、コアバイタルを超えた合成試験に非常に価値がある。 Core Web VitalsはGoogleへの検索ランキングを向上させるが、一般的なカスタマーエクスペリエンスにどのようなメリットがあるかについても説明した。 もう少し詳しく調べてくれないか?

Rob Wakerly :顧客体験に関するその他の事柄。 Core Web Vitalsに興味があれば、おそらくあなたの場所のキャッシュヒット率に興味があるべきであり、ある種のキャッシング層を持ち、あなたの場所の静的および動的な内容のためにそれを使用したいと思う。 なぜなら、もしあなたがコンテンツ配信ネットワークのようなキャッシング層から顧客にサービスを提供しているなら、それはよりパフォーマンスが高くなるだろうし、それがパフォーマンスを向上させる鍵となる方法だからだ。Elleryが前に話したように。

ユーザーエクスペリエンスもあり、パフォーマンスは顧客体験の1つの側面に過ぎないことを知っている。 そこで、ある種のユーザーエクスペリエンスの監査や評価、競合他社とのベンチマーク、分析のチェックなどを考えたいと思うかもしれない。 パフォーマンスと分析は密接に関連していると言えるだろう。 パフォーマンスを改善する場合は、分析測定値をすぐにフォローアップして、コンバージョン率、直帰率、ユーザーあたりの収益など、気になるすべてのビジネスKPIが分析にどのような影響を与えるかを確認する必要がある。

そして最後にA/Bテスト。 パフォーマンスに変更を加えると、A/Bテストだけでなく、私の変更はより速くなるが、コンバージョン率やその他のKPIの側面から古い経験にどのくらい勝っているかを確認できることが多い。 そのため、ABテストでパフォーマンスをテストして、ビジネスへの影響を確認できる。 もちろんあなたの側の他の事をABテストすることもできる。

Ishan Anand:実際のA/Bテストでは、プラットフォーム固有の特徴として、パフォーマンス自体をA/Bテストできることが挙げられるが、他の多くのA/Bテストツールはパフォーマンスを低下させる可能性があることを指摘する価値がある。

一歩下がって、私がGoogleが私を送っていること私の交通レベルのそう多くがそれに依存しているので重要な網のバイタルがいかにであるかについてのメッセージを持っていると言ってみよう。また非常に私の顧客経験を増進する。 私が私の中心の網の生命体を増進するために私が知っているように、技術か場所の所有者取るべきである次のステップは何であるか。

Rob Wakerly : CruxレポートやChrome UXレポートを見て、バイタルのコアがどのようにパフォーマンスしているかを確認したい。 知らなければ、今は見てみるか、または尋ねる大きいチャンスである。 あなたが約考えたいと思う他の事はいかに重要であるかサイトおよびあなたのユーザーエクスペリエンスへの性能であるかである。 セキュリティや全体的なユーザーエクスペリエンスについて考える絶好の機会でもある。 これらは、WebサイトやWebアプリをサポートしているテクノロジーやデジタルチームと話し合って調整する必要があるものである。

パフォーマンステストを実行する。 重要なデータが何を伝えているかだけでなく、新鮮なパフォーマンステストが何を伝えているかを考えてみて。 サイトによってパフォーマンスが異なるか ポートフォリオを所有している場合、低い環境ではパフォーマンスが異なるか。 そこから何を学べるか？ 「画像を最適化しているか?」のチェックをしていることを確認してくれ キャッシュ戦略とは? もしあなたがそれらの事について意図的でないなら、あなたのサイトや経験のそれらの面について、それに対処したり、より意図的になったりする機会があるから。

Ishan Anand:素晴らしい Core Web Vitalsの旅を始めたばかりの方でも、深く理解して助けが必要な方でも、ぜひお気軽にチェックしてみてほしい。 私たちは、その合成テストを行うか、私たちのチームに連絡するのを助けるEdgio Optimizeツールを持っている。 喜んで手伝う それは今日のCore Web Vitalsポッドキャストである。 ElleryとRob、そしてBeyond the Edgeに参加してくれたオーディエンスに感謝する。 また次の機会に。

Edgio Optimizeでサイトのパフォーマンスをチェック