document.write() を使用

document.write() を使用すると、ページ コンテンツの表示が数十秒遅れる可能性があり、接続速度が遅いユーザーにとっては特に問題になります。そのため、Chrome は多くの場合 document.write() の実行をブロックします。つまり、デベロッパーがこれに依存することはできません。

document.write() を使用すると、Chrome DevTools Console で次のメッセージが表示されます。

[Violation] Avoid using document.write().

Firefox の DevTools Console に、次のメッセージが表示されます。

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 の使用状況を示す Lighthouse の監査

特に問題のある使用法では、Chrome はユーザーの接続速度に応じて、document.write() の呼び出しをブロックするか、呼び出しに関するコンソール警告を表示します。いずれの場合も、影響を受ける呼び出しは DevTools コンソールに表示されます。詳しくは、Google の document.write() に対する介入の記事をご覧ください。

document.write() の呼び出しが残っている場合、Lighthouse ではその呼び出しが報告されます。これは、呼び出しの方法に関係なくパフォーマンスに悪影響を及ぼし、より適切な代替手段があるためです。

document.write() を避ける

コード内で document.write() の使用をすべて削除します。サードパーティのスクリプトの挿入に使用している場合は、代わりに非同期読み込みを使用してください。

サードパーティのコードが document.write() を使用している場合は、プロバイダに非同期読み込みをサポートするよう依頼してください。

関連情報