にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2016/11/19. 13:17:37.

読み込みが凄まじく遅い外部スクリプトを、何もかも読み終えた最後に読み込ませる方法

アクセス解析スクリプトやブログパーツ追加スクリプトなど、外部から提供されるスクリプトをウェブページ内で読み込みたい場合があります。
その外部サーバの反応速度が速ければ何も問題はないのですが、混雑していたり非力だったりして数十秒くらい経たないとデータが送られてこないような反応速度の遅いサービスもあります。
そのような読み込み速度の遅いスクリプトを普通にscript要素を使って読み込ませていると、ウェブページの読み込み完了までに時間がかかってしまいます。

HTML末尾に書いたりasync属性を付加しても、ブラウザの「読み込み中」アニメーションは続いてしまう

その手のスクリプトは、たいてい </body> タグの直前あたり(=HTMLの最後の方)に記述していたり、script要素にasync属性を付加して非同期で読み込むよう指定しているでしょうから(下記ソース参照)、実際にウェブページを閲覧しているユーザには何ら影響はないかも知れません。

<script type="text/javascript" src="超遅い外部スクリプトのURL" async></script>

しかし、たとえそれらの方法で読み込むように記述していても、「ウェブページ全体の読み込みがなかなか完了しない」という状況では、ブラウザが「読み込み中」のアニメーション(※)をずっと表示し続けるために「なんか重たいページだな」と思われてしまう可能性もあります。
もしかしたら、検索サイトから「遅いページ」だと認識されてしまって何らかの検索上の不利益もあるかも知れません。

※最近のブラウザであれば、ウェブページ名が表示されるタブの左端で、くるくる回転する円形のアイコンが見えますよね。読み込みが完了した時点で、そのページのファビコン(favion)に変わるアイコンです。あのくるくる回転するアニメーションが見えているうちは「読み込みが完了していない」と認識しますよね? なので、たとえ見える範囲の描画が完了していたとしても「なんか重たいページだな」と思われる可能性がありそうです。

画像などのオブジェクトも含めた全ての読み込みが完了した後で、遅い外部スクリプトの読み込みを開始する

というわけで、そのような凄まじく遅いスクリプトは、ウェブ上の画像なども含めたあらゆるオブジェクトを全て読み込み終えた後で読み込み始めるように記述しておくと良さげな気がします。
例えば、以下のように記述します。(jQueryを使う場合)

<script>
   $(window).load(function () {
      var tooheavy = document.createElement("script");
      tooheavy.setAttribute("src", 'http://超遅い外部スクリプトのURL/');
      tooheavy.setAttribute("type", "text/javascript");
      tooheavy.setAttribute("async", "async");
      document.getElementsByTagName("head")[0].appendChild(tooheavy);
   });
</script>

上記のように、jQueryで $(window).load(function () {; ~~~ }); のように記述すると、この内側に書いたスクリプトはウェブ上の画像などのオブジェクトも含めた全てを読み込み終えてから実行されます。

この方法で読み込ませると、このスクリプトの読み込みが始まるよりも前にブラウザは「読み込み中」のアニメーションを終わらせるので(たぶん)、このスクリプト自体の読み込みが遅くても「重たいページ」には見られないと思います。
もちろん、このスクリプトが生成する何らかの要素が表示されるのは遅いわけですけども。(^_^;) そこはどうしようもないので、せめてブラウザの「読み込み中」アニメーションが終わったあとから読み込ませることで、「なかなか読み込みが完了しないページだな」とは思われないようにすると、気分的に良い気がします。(^_^;)

(補足) jQueryを使わずにJavaScriptだけで書く場合

なお、jQueryを使わずに以下のように記述しても同じです。

<script>
   window.onload = function(){
      var tooheavy = document.createElement("script");
      tooheavy.setAttribute("src", 'http://超遅い外部スクリプトのURL/');
      tooheavy.setAttribute("type", "text/javascript");
      tooheavy.setAttribute("async", "async");
      document.getElementsByTagName("head")[0].appendChild(tooheavy);
   }
</script>

ただ、上記の場合はwindowのloadイベントで実行される内容を上書きすることになるので、同じページで読み込まれている他のスクリプトに同様の記述(window.onload = ~)があった場合には、最後に記述された1つしか実行されない(参考)ので注意が必要です。(jQueryの方なら全部実行してくれます。)

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---