接続に失敗しました。もう一度試してください。

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
速度 大きな影響 簡単 5～15分

スクリプトの遅延/非同期

同期 <script> はレンダリングをブロックし、レンダリングを延期します。

それは何ですか

ブラウザがプレーン <script> に遭遇すると、ページのレンダリングを停止し、スクリプトをダウンロードして実行してから続行します。これは「レンダーブロッキング」スクリプトと呼ばれます。 defer 属性と async 属性により、この動作が変更されます。

なぜそれに対処するのでしょうか？

ヘッド内のすべてのブロック スクリプトは、ユーザーがコンテンツを表示する瞬間を遅らせます (LCP と First Paint の悪化)。複数のスクリプトを使用すると、遅延が加算されます。モバイル接続や低速接続では、これは空の白いページが数秒続くことを意味し、直帰率が高くなります。

やり方

  1. 1最初のレンダリングに必要のないスクリプトには defer 属性を付けます。スクリプトはバックグラウンドでダウンロードされ、ページの構築後にのみ、表示される順序で実行されます。
  2. 2独立したスクリプト (分析、チャット) の場合は、非同期を使用します。スクリプトは、順序に関係なく、ダウンロードされるとすぐに実行されます。
  3. 3重要なスクリプトは最小限に抑えます。残りを <body> の最後にロードするか、遅延してロードします。
  4. 4ルール: defer = DOM または順序に依存します。 async = スタンドアロン、何も依存しません。

例

Špatně
<head>
  <script src="/js/app.js"></script>   <!-- blocks rendering -->
</head>
Správně
<head>
  <script src="/js/app.js" defer></script>
  <script src="/js/analytics.js" async></script>
</head>

結論

Defer/async は、最も安価で最も効果的な速度の最適化の 1 つです。多くの場合、タグに 1 つの単語を追加するだけで十分です。ほとんどのスクリプトでは、defer が正しい選択です。デプロイ後、何も動作が停止していないこと (特に順序依存のスクリプト) を確認し、LCP の改善を測定します。

関連トピック