今日のデジタル世界において、オンライン広告は、私たち全員が無料のウェブを楽しむうえで欠かせない存在となっています。広告が適切に実装されていないと、ブラウジング エクスペリエンスが遅くなり、ユーザーの不満やエンゲージメントの低下につながります。ページ速度に影響を与えることなく広告を効果的に読み込み、シームレスなユーザー エクスペリエンスを実現し、ウェブサイト所有者の収益機会を最大化する方法を学びます。
ウェブサイトは、主な収益源としてオンライン広告に大きく依存しています。ただし、ウェブサイトに広告を掲載すると、ユーザー エクスペリエンスやページ全体のパフォーマンスが損なわれることがあります。そのため、ウェブサイト所有者と広告主様の収益化とパフォーマンス、およびユーザー エクスペリエンスのバランスを取ることが重要です。
高い収益を狙って、コンテンツ内に広範囲に広告を配置するウェブサイトを考えてみましょう。しかし、広告の数が多すぎるとユーザーの不満を招き、ユーザー エクスペリエンスの低下と高い離脱率につながります。広告から多額の収益を得られる可能性はあるものの、放棄はウェブサイトの成功を大きく妨げます。
反対に、広告のないウェブサイトを考えてみましょう。広告のないこの環境は、読み込み時間が速く、ブラウジング エクスペリエンスがシームレスになるため、多くのユーザーを魅了しています。ただし、収益化戦略がなければ、ウェブサイトは収益を上げることができず、長期的な持続性と成長を妨げる可能性があります。
どちらのシナリオも、収益化、ユーザー数、パフォーマンスのバランスを取ることが重要であることを示しています。
Core Web Vitals の活用
ページの表示速度に悪影響を及ぼすことなく広告を読み込むには、Core Web Vitals の基準を満たすことが不可欠です。Core Web Vitals は、Largest Contentful Paint（LCP）、Cumulative Layout Shift（CLS）、Interaction to Next Paint（INP）などの指標で構成され、ウェブサイトのユーザー エクスペリエンスの品質を測定するユーザー エクスペリエンス指標です。
Largest Contentful Paint（LCP）
LCP は、ビューポート内に最大のコンテンツ要素が表示されるまでに要する時間を測定する指標であるため、LCP の最適化に重点を置くことが重要です。広告コンテンツの読み込み時間を最小限に抑え、非同期読み込み手法を優先することで、LCP を短縮し、ページ上で最も目立つコンテンツ要素のレンダリング時間を短縮できます。
Interaction to Next Paint（INP）
2 つ目は、INP の改善がレスポンシブなユーザー エクスペリエンスに不可欠であることです。INP は、ページの全期間中に発生するすべてのクリック、タップ、キーボード操作のレイテンシを測定します。得られる値は、ほとんどの場合、完了に最も時間がかかったインタラクションであり、ユーザー インタラクションに迅速に応答するページの全体的な能力を表します。
ユーザー操作を遅らせる広告は、インタラクション数に悪影響を及ぼします。動作が遅く感じられたり、極端な場合は動作しなくなったりするため、ユーザーの不満を招く可能性があります。広告の遅延読み込みを実装し、重要でない JavaScript の実行を遅らせることで、ページの INP を削減し、ページ全体の応答性を改善できます。
Cumulative Layout Shift（CLS）
最後に、CLS はページの読み込み中に発生する予期しないレイアウト移動の量を測定して、ページの視覚的な安定性を測定します。広告が動的に読み込まれたりサイズ変更されたりすると、レイアウトが不安定になり、ユーザーがページ上の位置を把握できなくなったり、予期しないレイアウトのずれにより間違った要素を意図せずタップしたりするなど、ユーザー エクスペリエンスが低下する可能性があります。これを軽減するには、ウェブサイト所有者はCLS を最適化して、レイアウトの移動を防ぐために広告にスペースを確保し、コンテンツのリフローを突然発生させないように広告サイズを最適化する必要があります。
ウェブページを個別のコンテンツ ブロックに構造化する
テキスト、画像、広告コンテンツの両方のコンテンツ ブロックでウェブページを構造化し、CSS content-visibility: プロパティを使用すると、最新のブラウザで全体的なレンダリング時間が大幅に短縮されます。
これらのコンテンツ ブロック内に content-visibility: プロパティを戦略的に適用することで、テキスト、画像、広告コンテンツのレンダリング プロセスを最適化できます。これにより、ビューポート内のコンテンツのみが完全にレンダリングされるため、初回のページ読み込みが速くなり、ユーザー操作がスムーズになります。このパフォーマンス向上は、長いページや多数の広告を含むページを処理する場合に特に役立ちます。
重要な広告スロットを優先する
すべての広告スロットが同じではありません。たとえば、スクロールせずに見える範囲の広告スロットは、通常、スクロールしなければ見えない範囲の広告スロットよりも視認性と収益化の点で価値が高いです。これは、スクロールせずに最初のビューポートに表示されるスクロールせずに見える範囲の広告は、ユーザーに表示される可能性が高くなるためです。スクロールしなければ見えない範囲の広告は、ユーザーがページを下にスクロールして広告が表示される位置までスクロールしたときに表示されます。
スクロールせずに見える範囲の広告
スクロールせずに見える範囲の広告スロットとは、ウェブページのスクロールせずに見える範囲を指し、デジタル広告において重要な価値があります。これらのプライム プレースメントは、次のような理由から価値が高いと見なされます。
- スクロールせずに見える範囲に配置された広告は、ウェブページの読み込みと同時にユーザーに表示されます。ユーザーがこれらの広告に目を留めて反応する可能性が高まるため、クリック率の向上につながります。
- 広告主様は、ウェブページの上部を最も価値の高いスペースと見なす傾向があります。サイトにアクセスしたときにユーザーに与えられる第一印象で、効果の高いプレミアム広告を表示するうえで重要な領域です。
- スクロールせずに見える範囲に配置された広告は、ユーザーの視界に直接入るため、視認率が最も高くなります。これにより、ページにアクセスしたほとんどのユーザーが、スクロールすることなくこれらの広告を目にすることができます。
ただし、初回ビューで上部広告スロットを使用する場合は、収益化とユーザー エクスペリエンスのバランスを取ることが重要です。主な考慮事項は次のとおりです。
- ファースト スクリーン広告スロットは、ユーザーの最初のビューポートでできるだけ速く読み込まれる必要があります。広告の読み込みが遅いと、ユーザー エクスペリエンスに悪影響を及ぼし、離脱率の増加につながる可能性があります。スムーズなユーザー エクスペリエンスとブラウジング エクスペリエンスを維持するには、広告の読み込み時間を最適化することが重要です。
- スクロールせずに見える範囲の広告プレースメントは価値が高いですが、このプレミアム スペースに広告を過剰に表示しないようにすることが重要です。広告が多すぎると、ページが雑然とし、コンテンツの読みやすさが損なわれ、ユーザー エクスペリエンスが低下します。収益化と、シンプルでユーザー フレンドリーなレイアウトのバランスを取るよう努めてください。
- 折り返しの広告スロットがさまざまな画面サイズとデバイスに対応していることを確認します。レスポンシブ デザインのプラクティスを使用すると、ユーザーの画面サイズに関係なく、一貫性のある視覚的に魅力的なレイアウトを維持できます。
スクロールしなければ見えない範囲の広告
スクロールしなければ見えない範囲の広告スロット（ウェブページの中で、ユーザーが下へとスクロールして初めて画面内に現れる部分に配置された広告）も、デジタル広告の世界では大きな価値があります。これらのプレースメントには、スクロールせずに見える範囲のプレースメントを補完する独自のメリットがあります。
スクロールしてコンテンツを探すユーザーにリーチできるため、スクロールせずに見える範囲の下に広告を配置することをおすすめします。これらのプレースメントは、追加情報を積極的に探しているエンゲージド ユーザーの注意を引き付けるため、より複雑なメッセージやストーリーを伝えたいブランドにとって有益です。
- 最初は表示されない広告スロットを、隣接するコンテンツと並べることで、コンテキストに沿った関連性の高い広告を表示できます。ユーザーが閲覧しているコンテンツに関連する広告を見つけられるため、ユーザー エンゲージメントの向上につながります。
- よく考えられたデザインであれば、スクロールしなければ見えない位置にある広告は周囲のコンテンツとシームレスに統合され、ユーザーの邪魔になりません。この統合（ネイティブ広告）により、より調和のとれたユーザー エクスペリエンスを実現できます。
- スクロールが必要な広告プレースメントでは、クリエイティブなデザインとフォーマットの柔軟性が増し、十分なスペースと自由にテストできます。動画広告、インタラクティブな要素、大きな画像を遅延読み込みすることで、ユーザー エクスペリエンスを中断することなくユーザーの注意を引くことができます。
ただし、スクロールしなければ見えない範囲の広告プレースメントについては、次の点にご留意ください。
- スクロールしなければ見えない範囲に広告を配置することは効果的ですが、ユーザーがスクロールして広告を表示するように誘導することが重要です。視覚的なヒントやコンテンツの予告編を実装すると、ユーザーがさらに詳しく調べて広告を目にする可能性が高まります。
- スクロールしなければ見えない位置に広告を配置する場合、コンテンツの品質や読みやすさを損なわないよう注意してください。広告とコンテンツのバランスを維持し、ユーザーに圧迫感を与えず、快適なユーザー エクスペリエンスを提供します。
- スクロールせずに見える範囲の広告プレースメントとは異なり、スクロールしなければ見えない範囲の広告の場合、すぐに読み込む必要はない場合があります。これらの広告の読み込みを、ユーザーのビューポートに表示される直前まで遅らせることで、ページの全体的な読み込み速度を改善し、ページの初期レンダリング時間を短縮できます。
下部広告を戦略的に使用すると、上部広告を補完し、クリエイティブな広告フォーマットとコンテキストの関連性を高めることができます。良好なユーザー エクスペリエンスを提供するには、視認性の最適化、コンテンツのバランス調整、広告の読み込みタイミングの管理が重要な考慮事項となります。
現在の Google パブリッシャー タグ（GPT）のベスト プラクティス:
必要に応じて広告を遅延読み込みする
遅延読み込みとは、重要でないリソースの読み込みを、必要になるまで延期する手法です。すぐに表示されない広告（スクロールしなければ見えない範囲の広告）に遅延読み込みを適用すると、広告は表示されたときにのみ読み込まれるため、帯域幅を節約して全体的なページの読み込み速度を向上させることができます。ブラウザに、loading=lazy 属性によるiframe のネイティブ遅延読み込みが追加されました。
遅延読み込みを実装すると、ユーザーのビューポートに表示される直前に広告が動的に取得されるため、ページ ライフサイクルの重要な部分でメインスレッドの初期読み込み時間と合計ブロック時間（TBT）（INP と高度に相関している）が短縮され、ユーザー エクスペリエンスへの悪影響を最小限に抑えることができます。
ページを更新せずに広告を更新する
ページのパフォーマンスと広告の読み込みを両立させるもう 1 つの方法は、ページ全体を再読み込みせずに、30 ～ 240 秒ごとに広告を更新する方法です1。このアプローチにより、ユーザーのブラウジング エクスペリエンスを中断したり、不要な遅延を引き起こしたりすることなく、広告コンテンツを動的に更新できます。
モバイルアプリでは、既存のウェブビューで広告を更新すると、ページ全体を再読み込みしたり WebView を再作成したりする場合と比べてパフォーマンスが向上します。これは、データとリソースのオーバーヘッドが最小限に抑えられるため、コンテンツの更新が速くなり、スムーズなユーザー エクスペリエンスが実現し、最初からやり直す際のレイテンシが解消されるためです。
広告を非同期で更新することにより、ウェブサイトの所有者は、ページ コンテンツをそのまま維持しながら、広告コンテンツをリアルタイムでシームレスに更新できます。これにより、ページ全体を再読み込みする必要がなくなるためページの速度が向上するだけでなく、表示される広告の関連性と魅力が維持されます。この手法により、ウェブサイト所有者は収益化とパフォーマンスのバランスを取り、タイムリーで魅力的な広告コンテンツを配信しながら、ユーザー エクスペリエンスへの悪影響を最小限に抑えることができます。
広告スロットの更新は、レシピページ、DIY チュートリアル、その他のコンテンツの多いウェブサイトなど、ユーザーが長く滞在する傾向があるページで特に効果的です。たとえば、ユーザーがチュートリアルを視聴するためにかなりの時間を費やす DIY クラフトのページでは、手順の合間や画像ギャラリーの表示中に広告スロットを戦略的に更新することで、ユーザー エクスペリエンスと広告収入の両方を高めることができます。同様に、レシピページでは、ユーザーが材料リストや手順をスクロールした後に広告スロットを更新することで、ユーザーの関心を維持できます。
非同期読み込みに優先順位を付ける
広告を配信しながらページの速度を改善する最も効果的な戦略のひとつが、非同期読み込みです。非同期読み込みでは、メインのウェブページ コンテンツとは別に広告が読み込まれるため、広告が完全に読み込まれるのを待たずにページのレンダリングを続行し、インタラクティブにすることができます。これにより、ユーザーが感じる読み込み時間が大幅に短縮され、ユーザー満足度が向上します。
スクリプトタグの定義に async 属性を追加します。例:
AdSense:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
AdSense（自動広告）:
<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Google パブリッシャー タグ:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
広告サイズ、広告の位置、広告フォーマットを最適化する
広告のサイズ、位置、フォーマットは、ページの読み込み速度に大きく影響します。広告サイズが大きい場合、ページの読み込みが遅くなり、ユーザーの不満につながる可能性があります。この問題を軽減するには、ウェブサイト所有者は広告主と緊密に連携して広告サイズとフォーマットを最適化する必要があります。圧縮された画像形式の使用と効率的な広告クリエイティブの設計を推奨することで、画質を損なうことなくファイルサイズを削減できます。こうした最適化により、ページの読み込み速度が向上するだけでなく、帯域幅が制限されているユーザーのデータ使用量を最小限に抑えることができます。
Better Ads Standards
広告を表示する際は、Better Ads Standards に準拠することが不可欠です。そうすることで、邪魔になる広告フォーマットを減らしてユーザー エクスペリエンスを向上させるだけでなく、広告配信の位置とページの読み込み時間にもプラスの効果をもたらします。
これらの基準に従うことで、広告は邪魔にならない位置に表示され、ユーザー エンゲージメントとクリック率の向上につながります。
さらに、これらのガイドラインに準拠することで、軽量でリソース消費量の少ない広告フォーマットが好まれるため、ページの読み込み速度が向上し、ウェブサイトの全体的なパフォーマンスとユーザー満足度の向上につながります。
広告ネットワークとプロバイダの戦略的評価
広告ネットワークやプロバイダのパフォーマンスは、それぞれ異なります。ページの読み込みを最適化するには、ウェブサイトの所有者がさまざまな広告ネットワーク、ヘッダー入札の実装、プロバイダのパフォーマンスを慎重に評価する必要があります。
速度を重視し、軽量な広告コンテンツを効率的に配信してきた実績のあるプロバイダと提携することで、ページのパフォーマンスを大幅に向上させ、ユーザー エクスペリエンスを改善できます。
まとめ
オンライン広告を通じて収益を最大化しながら優れたユーザー エクスペリエンスを提供したいと考えているウェブサイトの所有者にとって、収益化とパフォーマンスのバランスを取ることは非常に重要です。
非同期読み込み、遅延読み込み、広告フォーマットとサイズの最適化、インテリジェント キャッシュの活用、広告ネットワークの慎重な評価、ヘッダー入札とプロバイダなどの手法を使用すると、ウェブサイト所有者はページのパフォーマンスを損なうことなく、広告の読み込みに関する課題を克服できます。広告の効率的な配信を優先することで、最終的にはユーザーの分類、エンゲージメントの向上、持続可能な収益の獲得を実現できます。
脚注
- 広告サーバーには、適用される制限事項や要件がある場合があります。たとえば、アド マネージャーでは、パブリッシャーは管理画面で更新される広告枠を宣言する必要があります。一部のバイヤーは、240 秒以上の更新頻度を宣言することを要求しています。一般に、更新間隔が長いほど、購入者にとって魅力的な広告枠となります。詳細