高いパフォーマンス スコアが Core Web Vitals に及ぼす全体的な影響とメリットを測定するケーススタディです。
RebelMouse はクラウドベースの CMS です。この CMS は、パブリッシャーが新旧両方のオーディエンスに可能な限り最高のエクスペリエンスを提供するために必要なデータドリブンのツールとクリエイティブ戦略を備えています。Google は、Upworthy、Narcity、Raw Story、Brit + Co、The Independent などのメディア企業や、Penske Trucks、Vault12、Gaingels といった価値の高いサイトのトラフィックの多いウェブ プロパティをサポートしています。
当社のプラットフォームは、米国だけでも毎月 1 億人を超える人々にリーチしています。同社は、オープンウェブが成功を収めるためには最高レベルの消費者の期待を満たす必要があるという信念のもとに設立されました。Google の Core Web Vitals によって設定された基準は、このユーザー ファーストのビジョンに沿っています。
Google のグローバル チームは 10 年以上にわたり、ポジティブで直感的なユーザー エクスペリエンスを生み出し、有意義なビジネスにつなげる CMS のエンジニアリングに取り組んできました。Core Web Vitals は、Google が運用するすべての新しいサイトでこの共生ループを継続するためのベンチマークです。
パフォーマンスを優先することがビジネスの向上につながる理由
多くのニュース メディアは、Core Web Vitals で優れたスコアを獲得すれば労力に見合った価値があるかどうかに疑念を抱いています。また、質の高いユーザー エクスペリエンスであっても、必要な読者数の伸びにはつながらないのではないかと懸念しています。幸いなことに、RebelMouse がパフォーマンスに優先順位を付けたことで、Core Web Vitals が新しいトラフィックを生み出し、ビジネスの成功に必要なユーザー ロイヤルティを構築する優れた方法であることを証明するためのデータが得られました。
これを説明するために、Google が運用している多数のサイトのオーディエンス行動を、Core Web Vitals で高いパフォーマンス スコアを重視して最適化する前と後の両方で分析しました。具体的には、ユーザーのタイプを定義し、オーディエンスを次の主要なカテゴリに分けました。
- 新規ユーザー: サイトに初めてアクセスしたユーザー。
- リピーター: セッションが 2 回以上発生したユーザー。
- ロイヤル ユーザー: セッションが 3 回以上発生したユーザー。
- ファン: セッションが 4 回以上発生したユーザー。
- 熱心なファン: セッションが 5 回以上発生したユーザー。
関連資料: - https://www.hotjar.com/google-analytics/glossary/users - https://databox.com/new-vs-returning-visitors
Google アナリティクスによって収集された現場のデータは非常に明確でした。ロイヤリティの高い訪問者、ファン、熱心なファンのカテゴリに着目すると、ウェブに関する主な指標で非常に高い評価を受けたサイトのほうが、滞在時間が長く、コンテンツの消費が増加し、リピーターになる可能性が非常に高いことがわかっています。代表的な例をいくつか紹介します。
しかし、急上昇すべき指標はコンテンツの消費とユーザーあたりの利用時間だけではありません。訪問ユーザー数とアクセス ページ数も、同じカテゴリで増加しています。
通常の状態から高パフォーマンスへ: RebelMouse がウェブサイトを変革する方法
サイトのコードベースに思慮深く戦略的な変更を行うことで、ウェブに関する主な指標で高い成果を上げることができます。RebelMouse は次のような方法で高パフォーマンスのウェブサイトを強化しています。
プログレッシブ ウェブアプリ
RebelMouse は、すべてのサードパーティ呼び出しをプログレッシブ ウェブアプリで最適化します。プログレッシブ ウェブアプリは、最も重要なコンテンツを最初に配信し、残りの呼び出しは、読者が見る必要があるときに順番に処理します。
Largest Contentful Paint（LCP）イベントが完了した直後に JavaScript を読み込むメソッドも用意されています。Google では、ユーザーが JavaScript を 3 つの異なる優先度で読み込むことができます。
- [最適化] は、最新のアプローチを求めるユーザーに最適です。Google では独自の開発作業に使用しています。この優先度では、ページが完全に読み込まれるまで JavaScript の呼び出しが一時停止されるため、最も高いパフォーマンスが得られます。
- 読み込みのブロックは、JavaScript を直ちに実行するために使用され、通常はパフォーマンス スコアに悪影響を及ぼします。この優先度では、ページの読み込み完了直後に JavaScript が呼び出されます。コールが増えると、パフォーマンス スコアが 10 ～ 40 点下がる可能性があります。
- [Post LCP] は、優れたパフォーマンス スコアと非常に高速な読み込みを組み合わせるのに最適なオプションです。この優先度では、Largest Contentful Paint イベントが完了した直後に JavaScript が読み込まれます。（これは、5 秒ほどページを見ているユーザーに広告を配信することで収益が向上している広告にのみおすすめします）。
ソーシャル埋め込みを最適化する
Cumulative Layout Shift（CLS）スコアと LCP スコアを保護するには、すべてのソーシャル埋め込みを遅延読み込みに設定する必要があります。
CLS を保持するには、サーバー側のテクノロジーを使用して埋め込みのサイズを動的に見つけ、その埋め込みのプロパティを格納した独自のストレージに挿入する必要があります。次に、読み込み時にレイアウトが移動しないように、埋め込みをフロントエンドに配信する必要があります。このトピックについてさらに詳しく知りたい方のために、Twitter と TikTok の例に詳しく投稿しています。
超軽量でスマートな HTML と CSS
サイトの HTML と CSS は、スクロールせずに見える範囲の画像とテキストがページの他の部分より前にプリロードされるように構築する必要があります。
- 不適切な HTML 構造があると、ブラウザは最初のビューポートでスクロールせずに見える範囲をレンダリングするために、スクロールしなければ見えない範囲にある多くの不要なサイト要素を処理せざるを得なくなります。
- RebelMouse でこれを実現する方法については、以下の記事をご覧ください。
- ウェブに関する主な指標を改善する方法の詳細
- 詳細なガイド: 高速ページを実装しながら第三者スクリプトも実装する方法
- LCP の最適化に関する詳細なガイド。
パフォーマンス重視で公開する
Core Web Vitals のロールアウト以来、デベロッパーは、自社の公開プラットフォームが Google が推奨するしきい値に匹敵する影響を感じてきました。
HTTP Archive は、数百万もの URL の傾向を特定し、過去のパターンを記録するオープンソース プロジェクトです。同社の Core Web Vitals のテクノロジー レポートでは、上位のコンテンツ管理システムが Google のページ エクスペリエンス標準に対してどのように機能しているかが明らかになっています。RebelMouse は、リリースから 2022 年まで、Google の最も重要な指標において、主要な CMS プラットフォームを常に上回るパフォーマンスを発揮しています。
妥協のないパフォーマンス
今や、質の高いコンテンツを作成するだけでは、パブリッシャーとブランド双方にとっての戦いの半分にすぎません。質の高いコンテンツは、今日のウェブの速度と標準に対応できる最新のテクノロジーによって支えられていなければなりません。Core Web Vitals は、サイトのパフォーマンスが単なる目標ではなく、Google の文化に織り込まれた会社の柱であるため、評価の基準になります。当社はパフォーマンスに力を入れており、クライアントがユーザー エクスペリエンスを犠牲にすることなくトラフィックを増やし、収益を上げることでオープンウェブを最大限に活用できるよう支援しています。
Core Web Vitals で業界基準を上回る成果を出すためのサポートについて詳しくは、こちらをクリックして RebelMouse の詳細をご覧ください。