script タグの外部スクリプトを遅延読み込みする方法

April 28, 2015
1件のコメント
Hatena4
Twitter0
Facebook0
Google0
Pocket0

画像（img タグ）を遅延読み込み（LazyLoad）するプラグインと同じように、外部スクリプト（script タグ）を遅延読み込みする方法です。

How to Lazy Load Script via Friendly iFrame

具体的には、JavaScript で提供されている広告タグや、各種ブログ パーツを、ページのレンダリングをブロックしないように配置する方法です。厳密には画像の遅延読み込みとは異なりますが、遅い外部スクリプトを貼らなければならない場合、いわゆる UX（ユーザー エクスペリエンス）の改善に劇的な効果があります。

フレンドリー アイフレーム（Friendly iFrame）

簡単に説明すると、対象の外部スクリプトを呼び出す部分だけを別の HTML ファイルにしてサーバーにアップロードし、iframe タグで その HTML ファイルをページに埋め込みます。

例えば、i-mobile というアドネットワークの広告タグの場合は以下になります。

広告タグ用 HTML ファイル

<!doctype html>
<html>
<head>
<meta name="robots" content="noindex,nofollow" />
<base target="_top">
<style>
body, iframe { margin: 0; padding: 0; }
</style>
</head>
<body>

<!-- i-mobile for PC client script -->
<script type="text/javascript">
imobile_pid = "xxxxx";
imobile_asid = "xxxxx";
imobile_width = 300;
imobile_height = 250;
</script>
<script type="text/javascript" src="http://spdeliver.i-mobile.co.jp/script/ads.js?20101001"></script>

</body>
</html>

サイト側 HTML

...
<iframe src="/html/fiframe_ad_imobile_pc_300x250.html" width="300" height="250" scrolling="no" frameborder="0"></iframe>
...

プチ解説

script タグは同期実行ですが、iframe 内はデフォルトで非同期読み込みです。フレンドリー アイフレームは それを利用してスクリプトを非同期実行する手法です。iframe の中に対象のスクリプトを隔離することによって、非同期にするわけです。以下サイトの説明が詳しいです。

挫折と栄光の軌跡

JavaScript がページのレンダリングをブロックし、ページの表示が途中で止まってしまう原因は、スクリプトが同期実行されるためです。貼り付けた外部スクリプトをホストしているサーバーの応答が遅いと、それだけ待ち時間が長くなり、閲覧者には途中から真っ白なページのまま止まったように見えます。無様ですね。

これを何とかしたいと検索すると、script タグの async オプションの存在を知ることになります。しかし残念なことに、グーグルやフェイスブック、ツイッターなど一部の IT マッチョな企業を除き、多くの広告タグやブログ パーツは async に対応していません。

ならば、と async（非同期実行）に対応していないスクリプトを非同期化するプラグインを探します。あります。ありますが、document.write がネストしているスクリプトには対応できません。

ここまできても諦めなかった者のみが、Friendly iFrame（FiF）に辿り着きます。これをショートカットしたい。もっと早く知りたかった。そんな気持ちを込めて本稿を書きました。

デメリット（制限事項）

FiF も万能ではありません。大きな欠点が 1つだけあります。

  • レスポンシブ対応に手間が掛かる

広告タグのようにサイズが固定の場合は問題ありません。また、iframe 要素自体をレスポンシブにすることは可能です。

iframe の中は いわば別世界なので、親ページのサイズが iframe の中に自動で伝わりません。iframe 内のコンテンツをレスポンシブにするには、JavaScript でサイズ調整の機構を実装する必要があります。もしくは、iframe 内のコンテンツ読み込みが完了したあとに、iframe 内から親ページにコンテンツを移す方法もあります。いずれにしても手間が掛かりますね。

しかし、ページの表示が途中で止まってしまうという精神的苦痛からは解放されます。悩ましい。

やはり根元を断つしかないようです。「document.write は お願いだから やめてくれ」

One thought on “script タグの外部スクリプトを遅延読み込みする方法”

  1. Pingback: Twitter ウィジェットを Chrome で表示したときの不具合を回避する方法 | Design Hack and Slash

コメントを残す

メールアドレスが公開されることはありません。