外部JavaScriptファイルを動的に読み込みWEBサイトを高速にしましょう！

JavaScriptは通常の＜head＞＜/head＞タグ内に記述しますが、この場合HTML描画前にJavaScript読み込みが発生し、またJavaScriptの読み込みが終わるまで待機しているので、読み込み終わりを待ってからでないとHTML描画は開始されません。

そこで外部JavaScriptファイルを動的（HTMLレンダリングと同時、またはDOM Ready時）に読み込むよう変更します。

■ 方法1-1. async をつけて読み込む

今までJavaScriptは以下のように読み込んできました。

<script src="myfile.js"></script>

これに async を追加します

<script src="myfile.js" async></script>

これで非同期読み込みとなり、「Javascript読み込み」と「HTMLページ描画」が同時に行われ、高速にページを表示することができます。

ただしasync属性の特徴として

・.js ファイル読み込み完了と同時にその .jsファイルを実行する

・実行順序がバラバラ（読み込み完了順）になる

がありますので jQuery プラグイン等 jQueryの存在が前提となるスクリプトがある場合はオススメしません

また

document.addEventListener('DOMContentLoaded', function(){
// 何かしらの処理
});

を使うときも async で読み込まれたプログラムの場合はうまく動作しませんので注意が必要です。

■ 方法1-2. defer をつけて読み込む（とりあえずJavaScriptはよくわからないけど高速化したいという方にはこちらの方をおすすめします。）

async属性の代わりにdefer属性というのもあります。

違いは

async :  .jsファイル読み込み直後に実行。『複数の .jsファイルを読み込む場合に実行順序は保証されない』
defer :  DOMツリー構築完了直後（DomReadyハンドラ前）に実行。『実行順序は保証される』

です。どちらもDOM構築を妨げない（HTMLレンダリングが高速）のは同じです。

記述方法は

<script src="myfile.js"></script>

これに defer を追加します

<script src="myfile.js" defer></script>

簡単ですのでこちらをおすすめします。

■ 方法2. 遅延読み込みスクリプトで対応する（古いけど確実なやり方）

例：3つのJavaScriptファイル『aaa.js』『bbb.js』『ccc.js』と1つのCSSファイル『test.cs』を遅延読み込みする（要：jQuery）

// dom ready時に読み込み開始（事前にjQueryを読み込ませておいてください。）
$(function(){
		alert('js load start !!! ');
		require_onload( ['aaa.js', 'bbb.js', 'ccc.js', 'test.css'] );
});

function require_onload( arg ) {
	if (is_array(arg)){
		var element = [];
		for(var i=0; i<arg.length; i++){
			if ( arg[i].match(/\.css$/) ){
				add_child_css(arg[i]);
			}
			else if ( arg[i].match(/\.js$/) ){
				add_child_js(arg[i]);
			}
			else{ alert('check url : ' + arg[i]) }
		}
	}
	else{
		if ( arg.match(/\.css$/) ){
			add_child_css(arg);
		}
		else if ( arg.match(/\.js$/) ){
			add_child_js(arg);
		}
		else{ alert('check url : ' + arg[i]) }
	}
}
function add_child_js(src){
	var element = document.createElement("script");
	element.src = src;
	document.body.appendChild(element);
}
function add_child_css(src){
	var css_element = document.createElement('link');
	css_element.type = 'text/css';
	css_element.rel  = 'stylesheet';
	css_element.href = src;
	document.body.appendChild(css_element);
}
function is_array(obj) {
	return Object.prototype.toString.call(obj) === '[object Array]';
}

これを＜head＞〜＜/head＞タグ内に設置します。（＜/body＞タグ直前でなくてもOK。）

3行目に

		alert('js load start !!! ');

があるので、読み込み開始時にアラートが表示されます。（もうその時にはHTML描画（正確にはDOM構築）が終わっていることが確認できると思います。）

実際使うときにはこの行は削除してください。

このスクリプトを使うと全てのページ描画準備が終わった段階（DOM Ready）で .js .css を読み込みに行きますので高速になります。

またページレイアウトに関係ある .css を遅延読み込みするとHTML描画とCSSスタイルの読み込み・適用が同時に行われるので画面が一瞬乱れる可能性があります。

ですのでWEBフォントの .css など レイアウトに関係ない .css を遅延読み込みするといいでしょう。