広告スクリプトを静的に読み込む

概要

この監査では、広告スクリプトがページに挿入されているかどうかを確認します。ページ上の他のリソースにより、挿入されたスクリプトの取得と読み込みが遅延し、広告の読み込みが遅れる可能性があります。場合によっては、これらのスクリプトがまったく取得されず、広告がすべて一緒に読み込まれないことがあります。

推奨事項

非同期スクリプトタグを使用してスクリプトを読み込むと、処理速度が向上します。レンダリング ブロック リソースがスクリプトの実行をブロックしている場合でも、ブラウザのプリロード スキャナは、スクリプトタグを早期にフェッチできます。

<script>
  var el = document.createElement('script');
  el.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
  var node = document.getElementsByTagName('script')[0];
  node.parentNode.insertBefore(el, node);
</script>

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

挿入された広告スクリプトのソースを特定する

広告スクリプトがページにどのように挿入されているか、あるいはそもそも挿入されているかが不明な場合があります。たとえば、ページの読み込み後にページのソースを調べる場合、挿入されたスクリプトタグは、静的に読み込まれたタグと区別がつかないことがあります。

このような場合は、Chrome DevTools の [Network] タブを使用して、挿入された広告スクリプトのソースを特定します。

1. Control+Shift+J または Command+Option+J（Mac）を押して DevTools を開きます。
2. [ネットワーク] タブに移動します。
3. まだ表示されていない場合は、[フィルタ ] をクリックしてフィルタバーを開き、この監査でフラグが付けられたスクリプトの名前をテキスト ボックスに入力します。
4. まだ表示されていない場合は、テーブル ヘッダーを右クリックして [イニシエータ] を選択し、ネットワーク リクエストのウォーターフォール テーブルにイニシエータ列を含めます。
5. ページを再読み込みして、ネットワーク トラフィックを取得します。

上のスクリーンショットに示すように、[Initiator] 列には対象のスクリプトのソースに関する情報が表示されます。ソースリンクをクリックすると、その広告リクエストを発行するコードに直接移動できます。また、ソースリンクにカーソルを合わせると、リクエストに至るまでのすべての呼び出しを確認できます。

詳細

この監査は、静的に読み込んでも安全であることがわかっている広告スクリプトの許可リストに対して行われます。現在のリストは次のとおりです。

document.write() への介入
スクリプト挿入の「非同期スクリプト」は有害と見なされる
非同期スニペットの高速化