外部スクリプトの遅延読み込みでサイトの表示速度を改善

広告やバナーなど<script>タグで呼び出す外部スクリプトは、サイトの表示を遅くさせます。

ファーストビューで不要なものは遅延読み込みさせよ、というのが最近のスタンダードなので、実質的にサイトをそれほど遅くさせるような体感はなくても、Page Speed Insightで指摘されてしまうと直さないと点数が上がりません。

この記事では、画像の読み込み遅延を単純にLazyloadプラグインで行うだけでは対応できないJavascriptの遅延読み込みについてまとめています。

プラグインのJavascriptで背景画像が動的に読み込まれるのを遅延させたい

ギャラリー系のプラグインを使う際に、箱だけ用意して後からjavascript経由で背景画像としてstyleタグでインライン埋め込みしてくるケースがあります。

動的に追加された背景画像はLazy loadできないので、javascriptの実行タイミングを遅らせることで背景画像を遅延読み込みできます。

javascriptの実行タイミングを遅らせるのは、Lazy scriptというjQueryスクリプトがありますので、それを使うことで実現できます。

GitHub - hayageek/jquery-lazy-script: jQuery Lazy Script

jQuery Lazy Script. Contribute to hayageek/jquery-lazy-script development by creating an account on GitHub.

github.com

プラグインで読み込むjavascriptをdequeし、Lazy scriptで再度読み込みなおせばいいです。

自動的に読み込まれるjavascriptをスクロールで遅延読み込みする

jQuery(function ($) {
    var options = {
        type: "scroll",
        scripts: [
		"http://platform.twitter.com/widgets.js",
			],
        success: function () {
        }
    };
    $.lazyscript(options);

});

自動的に読み込まれるjavascriptの読み込みを中止

//Dequeue JavaScripts
function project_dequeue_unnecessary_scripts() {
    wp_dequeue_script( 'sb_instagram_scripts' );
    wp_deregister_script( 'sb_instagram_scripts' );
}
add_action( 'wp_print_scripts', 'project_dequeue_unnecessary_scripts' );

予約ウィジットのような外部スクリプトを遅延読み込みしたい

<script>タグでjavascript経由でiframeを呼び出してウィジットを表示させるようなケースがあります。

埋め込みタイプの<script>タグは、javascriptの遅延読み込みだと対応できません。スクリプトの遅延読み込みだと表示する場所の指定がないためです。

フレンドリー アイフレーム（Friendly iFrame）という技術を使うと、<script>タグをiFrame経由で呼び出すことができるようになります。

iFrameに変換できると、Lazy loadプラグインで簡単に遅延読み込みさせることができるようになります。

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

画像（img タグ）を遅延読み込み（LazyLoad）するプラグインと同じように、外部スクリプト（script タグ）を遅延読み込みする方法です。 具体的には、JavaScript で提供されている広告タグや、各種ブログ

designhack.slashlab.net

まとめ

Page Speed InsightでJavascriptは読み込んだ後の処理で指摘されてしまうと、読み込むタイミングを遅らせるしか方法がありません。Javascriptの読み込みを遅らせたいケースは大きく2つで、単純にフッターで読み込むような、HTMLの表示に直接影響しないタイプと、アフィリエイトタグのようにjavascriptをHTMLに埋め込むタイプです。

今回の記事では上記の2つのタイプについて、javascriptの遅延読み込み方法をまとめてみました。