Google Chromeのデベロッパーツールに出る「A parser-blocking, cross site...」という警告についてです。
この警告は、低速回線（モバイル：2G）を使用しているユーザーに対して自動的にChromeが該当スクリプトの読み込みをブロックします。という内容です。
主にクロスドメインになる外部サービスをサイトに埋め込んだ時などによく出るはずですが、内容と対処方法を詳しくまとめました。
エラーではなく警告（warnings）ですが、可能なら対処しておきましょう。
この記事の目次
A parser-blocking, cross site...とは？
当サイトに楽天市場の商品を表示する「楽天モーションウィジェット」を埋め込んだあと、Chromeのデベロッパーツールを確認すると「A parser-blocking, cross site...」という見慣れない警告が発生していました。
楽天モーションウィジェットのjsにて警告が発生
早速確認すると、ウィジェットに使用するjsに警告が発生している様子です。
エラーではなく警告なのですが、気になったので調べてみます。
A parser-blocking, cross site (i.e. different eTLD+1) script,…のエラー
警告の全文は以下のような感じです。
A parser-blocking, cross site (i.e. different eTLD+1) script, https://～省略～, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://chromestatus.com/feature/5718547946799104 for more details.
【Google翻訳】
パーサーをブロックするクロスサイト（つまり、異なるeTLD + 1）スクリプトhttps://〜省略〜は、document.writeを介して呼び出されます。 このスクリプトのネットワーク要求は、ネットワーク接続が不十分なため、このページまたは将来のページの読み込み時にブラウザによってブロックされる可能性があります。 このページの読み込みでブロックされた場合、後続のコンソールメッセージで確認されます。 詳細については、https://chromestatus.com/feature/5718547946799104を参照してください。
警告文にある参照リンクを見たところ、この警告の要点は以下のようなものでした。
- 2G（モバイル）などの低速ユーザーが対象になる。
- クロスサイト（別ドメイン）からのscriptの読み込みが原因。
- Chromeがscriptをブロックする理由はページの表示速度の改善。
- script内のdocument.writeメソッドで挿入されるコンテンツが対象。
以上を簡単にまとめると、別オリジンのJavascriptのリソース内にdocument.write()が使われているとダメなようです。低速回線では”重すぎる”わけです。
ちなみに問題になっているファイル名やコード箇所はChromeのデベロッパーツールから確認することができます。確認方法は簡単で、デベロッパーツールの警告が出ているところでファイル名をクリックすればOKです。
警告が出ているファイル名をクリックすれば問題箇所が分かる（Chromeデベロッパーツール）
今回は楽天モーションウィジェットで使用されている「widget.js」というファイル内に使用されていたdocument.write()が直接の原因でした。
ポイント
document.writeはJavascriptで使用されるメソッドで、文字列をWebブラウザに表示させるために使われます。広告パーツの挿入などにも使用されています。
スクリプトが実行されなくなる条件
調べたところ、現在のChrome（バージョン55以降）では以下の条件を全て満たした時だけdocument.write()スクリプトの読み込みが自動でブロックされるようです。
- ユーザーが低速回線を使用している。
（主に2Gですが、将来的に3Gや低速Wi-Fiが対象になる可能性あり。） - トップレベルのドキュメントに
document.write()がある。
（iframe内のdocument.writeはブロック対象外。） - パーサーブロッキングに該当する。
（非同期ならブロック対象外＝scriptにasyncやdefer属性があればOK。） - 読み込むスクリプトがクロスサイトにある。
（同ホスト上のスクリプトはブロック対象外＝自サイトからはOK。） - ブラウザのHTTPキャッシュがない。
（スクリプトがブラウザにキャッシュされていればブロック対象外。） - ページ読み込みがリロードではない。
（同スクリプトをリロードで読み込んだ場合はブロック対象外。）
上記の”すべての条件を満たした時だけ”該当スクリプトがChromeによって自動的にブロックされます。
こう見ると2G回線もそうですが、大体のサイトはキャッシュや非同期読み込みを使用していると思うので、スクリプトが実際にブロックされるのはごく稀なはずです。
外部リンク
A parser-blocking, cross site...の対処方法
エラーではなく警告であり、そうそう条件に当てはまることもないので分からない方はこの警告文は無視してもOKだと思います。警告というよりはお知らせに近いので…
ただ、Javascriptが分かる方なら簡単に対処できるので対処方法も書いておきます。
Chromeのデベロッパーツールに「A parser-blocking, cross site...」という表示が出る時の簡単な対処方法は以下です。
- スクリプトの読み込み部分、scriptタグ内にasyncやdeferを追加する。
- 該当コードをiframe内に書き出す。
- document.writeの代わりにparentNode.insertBeforeなどを使う。
一番簡単というか、現実的なのはasyncやdeferを使ってスクリプトを非同期読み込みにする方法でしょう。
そもそもクロスサイトのリソース内にdocument.writeが使われている場合はコードを書き換えたり、オリジン内に保存しておくことも困難だと思いますので…
まとめ
以上、Chromeのデベロッパーツールに出る「A parser-blocking, cross site...」という警告についてでした。
余談ですが、今回この警告が発生した原因である「楽天モーションウィジェット」においては非同期読み込みにするとエラーが発生して商品が表示できなくなるのです…
そんな訳で商品を表示できるようにしたところ、この警告が出たという流れです。
警告が出たままになるのは少々気になりますが、現在国内に2Gユーザーはほぼいないと思いますので今回は放置しました。今やdocument.writeは非推奨になっているのでやはり気になりますけどね。
