また、再オープンしたウェブサイトでは、広告の視認性が 75% を超え、直帰率は 50% 低下し、ページビューは 27% 増加しました。
Google が Core Web Vitals イニシアチブを発表したとき、ドイツのニュース メディア Netzwelt は、優れたページ エクスペリエンスと広告ベースの収益化の向上に向けて、これらの新しい指標の可能性をすぐに認識しました。ウェブサイトを再リリースするプロジェクトでは、パフォーマンスに関する一般的なベスト プラクティスを適用し、広告タグとプレースメントを並行して最適化しました。優れた UX と高速なページに取り組むことは、エンゲージメントと広告収入を同時に最適化する方法であることが実証されました。ページビューは 27% 増加し、広告の視認可能率は 75% を超え、広告収入は 18% 増加しました。
27%
ページビューの増加
18%
広告収入の増加
75%
広告の視認性
課題
他の多くのニュース メディアと同様に、Netzwelt は、高い広告収入を維持しながら、ユーザー エクスペリエンスとページ速度の最適化のバランスを取ることに苦労していました。主な課題は次のとおりです。
- 広告によってトリガーされるレイアウト移動（特にマルチサイズのスロットとトップバナーによるもの）が原因で、Cumulative Layout Shift（CLS）が高い。
- 広告が最大のペイントであるか、ヘッダー画像の読み込みから帯域幅を消費しているために、Largest Contentful Paint（LCP）が遅れている。
- 広告、ヘッダー入札などに必要なサードパーティの JavaScript が原因で、初回入力遅延（FID）が長い。
- サードパーティ ベンダーが管理する同意ダイアログによる Core Web Vitals への副作用。レイアウト シフトの原因にもなり、Largest Contentful Paint の遅延として検出される可能性があります。
ニュース ウェブサイトを Core Web Vitals 向けに最適化する
Netzwelt は Core Web Vitals の取り組みを開始したとき、Core Web Vitals の最適化が広告に悪影響を及ぼす必要はなく、広告の視認性を高める機会として活用できることをすぐに認識しました。そのため、Netzwelt チームは、Core Web Vitals を最適化して広告の視認性を 75% 以上に引き上げ、より価値の高い広告を誘致しました（ディスプレイ広告の世界平均は50%未満です）。
CLS の最適化
広告は遅れて読み込まれることが多く（場合によっては、遅延読み込みによって意図的に遅らせることもあります）、マルチサイズやフレキシブルな広告プレースメントのため、実際のサイズが事前にわからないことがよくあります。
この問題は、スクロールしなければ見えない範囲の上と下の広告に分けることができます。
記事上部の広告は、サイズが不明で読み込みが遅れたために、レイアウトが大きくジャンプする可能性があります。広告主が必要とする最大のスペースをブロックすると、UX が低下する可能性があります。一方、広告主に固定サイズを求めると、広告収入が減少する可能性があります。Netzwelt は、上部広告を固定し、許可されている大きなバナーサイズの一部を削除することで、この問題を解決しました。オーバーレイ広告を使用すると、サイズの異なる広告でレイアウトのジャンプが発生するのを防ぐことができます。対象となるサイズが減ると広告販売に影響しますが、視認性が向上することでその影響は簡単に相殺できます。
過去のデータと A/B テストにより、Netzwelt はさまざまなデバイスと画面サイズに適したサイズと配置を見つけ、スペースの予約に使用する CSS メディアルールを特定しました。
スクロールしなければ見えない範囲の広告には、大幅な改善の余地があります。
- 読み込まれたにもかかわらず表示されないバナーは、広告の視認性を低下させ、ページの利便性を損ないます。
- ユーザーがスクロールしたときに読み込まれるバナーは、コンテンツのジャンプを誘発する可能性があります。
優れたページ エクスペリエンスと高い広告視認性を維持するため、Netzwelt は遅延読み込みを実装し、最小公倍数サイズのスペースを予約しました。マルチサイズ ゾーンでは、300x250 ～ 300x600 のサイズでリクエストされたバナーは、高さ 250 ピクセルが予約されます。これにより、小さいサイズのレイアウトのずれが解消され、大きなバナーのレイアウトのずれも大幅に軽減されました。このアプローチは最適ではありませんが、スタート地点として適切な妥協点です。
さらに最適化するため、Netzwelt は Intersection Observer と Network Information API を使用して広告プレースメントを制御し、レイアウトのずれを減らしました。スクロール位置とネットワーク接続の品質に応じて、さまざまな広告位置と遅延読み込み戦略が使用され、広告が複数のサイズから固定サイズに変更される場合があります。このアルゴリズムの目的は、レイアウト移動を最小限に抑えながら、広告の視認性を最大化すること常にです。NetworkInfo API をサポートしていないブラウザは、デバイスと IP から取得したネットワーク タイプを組み合わせてプロキシ値を使用します。この適応型読み込み戦略は、特にインターネット接続速度が遅いユーザーの CLS を削減します。
FID の最適化
広告には多くの追加の JavaScript ライブラリが付属しているため、ニュース パブリッシャーにとっては初回入力遅延が問題になる可能性があります。Lighthouse などのラボデータを確認すると、マイナスの影響があるようです。ただし、2020 ウェブ アルマナックのフィールドデータを見ると、多くのウェブサイトが十分に高速に応答しています。これは、広告の JavaScript が遅れて読み込まれる（最初の入力後に読み込まれる）、キャッシュに適切に保存される（v8 コードのキャッシュ保存の処理を受けるなど）、広告ベンダーによって適切に最適化されていることが原因です。ベンダーの視認性トラッカーは長いタスクを回避するように設計されているため、実行時間の合計が長くても、合計ブロック時間（TBT）と FID は影響を受けません。FID は Netzwelt にとって大きな問題ではありませんでしたが、いくつかの最適化を行う必要がありました。
- 広告スクリプトとプロバイダを減らし、可能であれば 1 つのスタックに集中する。
- すべてのスクリプトを遅延または非同期で読み込む。
- webpack などの技術を使用して、ツリーシェイキングとバンドルの解除を行う。
- シンプルな BEM のような CSS ルールを使用する。
- 長時間実行タスクを回避し、緊急になるまでアイドル状態のパターンを使用する。
- レイアウトに影響するすべての場所で RequestAnimationFrame を使用する。
LCP の最適化
Largest Contentful Paint は、広告によって 2 つの方法で影響を受ける可能性があります。広告を最大ペイントとして明示的に認識する方法と、ネットワーク帯域幅を圧迫したり、クリティカル パスに影響を与えたりして、実際の最大ペイント（ヘッダー画像など）を十分な速さで読み込めないようにする間接的な方法です。
Netzwelt は、CLS を最適化しながら、上部の広告スロットから中程度の長方形広告をすでに削除していました。これにより、広告が最も大きな要素にならないというメリットもありました。
Netzwelt は、コンテンツを広告よりも優先するという厳格なポリシーに準拠しています。Netzwelt は、スクロールせずに見える範囲で使用されるヘッダー画像とフォントに優先順位を付け、広告スクリプトと広告よりも優先されるようにクリティカル パスを最適化しました。この優先順位付けにより、LCP は広告の影響を受けなくなりました。
Netzwelt は、これらの最適化に加えて、次のベスト プラクティスも実施しました。
- クリティカルなレンダリング パスの CSS を分離し、ヘッダーに配置しました。
- 最も重要なフォント、スクリプト、画像をプリロードします。
- スクロールせずに見える範囲の画像を遅延読み込みしないようにしました。
font-display="swap"を使用しました。
GDPR の同意と Core Web Vitals
同意ダイアログは、Core Web Vitals に悪影響を及ぼすことがあります。広告と同様に、同意ダイアログが Core Web Vitals に影響する方法は 2 つあります。
- 最大のペイントとして検出された場合、またはレイアウトのずれを招く場合は明示的に。
- 暗黙的に、実際の Largest Contentful Paint から帯域幅を奪う、Largest Contentful Paint へのクリティカル パスをブロックする、同意が得られるまで広告を遅らせる（これにより、レイアウトのずれがトリガーされる可能性がある）
Netzwelt は、最適化も実装したサードパーティの同意プロバイダと連携しています。まず、Netzwelt は、単純な落とし穴を回避しました。
- 重要なリソースをブロックしないように、同意スクリプトは非同期で読み込まれます。
- 大きな要素が LCP 内の最大要素として適格にならないように、同意の形式が設定されています。
- 同意オーバーレイは
position: fixedを使用してシフトを回避します。 - 広告は同意を得た後にのみ表示されますが、広告の読み込み時にレイアウトがずれないように、事前に十分な空白が確保されます。
- 同意ダイアログの表示と配置によってレイアウトのずれが生じないようにします。ここで見つかって修正された問題の 1 つは、サービス プロバイダのスクロールロック オプションでした。このオプションでは、スクロール時に記事のメイン コンテンツが移動し、レイアウトがずれるため、同意が表示されている間はスクロールが無効になっていました。
この作業の後も、フィールドとラボの CLS に大きな差異が残りました。ラボの CLS はゼロに近かったのに対し、フィールド値は基準値を大幅に上回っていました。調査の結果、原因は同意 iframe 内のレイアウトのずれであることが判明しました。これは現在、フィールドデータでのみ正しくキャプチャされます。Netzwelt は、サードパーティの同意プロバイダと連携して、この問題の改善に取り組んでいます。
ニュースの定期購入モデルと Core Web Vitals
ニュース メディアは、ジャーナリズムの資金調達のために定期購入モデルに移行しています。ユーザー エクスペリエンスが悪いウェブサイトは登録されないので、このモデルはウェブに関する主な指標に関連しています。また、有料コンテンツに広告が表示されることをチャンネル登録者は想定していませんが、広告を非表示にするとレイアウトがずれる可能性があります。ウェブサイトは、ユーザーがコンテンツを表示する権限を持っているかどうか、広告を表示するかどうかを確認する必要があります。これらのチェックによりレイテンシが増加し、コンテンツのずれやユーザー エクスペリエンスの低下が生じる可能性があります。
Netzwelt は、コンテンツは常に無料だが、定期購入者は広告が表示されないモデルを使用しています。レイテンシとレイアウト シフトを減らすために、利用資格をクエリして保存するさまざまな方法を調査しました。
利用資格の最初のクエリは常にレイテンシを引き起こしたため、利用資格のクエリに時間がかかりすぎると、サイトには最後にキャッシュに保存された状態が表示されます。新規の定期購入者の場合、有料ユーザーが広告を 1 回目に表示されるリスクはわずかです。定期購入を終了したばかりのユーザーには、ローカルに保存されている利用資格が更新される前に、広告なしで 1 回読み込まれることがあります。利用資格が判明すると、LocalStorage API を使用してローカルに保存されます。これにより、今後のナビゲーション中にレイアウトのずれやレイテンシの増加を回避できます。
最適化結果
Netzwelt の成果は、その結果が物語っています。世界中のニュース メディアの中で、PageSpeed Insights スコアは比類のないものです。
最適化によりページ エクスペリエンスは改善されましたが、ビジネスを念頭に置いて行われ、広告エクスペリエンス、広告の視認性、収益が向上しました。最適化されたページを再公開した後、Netzwelt では CPM が 20 ～ 30% 増加し、広告の視認性が 75% を超えました。ただし、Netzwelt は、全体的な収益の伸びがさらに大きいと見込んでいます。リニューアル後、トラフィックが伸びました。これは、UX の向上によるユーザー エンゲージメントの向上と離脱率の低下が原因と考えられます。トラフィックは自然に変動するため、また世界的なパンデミックの影響もあるため、これらの効果を定量化して再開と因果関係を特定することは困難です。こうした間接的な効果が、Netzwelt がサイトの審査時に CPM だけでなく、誤解を招く可能性のあるすべての数値を確認する理由の一つです。Core Web Vitals と UX 指標を、すべての広告関連指標と組み合わせることで、実際の状況を把握できます。
今後の展望
Netzwelt は、サードパーティ Cookie を使用しない将来において、コンテンツを介したコンテキスト ターゲティングと、優れた UX とページ エクスペリエンス（広告の視認性を含む）を組み合わせることが、ニュース パブリッシャーとしての成功の鍵になると考えています。
そのため、Netzwelt はウェブに関する主な指標にとどまらず、新しい Digital Goods API を使用して、プログレッシブ ウェブアプリ（PWA）、オフライン コンテンツ、ダークモード、Web Share API、Trusted Web Activity（TWA）など、最新のウェブ機能を数多く実装しています。