JavaScriptファイルやスクリプトにdeferやasync属性を使用することで、ページのレンダリングをブロックすることなく非同期にスクリプトを読み込むことができます。
defer: スクリプトの読み込みと実行をページの解析（パース）が完了してからにします。async: スクリプトを非同期に読み込みますが、読み込みが終わり次第すぐに実行します。
<!-- defer属性を使った場合 --> <script src="example.js" defer></script> <!-- async属性を使った場合 --> <script src="example.js" async></script>
また、JavaScriptで「スクロール位置」や「ユーザーのインタラクション」に応じて動的にコンテンツ（例えば、画像やその他の要素）を読み込むような処理を書くこともあります。このようなケースでは、確かに「必要なときだけ読み込む」という原則が適用できます。
ただし、JavaScriptに関しては最適化が少し複雑で、何をいつ読み込むかは具体的なケースによって異なるため、一概に「これを設定した方がいい」とは言い切れません。パフォーマンス改善には多くの要素が影響するため、具体的な状況に応じて適切な最適化を行う必要があります。
deferとasyncの違い
async: スクリプトはページのレンダリングとは独立して非同期でダウンロードされます。ダウンロードが完了したら、ページのレンダリングを中断してスクリプトが即座に実行されます。defer: スクリプトはページのレンダリングとは独立して非同期でダウンロードされますが、実行はページの解析が完了した後に行われます。複数のdeferスクリプトがある場合、それらは指定された順序で実行されます。
いつどれを使うべきか？
- ページ上で即座に実行する必要があるスクリプト: これには
asyncやdeferは一般的には不適です。このようなスクリプトは、<head>タグ内か<body>の最上部に置かれることが多いです。 - 依存関係のないスクリプト: これはページのレンダリングとは独立して実行できるスクリプトです。このような場合、
asyncが適しています。 - 依存関係のあるスクリプトまたは順序が重要なスクリプト: これは他のスクリプトやページの解析が完了するまで待つ必要があるスクリプトです。このような場合、
deferが適しています。 - ユーザーのインタラクションに基づくスクリプト: たとえば、ボタンクリックで何かが起こるようなスクリプトは、
deferを使ってページの解析後に読み込むようにすることが多いです。
それぞれのスクリプトやその用途によって、最適な選択が異なります。一概に「これを設定すれば良い」とは言い切れないのが、ウェブパフォーマンスの複雑なところです。最適な設定は、ページの内容、ユーザーの行動、その他の技術的な要因によって異なる可能性があります。ですから、具体的なケースに応じて適切な設定を選ぶ必要があります。
もう少し簡単に。
async: この設定がされたスクリプトは、「ダウンロードが終わったらすぐに動かしても大丈夫だよ」という意味になります。ページがまだ読み込み途中でも、このスクリプトはすぐに動き始めます。defer: この設定がされたスクリプトは、「ページ全体の読み込みが終わってから動かしてね」という意味になります。このスクリプトは、ページのすべてが読み込まれてから動き始めます。
使いどきの例
- 「今すぐ動かせ！」（
async）: 例えば、広告を表示するスクリプトなど、すぐに動かして問題ないものに使います。 - 「ちょっと待って、準備ができたら動かして」（
defer）: 例えば、ページのレイアウトやデザインに影響を与えるスクリプトに使います。全部の情報が揃ってから動かしたい場合に使います。
このように、それぞれの設定は「いつスクリプトを動かすか」というタイミングを制御しています。どちらを使うかは、そのスクリプトがどれだけ急いで動かさなければならないか、あるいは待ってから動かした方がいいかによります。