パブリッシャーのためのCore Web Vitalsガイド
パブリッシャー組織全体を通したサイトパフォーマンス向上戦略
パブリッシャーの皆様は、民間あるいは公的機関による新しいルールや規制に基づいて自社サイトや戦略を調整することに抵抗はないと思います。GoogleのCore Web Vitals(CWV)もこの種の変更の1つですが、調整や導入について煩雑な印象をお持ちの方もいらっしゃるかと思います。しかしこれは長期的な視点で見たときに、パブリッシャー、広告主、ユーザーなど、すべてのステークホルダーをサポートするために設計されたものであると言えます。
Outbrainのパブリッシャー＆プラットフォームVPを務めるStephanie Himoffは、「パブリッシング業界の発展において、ユーザー体験は常に最優先事項であり続けることが必要です。」と述べています。「最高のユーザー体験を提供しサイトパフォーマンスを最適化するために、CWVのようなツールのベストな活用方法を理解することが重要です。」
CWVを利用することで、パブリッシャーはサイトのパフォーマンスを向上させることができ（従って、ユーザーはアクセスしやすくなります）、つまりパブリッシャーが管理、運営するサイトはページ読み込みや機能面で、より優れたユーザー体験の提供を実現することができます。パブリッシャーではエンゲージメント向上が期待できる一方で、ユーザーもまた、その恩恵を受けることができるのです。さらに、膨大な情報源を頼ってGoogleのサイトパフォーマンスの定義や評価を探るのではなく、よりビジネス的な視点で明確なKPIを確立できるようになるでしょう。この記事では、優れたユーザー体験と実体的な成果を同時に達成するために、CWVを含む戦略を活用する方法をご紹介いたします。
——————————————————————————————————
Core Web Vitalsの概要
CWVには3つの要素があり、それぞれがパブリッシャーページ上のユーザー体験に関係する要素となっています。
1つ目は、LCP（ Largest Contentful Paint ）です。ページのメインコンテンツの読み込み時間のことを指し、ページの読み込み速度を測定しています。この指標はページのコンテンツが読み込まれ、オーディエンスが楽しめるようになったタイミングを判断するものです。LCPのスコアを上げるには、すべてのページ要素がすばやく読み込まれるようにする必要があります。
２つ目は、FID（First Input Delay）です。サイト訪問者がサイト内でアクションを行ってから応答までにかかる時間を指します。これはインタラクティブ性を測定しており、応答があるまで何度もクリックする必要がないページ上でユーザーとスムーズな双方向のやり取りを実現するためのものです。ユーザーが操作をする前にインタラクティブな要素が迅速にレンダリングされ、クリック可能な要素が他の読み込み時間のかかる要素を待たずにユーザーが操作できるようにする必要があります。
最後3つ目は、CLS（Cumulative Layout Shift）です。これはユーザーが誤ってページ要素をクリックする可能性がある突然のレイアウト移動や変更を指します。この視覚的安定性についての指標では、ページレイアウトに影響を与えるインタラクティブな要素を迅速に読み込むこと、ビューポートに表示された後にページの構造を変更しないようにすることが重要になります。
——————————————————————————————————
Core Web Vitals に論理的かつ実用的な視点を：
当初、CWVに関する認識は比較的低く、初期アップデートに備えていた企業はわずか4%程度でした。Outbrainのサプライプロダクト管理部門を担当しているVirginia Smithは「Core Web Vitalsは難解な印象を与えるかもしれませんが、実際には非常に論理的で明快です。」と述べています。「1つ目に、コンテンツを効率的にロードすること。2つ目に、一度読み込んだページの調整や変更をしないようにすること。理由はユーザーが不快に感じるからです。3つ目に、ユーザーとコンテンツの双方向のやり取りを実現することです。私たちは皆、ページの反応がないために何度もクリックをした結果、突然沢山のウィンドウが開いてしまった経験をしたことがあると思います。」
しかし、これらの指標を論理的に定義できたとしても、パブリッシャーは各CWVのニュアンスを理解するためのツールやパートナーが必要です。多くの広告主は関連性の高いユーザーへのアプローチ強化やダイナミックな広告を目標としていますが、パブリッシャーは、CWVスコアを理想的な範囲内に抑えることで魅力的なサイトを提供すると同時に、強力なサイトパフォーマンスを維持することが可能です。
パブリッシャーは、サイト上の広告によって CWV スコアが悪影響を受けることを避けるため、広告主に対するガイドラインを設ける必要があるかもしれません。例えば、最新のトレンドに対応するためにできるだけ高解像度の画像や動画を掲載し、とてもダイナミックな広告フォーマットを使うことに重きを置いている広告主のケースなどです。
パブリッシャーは、常に現実的な視点を持っておくことが重要で、ベストプラクティスや実現可能性を注意深く見ておく必要があります。軽量な画像や動画ファイルを活用するなど、ページ読み込みに影響を与えることなく高解像度の画像や動画を掲載できる方法を模索することも非常に重要な要素です。
施策とインサイト：
- CWVの取り組みにおけるシンプルな方法は、ページの読み込みとスムーズな双方向のインタラクションを確認した後、読み込みが完了するまでは静的な状態でページを維持することです。特にダイナミックコンテンツへの要望が強い広告主とのお取引が多いパブリッシャーは、サイトが動かなくなってしまう事態を防ぐため、画像と動画ファイルの軽量化に注力すべきです。
- 広告以外のコンテンツについては、画像を最適化したり圧縮をすることで画像ファイルのサイズを縮小するという方法もあります。
- Web.devでは、CWVの概要やスコアの事例、読み方などをわかりやすく解説しています。
——————————————————————————————————
組織全体でサイトの最適化について明確な理解を確立する：
プロダクトチームや技術チームがCWVを正しく理解していても、社内のどこかで、結果的にCWVスコアにダメージを与えるような実装をしようとしているケースは、組織としての対策が十分であるとは言えません。こうした状況についてStephanie Himoffは「これについては連帯責任になりますので、きちんと対応することが必要です。」と述べています。「オープンウェブを発展させるためには、ユーザー体験は常に第一目標である必要があります。パブリッシャーは、コンテンツの表示方法だけでなく、コンテンツへのエンゲージメントにも同等の時間を割くべきなのです。」と話しています。
サイトの更新に関しては、ビジネスチームが実装の変更に伴うニーズを開発チームに具体的に共有することが不可欠です。そうすれば開発チームは、広告主が目標としていることを理解することができ、ビジネスチームもまた他のチームがCWVについてどのように考えているかを把握することが可能になります。「Core Web Vitalsの担当部門は、収益化を管理するチームまたはページ上のアセット管理をしている収益関連のチームに帰属していることが多いです。」と、Outbrainでプロダクトのプライバシー・コンプライランスをリードしているDoron Lyabockは話しています。「つまり、異なる目的を持つであろうページのウェブ開発者とは、必ずしも足並みをが揃っているわけではないのです。」
ここからは、コンテンツの安定性を測定するCLSについて更に詳しく見ていきましょう。パブリッシャーにとって、このスコアの向上は特に難しい点です。なぜなら、ページ上に存在するサードパーティ要素の影響を受ける可能性が非常に高いからです。「すべての関係者間で明確なコミュニケーションを取ることにより、最適化の内容とCLSにかかるコストとのバランスを取ることが可能になります。」とDoron Lyabockは続けます。「パブリッシャーは、各サービスのコストやカバー範囲の理解、CLS削減に必要な仕組みなどを理解することが必要になります。そして、開発担当者とWeb Vitalsについてのコミュニケーションを取ることは、コストを理解するために必要不可欠なものとなるでしょう。」
開発者側の視点に立つと、ユーザーがダイナミックな表示手法を重要な要素として捉えているにもかかわらず、CWVはより静的な環境を強く押し出そうとしているように思えるかもしれません。従って、目標とすべきは、CLSを完全に防ぐのではなく、最小限に抑えることでしょう。ビジネス的には最適と言えない直感的な変更を避けるためには、フィールドデータを取得し活用する取り組みが必要です。オーディエンスは、様々なデバイス、ネットワーク、時間帯などでウェブサイトを利用しており、サイトはありとあらゆる基準に基づいて様々なパフォーマンスとなります。
したがって、CWV のようなツールに対して確実な負荷テストの設計と実行を行う場合は、コントロールテストだけではなくフィールドデータ（完全匿名化）を含めることが重要になります。そうすることによって、より正確に実環境に則したスコアを反映させることが可能となります。
「Web Vitalsでは、2種類のデータを扱っています。1つはラボデータで、特定の環境におけるデバイスに、より特化したデータを取得しています。」とDoron Lyabockは述べています。「このデータは、必ずしもWeb Vitals全体について明確な見通しを示すものではありませんが、開発者にとっては良いテスト環境になっています。実際のユーザーモニタリングによるページ上のライブトラフィックから得られるシグナルを取得する、というフィールドデータもあります。（完全に匿名化されています）そしてこれらのインサイトを分析することで、Web Vitalsに問題がある箇所をより正確に特定することができるのです。」
施策とインサイト:
- サイトの最適化とCWVへのアプローチはチームによって異なるため、ビジネスチームから開発担当まで、関係者間で頻繁かつ透明性の高いコミュニケーションをとることが重要です。
- サイトの更新を実施する場合、最適化する内容とサイトのCLSスコアに与えるコストのバランスを取ることが不可欠です。
- CWVテストが実環境におけるユーザーのアクセス状況を反映していることを実証するため、フィールドリサーチを実施しましょう。匿名化データを分析することによってさらなる最適化を行うことができます。
——————————————————————————————————
複数ソースを用いてスコアをモニタリング、調査する：
CWVはウェブサイトと同様にダイナミックなものです。サイトの要素はページごとに、そして更新の度に変化することが多いため、時間をかけてモニタリングする必要があります。
CWVのスコアは、サイトの実態に基づく平均値を使用して測定されますが、ページやユーザーによって数値が異なる場合があります。CWVスコアに影響を与える要因には、オーディエンスの多様性やサードパーティが提供する要素などがあります。サイトは、オーディエンスが接続する際に使用するあらゆるデバイスとウェブ接続に最適化されている必要があります。
そして、サイトを構築する際は、様々なタイプのページで異なる編集要素やサイト要素が使用される可能性があります。これは、サイトのセクションやページによって測定される指標が異なる可能性があることも意味します。そのため、サードパーティとの連携や技術上の繋がりがある場合は、CWVのスコアに直接または間接的に影響を与える可能性があるので、十分に注意することが必要です。Googleのルックバックウィンドウであれば、変更の反映までにほとんど時間がかからないでしょう。信頼性の高いツールを用いて効果的且つ積極的にCWVをモニタリングしながら、適切な変更を行うこと（影響を認識せずに変更提案をしている人がいないかを確認するためコミュニケーションを取る）は、ユーザー体験を改善する目的でCWVをうまく扱うための大きな一歩となります。
施策とインサイト：
- CWVは長期間モニタリングをする必要があります。
- Googleはルックバックウィンドウを設けているため、パブリッシャーはサイトの更新が即座にスコアへ影響を及ぼす可能性があることも認識しておくことが重要です。
- パブリッシャーは、Google Lighthouseだけに頼るのではなく、信頼性の高いツール類を活用し改善点をより深く掘り下げる必要があります。
——————————————————————————————————
Core Web Vitalsツールとベストプラクティス：
CWVをモニタリングするツールとしては、Google Lighthouseに加えて、社内のダッシュボード、データベース、パブリッシャー独自のデータなども活用していく必要があります。これらを組み合わせて使うことで、CWVスコアが改善されているか、また解決すべき課題があるかどうかをより詳細に調べることができます。Doron Lyabockは、「Web Vitalsを改善するために変更を加えたつもりが、その逆になってしまうことがよくあるので注意が必要です。」と述べています。「変更をする前に、バックアップデータが残っていることを必ず確認してください。Web Vitalsの更新には時間がかかります。変更内容を特定のケースと関連付けたいからと言って、複数の変更を同時に実行しないでください。」
CWVスコアに影響を与えているものを解明してくれるサポート企業を探しているパブリッシャーは、KPIに対し明確な指標を設定できるようなパートナーを探すと良いでしょう。CWVは新しい分野なので、パブリッシャーはデータの裏付けがない憶測に振り回されてしまう可能性があります。専門知識の不足を補い、Core Web Vitalsスコアの可視化に役立つダッシュボードやリソースを持つパートナーを見つけることで、パブリッシャーはCWVについての理解をさらに深めることができるでしょう。
施策とインサイト：
- 一度に多くの変更を実行するとCWVスコアに悪影響を及ぼす可能性があるため、スコア改善の為の変更は一つずつ行ってください。一度に複数の変更を行うと、スコア改善に寄与した変更点を特定することができなくなります。
- CWSスコアについて透明性のあるパートナーは、理解を深めるための手助けとなり、データ可視化のための優れたダッシュボード機能によって不足を補ってくれるでしょう。
- サードパーティーの要素を非同期で読み込み、画像などには「Lazy Loading」を活用することで、パブリッシャーが他のページ要素の読み込みが中断することを防ぐことができます。（画像やリソースがユーザーの視界に入った時に読み込みを行うことでパフォーマンスを向上させることができます。）
- パブリッシャーは、キャッシュによってCSSとJavascriptのコードを最適化し、サイズと読み込みを最小化することができます。また、各ページに必要なコードのみが読み込まれるように、Javascriptをダイナミックに読み込むことが重要です。