HTMLで外部のJavascriptの読み込みが遅い場合の3つの対処法

by ateliee · 公開済み 2013年3月20日 · 更新済み 2013年8月4日

外部のサービスソースを使用している場合、<head>内で

という用に直接ソースコードを流用する場合があります。

最近ではWebフォントサービスが拡大しており、私の場合、Webフォントサービスで指定されるスクリプトを読み込んでおりました。

しかし、提供側のサーバートラブルにより、スクリプトの読み込みが遅かった場合、ページ自体の表示も同様に遅くなることがあります。

こちらのサーバーであれば対応できますが、別サーバーの場合対応のしようがありません。

そういった場合の対応方法としておすすめのやり方をご紹介いたします。

1.外部読み込みをやめる

自分のサーバーにソースコードをコピーしておけば、サーバートラブルなどがない限り、100%安全です。

外部のソースを使う利点として、管理・更新をしなくていいのですが・・・・・

可能な限りこちらの方法を取るほうが無難です。

htmlはブラウザにて読み込まれる際に、head内のものを解析し表示いたします。

headのデータの読み込みが完了しない場合表示されないので、今回のようにページの読み込みが遅くなります。

なので、直接<body>タグ内に記述するようにすればページの表示は問題なくなるという解決方法です。

(ページの読み込み中であるローディングがぐるぐる回り続けますが)

上記のようにdeferをつけると、スクリプトが非同期にて読み込まれます。

これは知らない方も多いのでは？

以上。よろしければいいねしてくださいね(^^)