今日のデジタル世界において、オンライン広告は私たち全員が利用できるフリーウェブの重要な要素です。ただし、広告が適切に実装されていないと、ブラウジングが遅くなり、ユーザーの不満やエンゲージメントの低下につながります。ページ速度に影響を与えずに広告を効率的に読み込む方法、シームレスなユーザー エクスペリエンスを確保して、ウェブサイトの所有者の収益機会を最大化する方法について説明します。
ウェブサイトは、主な収益源としてオンライン広告に大きく依存しています。ただし、ウェブサイトに広告が表示されると、ユーザー エクスペリエンスとページの全体的なパフォーマンスが犠牲になることがあります。そのため、ウェブサイトの所有者と広告主様の収益性とパフォーマンスと、ユーザー エクスペリエンスのバランスを取ることが極めて重要です。
高い収益の獲得を目指して、コンテンツ内に広告を幅広く配置しているウェブサイトについて考えてみましょう。しかし、広告の数が多すぎるとユーザーはイライラし、ユーザー エクスペリエンスの低下や直帰率の上昇につながります。広告から大きな収益を上げる可能性があるにもかかわらず、放棄がウェブサイトの成功を著しく妨げます。
反対に、広告のないウェブサイトについて考えてみましょう。この広告なしの環境は、高速の読み込みとシームレスなブラウジングにより、多くのユーザーを引き付けています。しかし、収益化戦略が策定されていなければ、ウェブサイトは収益の創出に苦労し、長期的な持続可能性と成長を妨げる可能性があります。
どちらのシナリオも、収益化、ユーザー、パフォーマンスのバランスを取ることの重要性を示しています。
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 を削減し、ページで最も目立つコンテンツ要素のレンダリング時間を短縮できます。
Interaction to Next Paint（INP）
次に、INP の改善は、レスポンシブ ユーザー エクスペリエンスにとって不可欠です。INP では、ページのライフサイクルを通じて発生するすべてのクリック、タップ、キーボード操作のレイテンシを測定します。多くの場合、この値は完了までに最も時間がかかったインタラクションの値であり、ユーザー インタラクションに迅速に反応するページの全体的な能力を表します。
ユーザー インタラクションを遅らせる広告は INP に悪影響を及ぼします。動作が遅くなるだけでなく、極端な場合は完全に機能しなくなることもあり、ユーザーの不満につながる可能性があります。広告の遅延読み込みを実装し、重要性の低い JavaScript の実行を遅らせることで、ページの INP を減らし、ページ全体の応答性を向上させることができます。
Cumulative Layout Shift（CLS）
最後に、CLS はページの読み込み中に発生する予期しないレイアウト シフトの量を測定することで、ページの視覚的な安定性を測定します。広告の読み込みやサイズ変更が動的に行われると、レイアウトが不安定になり、予期しないレイアウト移動によってユーザーがページ内の場所を見失ったり、意図せず間違った要素をタップしたりするなど、ユーザー エクスペリエンスの低下につながります。これを軽減するには、ウェブサイトの所有者は CLS を最適化して広告のレイアウト シフトを防ぐスペースを確保し、広告サイズを最適化してコンテンツの突然のリフローを防ぐ必要があります。
ウェブページを個別のコンテンツ ブロックに構造化する
テキスト、画像、広告コンテンツの両方のコンテンツ ブロックでウェブページを構造化し、CSS の content-visibility: プロパティを使用すると、最新のブラウザの全体的なレンダリング時間を大幅に短縮できます。
これらのコンテンツ ブロック内に content-visibility: プロパティを戦略的に適用すると、テキスト、画像、広告コンテンツのレンダリング プロセスを最適化できます。これにより、現在ビューポートにあるコンテンツのみが完全にレンダリングされるため、最初のページの読み込みが速くなり、ユーザー操作がよりスムーズになります。パフォーマンスの向上は、長いページや広告が多いページを処理する場合に特に有効です。
重要な広告スロットを優先する
すべての広告スロットが同等であるとは限りません。たとえば、スクロールせずに見える範囲にある広告スロットのほうが、スクロールしなければ見えない位置にある広告スロットよりも視認性や収益性の点で通常より価値があります。スクロールせずに見える範囲の広告は、最初のビューポートではスクロールせずに見えるため、ユーザーに見られる可能性が高いためです。スクロールしなければ見えない範囲の広告は、ユーザーがページを下にスクロールしたときに表示されます。
スクロールせずに見える範囲の広告
スクロールせずに見える範囲（スクロールせずに見える範囲）にある広告スロットは、ウェブページの中でスクロールせずに見える部分を指し、デジタル広告で大きな価値を生みます。価値の高いプレースメントが効果的であると見なされる理由はいくつかあります。
- スクロールせずに見える範囲に配置された広告は、ウェブページを読み込んだらすぐに表示されます。ユーザーが広告を目にして反応する可能性が高まるため、クリック率の向上につながります。
- 多くの広告主様は、ウェブページの最上部を最も価値のある不動産と見なしています。ユーザーがサイトにアクセスしたときに得られる第一印象は、効果の高いプレミアムな広告を表示するうえで非常に重要な領域です。
- スクロールせずに見える範囲の広告は、ユーザーの目の前にある広告であるため、視認可能率が最も高くなります。これにより、ページを訪れるユーザーの大多数に、スクロールしなくてもこれらの広告が表示されるようになります。
ただし、最初の画面でスクロールせずに見える範囲の広告スロットを利用する場合は、収益化とユーザー エクスペリエンスのバランスを取ることが重要です。主な考慮事項は次のとおりです。
- 最初の画面の広告スロットは、ユーザーの最初のビューポートにできるだけ速く読み込まれるようにします。読み込みが遅い広告は、ユーザー エクスペリエンスに悪影響を及ぼし、直帰率を増加させる可能性があります。広告の読み込み時間を最適化することは、スムーズなユーザー エクスペリエンスとブラウジング エクスペリエンスを維持するために欠かせません。
- スクロールせずに見える範囲の広告プレースメントは有益ですが、この主要なスペースに多くの広告を配置しすぎないようにすることが重要です。広告が多すぎると、ページが見づらくなり、コンテンツの読みやすさが損なわれ、ユーザー エクスペリエンスが低下します。収益化と、シンプルでわかりやすいレイアウトの維持のバランスを心がけましょう。
- スクロールせずに見える範囲の広告スロットが、さまざまな画面サイズやデバイスに対応していることを確認します。レスポンシブ デザインの手法を使用すると、ユーザーの画面サイズに関係なく、一貫性があり、視覚的に魅力のあるレイアウトを維持できます。
スクロールしなければ見えない範囲の広告
スクロールしなければ見えない位置にある広告スロット、つまり、ウェブページの中で下にスクロールしたときにしか見えない部分に配置される広告も、デジタル広告の世界において大きな価値を持っています。このプレースメントには、スクロールせずに見える範囲に配置できる独自の利点があります。
スクロールしなければ見えない位置の広告は、ユーザーが他のコンテンツを見るために下方向にスクロールすると効果的です。このようなプレースメントは、積極的に追加情報を求める熱心なユーザーの注意を引き、より複雑なメッセージやストーリーテリングを伝えたいと考えているブランドにとって価値があります。
- 最初は表示されない広告スロットを、その横のコンテンツに合わせて配置することで、コンテンツとの関連性が高まります。この連携により、ユーザーが探しているコンテンツに関連する広告を目にするようになり、ユーザー エンゲージメントが向上します。
- 考え抜かれたデザインにすると、スクロールしなければ見えない範囲の広告は周囲のコンテンツに自然に溶け込み、ユーザーにとって邪魔になりません。この統合はネイティブ広告とも呼ばれ、より調和のとれたユーザー エクスペリエンスを実現します。
- スクロールが必要な広告プレースメントにより、クリエイティブなデザインとフォーマットの柔軟性が向上し、十分なスペースがあり、自由に試せる。動画広告、インタラクティブな要素、大きな画像などは遅延読み込みが可能で、ユーザーの操作を妨げずに注意を引くことができます。
ただし、スクロールしなければ見えない位置に広告を配置する場合は、次の点に注意してください。
- スクロールしなければ見えない範囲の広告プレースメントは効果的ですが、ユーザーが下にスクロールしたくなるようにすることが重要です。視覚的な手がかりやコンテンツ ティーザーを追加すると、ユーザーにさらに興味を持ってもらい、広告が目に留まる可能性を高めることができます。
- スクロールしなければ見えない位置に広告を配置しても、コンテンツの品質や読みやすさが損なわれないようにしてください。広告とコンテンツのバランスを取り、ユーザーに負担を与えないようにし、優れたユーザー エクスペリエンスを確保する。
- スクロールせずに見える範囲の広告プレースメントとは異なり、スクロールしなければ見えない範囲の広告がすぐに読み込まれるとは限りません。ユーザーのビューポートに近づくまで広告の読み込みを遅らせると、全体的なページの読み込み速度が向上し、最初のページ レンダリング時間を短縮できます。
戦略的に使用すると、スクロールしなければ見えない範囲の広告はスクロールせずに見える範囲の広告を補完し、クリエイティブな広告フォーマットとコンテンツとの関連性が高いプラットフォームとなります。ただし、優れたユーザー エクスペリエンスを実現するには、視認性の最適化、コンテンツのバランス調整、広告の読み込みタイミングの管理が重要な考慮事項となります。
Google パブリッシャー タグ（GPT）の現在のベスト プラクティス:
必要に応じて広告を遅延読み込みする
遅延読み込みは、重要ではないリソースが必要になるまで読み込みを遅らせる手法です。すぐには見えない広告（スクロールしなければ見えない範囲の広告）に遅延読み込みを適用すると、広告が実際に表示されたときにのみ読み込まれるようになり、帯域幅を節約してページ全体の速度を改善できます。シンプルな loading=lazy 属性を使用した iframe のネイティブ遅延読み込みがブラウザに組み込まれました。
遅延読み込みを実装することで、広告がユーザーのビューポートに入る直前に動的に取得されるため、ページのライフサイクルの重要な部分でメインスレッドでの初期読み込み時間と合計ブロック時間（TBT）（INP と強く相関）が短縮され、ユーザー エクスペリエンスへの悪影響が最小限に抑えられます。
ページを更新せずに広告を更新する
ページのパフォーマンスと広告の読み込みとのバランスを取るには、ページ全体を再読み込みすることなく 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 を遵守することが重要です。そうすれば、煩わしい広告フォーマットが減ることでユーザー エクスペリエンスが向上するだけでなく、広告配信の位置とページの読み込み時間にもプラスの影響があります。
これらの基準に従うことで、広告を邪魔にならない位置に配置しやすくなるため、ユーザー エンゲージメントとクリック率の向上につながります。
さらに、これらのガイドラインに準拠することで、軽量でリソース消費量が少ない広告フォーマットが優先されるため、ページの読み込み速度が速くなり、ウェブサイトの全体的なパフォーマンスとユーザー満足度の向上にもつながります。
広告ネットワークとプロバイダの戦略的評価
広告ネットワークやプロバイダによってパフォーマンスは異なります。最適なページ速度を実現するには、ウェブサイトの所有者は、さまざまな広告ネットワーク、ヘッダー入札の実装、プロバイダのパフォーマンスを慎重に評価する必要があります。
スピードを重視し、軽量の広告コンテンツを効率的に配信してきた実績のあるプロバイダとパートナーシップを組むことで、ページ パフォーマンスの大幅な向上とユーザー エクスペリエンスの向上を実現できます。
おわりに
優れたユーザー エクスペリエンスを提供しながら、オンライン広告で収益を最大化したいとお考えのウェブサイトの所有者にとって、収益化とパフォーマンスのバランスを取ることは非常に重要です。
非同期読み込み、遅延読み込み、広告フォーマットとサイズの最適化、インテリジェントなキャッシュの活用、広告ネットワークの慎重な評価、ヘッダー入札とプロバイダなどの手法を使用することで、ウェブサイトの所有者はページのパフォーマンスを損なうことなく、広告の読み込みの課題に適切に対処できます。広告の効率的な配信を優先することで、最終的にはユーザーの層化、エンゲージメントの向上、持続可能な収益創出を実現できます。
脚注
- 広告サーバーによっては、制限や要件が適用される場合があります。たとえば、アド マネージャーでは UI で更新する広告枠を宣言する必要があります。購入者によっては、更新の宣言を 240 秒以上にする必要があります。一般に、更新の間隔が長いほど、購入者にとっては有益な広告枠となります。詳細