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