表示を高速化するjsファイルの読み込み方
サードパーティスクリプトとは
外部から提供されている機能のスクリプトのこと。例として以下のようなものがあげられる。
- TwitterやFacebookなどのSNSでシェアするボタン
- YouTubeのような動画の埋め込み
- 広告系のiframe
- 解析やメトリクスツール
- A/Bテスト
- データのフォーマティングやアニメーションなどのヘルパーライブラリー
asyncとdefer
htmlファイルからscriptタグによって読み込むjsファイルは、属性を追加しないとhtmlファイルのパースを中断し、同一のスレッドでjsファイルをダウンロード、実行する。
Loading Third-Party JavaScript
asyncとdeferはjsファイルを他のスレッドで非同期でダウンロードする。しかし、asyncはjsファイルのダウンロードが終わるとhtmlのパースを中断しjsファイルを実行する。そしてjsファイルの実行が終わるとhtmlのパースを再開する。もう一つの属性deferはjsファイルのダウンロードを非同期で行う点は同じだが、実行がhtmlのパースが完全に終了した後である。したがってjsファイルの実行までに最も時間がかかる。既にレンダーされたdomの元でjsが実行される。
コアの機能がjsを必要とするならasync、そうでなければdeferを使うのが適切だ。Googleのデベロッパーズガイドではサードパーティの読み込みには常にどちらかの属性を追加することを推奨している。サードパーティスクリプトはdomに影響を与えないものである。
asyncはGoogle Analyticsやトラッキングスクリプト
deferは重要度が低いもの。例えばbelow the fold（画面を下にスクロールしないと）現れない動画の読み込みに用いる。
