document.write() に対する介入

Paul Kinlan

最近、 何だろう？

(index):34 A Parser-blocking, cross-origin script,
https://paul.kinlan.me/ad-inject.js, is invoked via document.write().
This may be blocked by the browser if the device has poor network connectivity.

コンポーザビリティはウェブの強みの一つであり、 サードパーティが構築したサービスと統合し、優れた新プロダクトを構築できます。1 本 コンポーザビリティの欠点の一つは より重要な役割を果たします統合が最適でない場合、ユーザー エクスペリエンスは 悪影響を受けます

パフォーマンス低下の原因の 1 つとして、ページ内での document.write() の使用が挙げられます。 特に、スクリプトを挿入する用途に特化しています。ご覧のとおり、無害です。 ユーザーに現実の問題をもたらす可能性があります。

document.write('<script src="https://example.com/ad-inject.js"></script>');

ブラウザは、ページをレンダリングする前に、HTML マークアップを解析して DOM ツリーを構築する必要があります。 パーサーがスクリプトを検出するたびに、処理を続行する前にスクリプトを停止して実行する必要がある 表示されます。スクリプトが別のスクリプトを動的に挿入する場合、パーサーは強制的に待機し、 リソースのダウンロードにさらに時間がかかるため、1 つ以上のネットワーク ラウンドトリップと ページの最初のレンダリングを遅らせる

2G などの接続速度が遅いユーザーに対しては、外部スクリプトを動的に document.write() を介して挿入されると、メインページ コンテンツの表示が 何十秒もかかることがあり、ページの読み込みに失敗したり、 ユーザーはあきらめてしまいますChrome のインストルメンテーションから document.write() を介して挿入されたサードパーティのスクリプトを含むページ 通常、2G では他のページに比べて読み込みが 2 倍遅くなります。

Chrome の 1% を対象に 28 日間のフィールド トライアルでデータを収集 2G 接続のユーザーに限定されます。全ページ読み込みの 7.6% で 少なくとも 1 つのクロスサイトのパーサー ブロック スクリプトを含んでいました。 最上位のドキュメントに document.write() を介して挿入されました。ブロックした結果 これらのスクリプトの読み込みでは、これらの読み込みで次のような改善が見られました。

  • ページの読み込みが 10% 増加 First Contentful Paint （ページを効果的に読み込んでいることをユーザーに視覚的に確認する情報） 完全に解析された状態に達するページの読み込みが 25% 増加し、再読み込みが 10% 減少します ユーザーの不満の軽減を示唆しています
  • 21% 減少（1 秒以上で） First Contentful Paint
  • ページの平均解析時間を 38% 削減。 大幅に短縮され、 ユーザーにとって重要なものを表示するのに かかる時間です

このデータを念頭に置いて Chrome では、バージョン 55 以降、 介入する パターンを検出した場合、document.write()ユーザーの Chrome で処理されます（Chrome のステータスをご覧ください）。 具体的には、Chrome は、次の方法で挿入された <script> 要素を実行しません。 次の条件がすべて満たされている場合は document.write() です。

  1. お客様の接続速度が遅い（特に 2G を利用している場合）。（ 将来的には接続速度が遅い他のユーザーにも この変更が適用される可能性があります （例: 遅い 3G、遅い Wi-Fi など）。
  2. document.write() は最上位のドキュメント内にある。この介入は iframe 内の document.writing スクリプトに適用されます。これらのスクリプトは メインページのレンダリング
  3. document.write() のスクリプトはパーサー ブロックです。スクリプトと 「async」 または「defer」 属性は引き続き実行されます。
  4. スクリプトが同じサイトでホストされていない。つまり、Chrome は 一致する eTLD+1 を持つスクリプト（ js.example.org を www.example.org に挿入）。
  5. スクリプトがブラウザの HTTP キャッシュにまだない場合。キャッシュ内のスクリプト ネットワークの遅延は発生せず 実行されます
  6. ページのリクエストは再読み込みではありません。次の場合は Chrome が介入しません。 ユーザーが再読み込みをトリガーし、ページを通常どおり実行します。

サードパーティ スニペットは、スクリプトを読み込むために document.write() を使用することがあります。 幸い、ほとんどのサードパーティは 非同期読み込みの代替手段 残りの部分の表示を妨げることなく、サードパーティのスクリプトを読み込み可能 おすすめします

どうすればよいですか？

シンプルな答えは、document.write() を使用してスクリプトを挿入しないことです。水 非同期ローダをサポートする既知のサービスのセットを維持する 定期的に確認することをおすすめします

ご利用のプロバイダがリストになく、非同期スクリプト読み込みをサポートしている場合 お知らせいただけましたら、すべてのユーザーのためにページを更新いたします。

プロバイダがスクリプトの非同期読み込み機能をサポートしていない場合 それらの業者に連絡し 報告してください 影響するかを検討します

プロバイダが document.write() を含むスニペットを提供する場合、 スクリプト要素に async 属性を追加することや、 document.appendChild() のような DOM API を使ってスクリプト要素を追加できます。 または parentNode.insertBefore()。

サイトが影響を受けるタイミングを検出する方法

制限が適用されるかどうかを判断する基準は多数ありますが、 自社が影響を受けているかどうかを知るにはどうすればよいでしょうか。

ユーザーが 2G を利用しているかどうかを検出する

今回の変更の潜在的な影響を把握するには、まず 2G を利用するユーザーの数を把握できますユーザーの現在のネットワークの種類を検出できる Network Information API を使用して、Google の Chrome で使用可能になり、分析や実際のユーザーに関する指標に前もって通知を送信する （RUM）システムです。

if(navigator.connection &&
    navigator.connection.type === 'cellular' &&
    navigator.connection.downlinkMax <= 0.115) {
    // Notify your service to indicate that you might be affected by this restriction.
}

Chrome DevTools で警告を検出する

Chrome 53 以降、DevTools で問題のある document.write() の警告を表示 ステートメント。具体的には、document.write() リクエストが条件 2 ～ 5 を満たしているかどうか （この警告を送信する際、Chrome は接続条件を無視します）、この警告は 次のようになります。

ドキュメント書き込みの警告。

Chrome DevTools で警告が表示されるのは問題ありませんが、 どうでしょうか。サーバーに送信された HTTP ヘッダーは、 介入が発生します。

スクリプト リソースの HTTP ヘッダーを確認する

document.write 経由で挿入されたスクリプトがブロックされた場合、Chrome は 次のヘッダーをリクエストしたリソースに追加します。

Intervention: <https://shorturl/relevant/spec>;

document.write 経由で挿入されたスクリプトが見つかり、ブロックされる可能性がある場合 次のようなイベントが送信されます。

Intervention: <https://shorturl/relevant/spec>; level="warning"

介入ヘッダーは、スクリプトの GET リクエストの一部として送信されます。 （実際の介入の場合は非同期で行われます）。

未来に待ち受けているものとは

最初の計画では、基準を検出したときに介入を実行する予定です。 あります。Chrome 53 では、Play Console に警告のみを表示することから始めました。 （ベータ版は 2016 年 7 月にリリースされました。Stable は、 2016 年 9 月）

2G ユーザー向けに、挿入されたスクリプトのブロックに暫定的に介入する Chrome 54（世界中のユーザーの Stable 版リリースが予定されています） 2016 年 10 月中旬に発表されました詳しくは、 Chrome のステータスのエントリ をご確認ください。

時間をかけて、ユーザーの接続速度が遅い（つまり、 （低速の 3G や Wi-Fi など）。こちらの Chrome のステータスをご覧ください。

もっと詳しく知りたい場合

詳細については、以下の参考情報をご覧ください。