javascriptを非同期で読み込ませてレンダリングブロックを回避することで、ページの表示の体感を早める
WEBサイトにはページの読み込みにかかる時間と、人がサイトを開いた時に表示されるまでの時間には差があって。ページの読み込み時間をよく比較することが有るのですが、実際にはページ全体が読み込まれなくてもファーストビューがパッと表示されて、ページを読む速度よりも早くページ全体の読み込みが完了すればなんの問題もないですよね？
例えるなら、線路を走る電車よりも早くレールを作り上げれたらスピードを落とさず快適に走れる的な感じです。なんか水が溢れる前にパイプをつなげていくレトロなゲームとかありましたよね、あんな感じにクリアできたら問題ないってことです
なので、ページ全体の読み込み時間はそんなに気にする必要ないかも(軽ければ軽いに越したことはないが)
ただ！、javascriptがあったらそれを実行するまで次が読み込まれないので、WEBサイト必要な機能に関連しないものは今はいらないでしょうということで、遅延させて読み込ませればOK
通常はjavascriptは同期読み込みされます、コレを非同期させる事が今回の目的
javascriptを非同期で読み込ませてレンダリングブロックを回避してページの表示の体感速度をあげよう
javascriptでの非同期にする方法には2つの方法があります
その1 async を使った方法
通常のjavascript
<script src="javascript.js"> </script>
asyncを使って遅延させたjavascript
<script async src="javascript"> </script>
通常のjavascriptのscriptタグにasyncを追加しただけです
asyncを使うと、メインのページの読み込みとは分離してダウンロードされ実行されるので。javascriptによるレンダリングブロックを防ぐことが出来ます
その2 defer を使った方法
通常のjavascript
<script src="javascript.js"> </script>
deferを使って遅延させたjavascript
<script defer src="javascript.js"> </script>
asyncと同じ書き方でscriptタグにdeferをつけるだけです
こちらはメインのページが全てと見込まれた後に実行されます、これがasyncとの違いです
その3 asyncとdefer 両方を使った方法
通常はもう省略して
<script async defer src="javascript.js"> </script>
両方を同居させてasyncを優先的に利用しています、asyncに対応していないブラウザではdeferを使うようにすることで多くのブラウザで非同期で遅延させて実行できるようにします
Google Adsenseの非同期コードではasyncが使われています。もしAdsenseを使っていたらチェックしてみるといいかも
あとはメインに関係しないjavascriptの非同期化をSNS関連のjsとかに適応してやれば ページのファーストビューの表示速度のアップにつながります！
COMMENT