ローカル環境でwebページをテストするときに（重要ではない）外部サービスの応答待ちでページの表示が激遅のときの対処

イントロダクション

ローカル環境で web ページのテストを行うことはよくあります。
この時に、テスト対象の web ページ内に、外部の web サービスへアクセスする要素(<script>など）（以下、外部要素）が含まれていることがあります。

特に問題なく動作する外部要素もありますが、ものによっては web サーバ上でしか動かず、読み込みがタイムアウトするまでページの表示がそこで止まってしまうものがあります。

ローカル環境で効率的にテスト作業を行う上で、その待ち時間は非常にもったいないものになります。

そこで、私は以下の方法で対処しています。

対処方法

• 外部要素を<noscript>タグで囲み、動作しないようにする。

例

<noscript>

外部要素の HTML

</noscript>

解説

ローカル環境ではそもそも動かない外部要素なので、ローカル環境でのテスト中にはその部分が読み込まれる必要すらないので、外部要素を<noscript>タグで囲むことで読み込まれないようにします。

読み込まれないようにするだけなので、コメント化(<!-- --> で囲む）でもよい場合もあります。
しかし、外部要素の部分に既にコメントが使われている場合、コメントのネストはできないので、コメント化による対応はできません。
そのため、<noscript>で囲むという対処方法をとることになりました。
（外部要素の部分を一時的に消すという対処方法もあるかと思いますが、この方法の場合元に戻すのに手間がかかるという点が厄介です。）

なお、この<noscript>で囲むという対処法は<noscript>の本来の意味からすれば邪道な使い方なので、あくまで困った時の一時しのぎ的な感じの使い方です。

また、ローカル環境におけるテストが終わり、web サーバ上に移す時には <noscript> を取り外す作業を忘れてはいけません。
web サーバに移すときに忘れず文字列置換などで <noscript> を取り外しましょう。
その時に、本来の使い方をしている <noscript> と、今回の対処で埋め込んだ <noscript> を間違わないよう、<noscript>タグのそばにコメントを残しておくとよいでしょう。
そして、文字列置換などで取り外す時には、コメントの文字列を含めた検索文字列を使用して置換対象の発見および置換を行い、自動的に外部要素の<noscript>を取り外せるようにするとよいでしょう。