Defer vs Async JavaScript と Core Web Vitals への影響

最適な Core Web Vitals の結果を得るために、JavaScript を async にするタイミングと defer にするタイミングを学ぶ

Arjen Karel - linkedin

Last update: 2024-11-27

Defer vs Async JavaScript と Core Web Vitals への影響

この記事では、defer と async JavaScript の違いと、これが Core Web Vitals に影響する理由を説明します

クライアントの Core Web Vitals を監査するたびに、ページ上でパーサーブロッキング（同期）、非同期、または遅延 JavaScript の区別がほとんどされていないことに気づきます。異なるスクリプトには異なる最適なタイミングがあるため、これは残念なことです。

要約：

ページのhead にある「通常の」JavaScript は HTML の解析が始まる前に実行され、async スクリプトは解析の開始をブロックしませんが、ダウンロードされるとすぐに実行されます。defer スクリプトはページが解析された後に実行されます。

一般的に、async 属性は画像や動画を読み込むスクリプトなど、DOM と対話する必要がないスクリプトに適しています。defer 属性はウィジェットの初期化やイベントリスナーの追加を行うスクリプトなど、DOM と対話する必要があるスクリプトに適しています。スクリプトが表示されるビューポートに大きな変更を加える場合は、両方を省略してください。

1. 同期 JavaScript（Sync）：

デフォルトでは、ページの head にある JavaScript は同期スクリプトです。JavaScript コードが同期的に実行されると、スクリプトが完全に実行されるまでブラウザのメインスレッドを即座にブロックします。つまり、ブラウザはDOM のレンダリングなど、他のタスクに進む前に JavaScript コードの完了を待たなければなりません。その結果、同期 JavaScript は、特に大規模で複雑なスクリプトの場合、ページ速度と応答性に大きな影響を与える可能性があります。ページに同期 JavaScript が含まれている場合、ブラウザは JavaScript が実行されるまで他のリソースを読み込んだりページをレンダリングしたりできず、ページの読み込みに遅延が生じる可能性があります。

<!DOCTYPE html>
<html>
<head>
  <title>Sync JavaScript Example</title>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
</head>
<body>
  <!-- Page content here -->
</body>
</html>

2. 非同期 JavaScript（Async）：

非同期 JavaScript は、スクリプトがバックグラウンドでダウンロードされている間、ブラウザが他のタスクを続行することを可能にします。<script> タグで async 属性を使用することで、開発者はそのスクリプトが DOM に依存せず、独立して実行できることを示します。ブラウザは async スクリプトの読み込み完了を待たずにページのレンダリングを続行します。その結果、async スクリプトは特に低速な接続環境において、クリティカルレンダリングパスをブロックしないため、ページ速度を向上させる可能性があります。

<!DOCTYPE html>
<html>
<head>
  <title>Async JavaScript Example</title>
  <script src="script1.js" ></script>
  <script src="script2.js" ></script>
</head>
<body>
  <!-- Page content here -->
</body>
</html>

async スクリプトは、HTML ドキュメント内の順序に関係なく、利用可能になるとすぐに実行されるため、予測できない順序で実行される可能性があることに注意が必要です。スクリプト同士に依存関係がある場合、async を使用すると依存性エラーが発生する可能性があります。

3. 遅延 JavaScript（Defer）：

遅延 JavaScript は、<script> タグの defer 属性で示され、ブラウザが HTML ドキュメントの解析を続行する間、スクリプトをバックグラウンドでダウンロードすることを可能にします。async と同様に、defer スクリプトはクリティカルレンダリングパスをブロックしないため、ページの読み込みが速くなります。ただし、重要な違いは、defer スクリプトは実行順序を維持し、HTML ドキュメントに表示される順序で実行されることです。defer スクリプトは、DOM が完全に解析された後、DOMContentLoaded イベントが発火する直前に実行されます。

<!DOCTYPE html>
<html>
<head>
  <title>Defer JavaScript Example</title>
  <script src="script1.js" ></script>
  <script src="script2.js" ></script>
</head>
<body>
  <!-- Page content here -->
</body>
</html>

defer の使用は、DOM に依存し特定の順序で実行する必要があるスクリプト、特に DOM 操作を行う場合に有益です。これは DOM 操作を行うスクリプトや他のスクリプトに依存するスクリプトにとって有利です。

属性	スクリプトの読み込みタイミング	スクリプトの実行タイミング
`none`	バックグラウンドで	DOM の構築前
`async`	バックグラウンドで	読み込み直後
`defer`	バックグラウンドで	ページの残りが解析された後、HTML に表示される順序で

async と defer はどのようにページ速度を改善するか？

同期 JavaScript（Sync）は、特にスクリプトが大きい場合や実行に時間がかかる場合、ページの読み込みを大幅に遅くし、ウェブサイトの応答性を低下させる可能性があります。

非同期 JavaScript（Async）は、独立したスクリプトを他のリソースと並行して読み込むことで、ページ速度を向上させることができます。ただし、予期しない動作を避けるために、依存関係を正しく管理する注意が必要です。

遅延 JavaScript も、クリティカルレンダリングパスをブロックしないことでページ速度を向上させることができます。DOM に依存するスクリプトを実行する前に DOM の準備が整っていることを保証し、より予測可能で制御された実行順序をもたらします。

ベストプラクティス：

DOM に依存せず、順序に関係なく実行できる独立したスクリプトには非同期（async）を使用してください。
DOM に依存し、特定の順序で実行する必要があるスクリプト、特に DOM 操作を行う場合には遅延（defer）を使用してください。
同期 JavaScript の使用はできる限り避けてください。ページ速度と user experience に悪影響を及ぼします。

JavaScript ファイルに適切な読み込み技術を使用することで、ページ速度を最適化し、user experience を向上させ、ウェブサイトでのよりスムーズなインタラクションを確保できます。sync、async、defer の違いとページ読み込みへの影響を理解することは、高パフォーマンスなウェブアプリケーションを構築するために不可欠です。

sync、async、defer 属性の使用効果は、ウェブサイトの具体的なコンテキストやコンテンツによって異なる場合があることにご注意ください。ページ読み込み戦略を微調整し、さまざまなシナリオで最適な結果を確保するために、定期的なテストとパフォーマンス分析が重要です。

さらに一歩進んで、スクリプトをオンデマンドで読み込む

Async と defer はパーサーをブロックしないことでページを高速化できますが、「スクリプトの遅延」がすべての問題を解決するわけではないことに注意が必要です。例えば、Largest Contentful Paint 要素は、defer および async スクリプトによるネットワークと CPU の競合に対して脆弱です。Interaction to Next Paint も、ページ読み込みの早い段階で実行されるスクリプトの影響を受けます。そのため、可能な限りスクリプトをオンデマンドで読み込み、ページパフォーマンスへの影響をより細かく制御することをお勧めします。詳しくは、スクリプトをオンデマンドで読み込む方法をご覧ください

Secure your Q3 Metrics.

Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.

Start the Engagement >>

Strategic Planning
Code Implementation
Verification & Testing

Defer vs Async JavaScript と Core Web Vitals への影響

Core Web Vitals Defer vs Async JavaScript と Core Web Vitals への影響