document.write() を使用すると、ページ コンテンツの表示が数十秒遅れる可能性があります。これは、接続速度が遅いユーザーにとって特に問題になります。そのため、Chrome では多くの場合 document.write() の実行がブロックされるため、この方法は使用できません。
Chrome DevTools コンソールで document.write() を使用すると、次のメッセージが表示されます。
[Violation] Avoid using document.write().
Firefox DevTools コンソールに次のようなメッセージが表示されます。
An unbalanced tree was written using document.write() causing
data from the network to be reparsed.
Lighthouse document.write() 監査が失敗する仕組み
Lighthouse は、Chrome によってブロックされていない document.write() への呼び出しを報告します。
問題となる使用方法では、ユーザーの接続速度に応じて、document.write() への呼び出しがブロックされるか、コンソール エラーが生成されます。どちらの場合も、影響を受ける呼び出しが DevTools コンソールに表示されます。詳しくは、Google のdocument.write() に対する介入に関する記事をご覧ください。
Lighthouse は、document.write() への残りの呼び出しを報告します。これは、どのように使用してもパフォーマンスに悪影響を及ぼし、より優れた代替手段があるためです。
document.write() を避ける
コード内の document.write() の使用をすべて削除します。サードパーティ スクリプトの挿入に使用されている場合は、代わりに非同期読み込みを使用してください。
サードパーティのコードが document.write() を使用している場合は、非同期読み込みをサポートするようプロバイダに依頼します。