サードパーティ スクリプトがページの読み込みを遅らせている場合は、パフォーマンスを改善するために次の 2 つの方法があります。
- サイトに明確な価値をもたらさない場合は削除します。
- 読み込みプロセスを最適化する。
この記事では、次の手法を使用してサードパーティ スクリプトの読み込みプロセスを最適化する方法について説明します。
タグの
async
属性またはdefer
属性を使用する- 必要なオリジンへの早期接続の確立
- 遅延読み込み
- サードパーティ スクリプトの配信方法の最適化
async
または defer
を使用します。
同期スクリプトは DOM の作成とレンダリングを遅らせるため、ページのレンダリング前にスクリプトを実行する必要がある場合を除き、サードパーティ スクリプトは常に非同期で読み込む必要があります。
async
属性と defer
属性は、バックグラウンドでスクリプトを読み込みながら HTML の解析を続行し、読み込み後にスクリプトを実行できることをブラウザに伝えます。これにより、スクリプトのダウンロードが DOM の構築やページのレンダリングをブロックしなくなり、すべてのスクリプトの読み込みが完了する前にユーザーにページを表示できるようになります。