Chromeの開発者ツールを開くとコンソールに何か出てるな。というのは気になってたんだけど、スルーしてたらこんな投稿があることを教えてもらった。
「遅い通信だとChromeはdocument.writeで外部のスクリプトを読み込んでも動かなくなるらしい(A Parser-blocking, cross-origin script …)」

今どきdocument.write()なんて…

無いと思うでしょ？でもあったんですよ(コンソールにメッセージが出てたくらいだからそりゃそうか)。今すぐどうこうって訳ではなさそうですが、レンダリングを妨げているのは確かなので、ブログパーツや広告など、昔っから入れっぱなしのものはチェックしておいた方が良いんじゃないですかね？

ざっと検証してFriendly iFrameしかないかな？と、思うに至った経緯をメモ。

scriptタグのasync属性やdefer属性でどうにかならない？

これでどうにかなってくれると一番簡単だと真っ先に試してみた。が、読み込んだ外部スクリプトのなかでdocument.write()を使っているとブラウザが真っ白になってしまう。外部スクリプトがdocument.write()を使っていなければ良いんだけど、そうじゃないからdocument.write()で読み込む必要があるわけで、これで解決できるケースは少なそう。

node.insertBefore()やnode.appendChild()でどうにか…

「ハイパフォーマンスWebサイト」に書いてあったのを思い出し試してみた。これも読み込んだ外部スクリプトのなかでdocument.write()を使っているとうまくいかない。

Friendly iFrame

検索してたら良い資料「Friendly iFrame とサードパーティスクリプトのロード – Please Sleep」があったので試してみた。これは読み込んだ外部スクリプトのなかにdocument.write()があっても動く！しかも、iABのベストプラクティスということなので一般的な実装だと思って良さそうだ。

しかし、リンク先にも書いてある通り、動的に生成したiframeのなかでdocument.write()することになるため、サイズが変わる場合の考慮が必要なのと、親ドキュメントを参照/変更するものの場合は読み込むスクリプトを修正する必要がある。

まとめ

外部スクリプトのなかにdocument.write()がある場合、Friendly iFrameを使うしかなさそう。