サードパーティの JavaScript を効率的に読み込む

Milica Mihajlija

サードパーティ スクリプトがページの読み込みを遅らせている場合は、パフォーマンスを改善するために次の 2 つの方法があります。

• サイトに明確な価値をもたらさない場合は削除します。
• 読み込みプロセスを最適化する。

この記事では、次の手法を使用してサードパーティ スクリプトの読み込みプロセスを最適化する方法について説明します。

• <script> タグの async 属性または defer 属性を使用する
• 必要なオリジンへの早期接続の確立
• 遅延読み込み
• サードパーティ スクリプトの配信方法の最適化

async または defer を使用します。

同期スクリプトは DOM の作成とレンダリングを遅らせるため、ページのレンダリング前にスクリプトを実行する必要がある場合を除き、サードパーティ スクリプトは常に非同期で読み込む必要があります。

async 属性と defer 属性は、バックグラウンドでスクリプトを読み込みながら HTML の解析を続行し、読み込み後にスクリプトを実行できることをブラウザに伝えます。これにより、スクリプトのダウンロードが DOM の構築やページのレンダリングをブロックしなくなり、すべてのスクリプトの読み込みが完了する前にユーザーにページを表示できるようになります。

<script async src="script.js">

<script defer src="script.js">

async 属性と defer 属性の違いは、ブラウザがスクリプトを実行するタイミングです。

async

async 属性を持つスクリプトは、ダウンロードが完了した後、ウィンドウの load イベントの前に、最初の機会で実行されます。つまり、async スクリプトが HTML に表示される順序で実行されない可能性があります（そして、その可能性は高いです）。また、パーサーがまだ動作している間にダウンロードが完了すると、DOM の構築が中断される可能性があります。

defer

defer 属性を持つスクリプトは、HTML 解析が完全に完了した後、DOMContentLoaded イベントの前に実行されます。defer を使用すると、スクリプトが HTML に表示される順序で実行され、パーサーがブロックされなくなります。

• 読み込みプロセスの早い段階でスクリプトを実行することが重要な場合は、async を使用します。
• defer は、折りたたみ式の動画プレーヤーなど、重要度の低いリソースに使用します。

これらの属性を使用すると、ページの読み込み時間を大幅に短縮できます。たとえば、Telegraph は広告やアナリティクスを含むすべてのスクリプトを遅延し、広告の読み込み時間を平均 4 秒短縮しました。

必要なオリジンへの早期接続を確立する

重要なサードパーティ オリジンへの早期接続を確立することで、100 ～ 500 ms を節約できます。

ここでは、preconnect と dns-prefetch の 2 つの <link> タイプが役立ちます。

preconnect

<link rel="preconnect"> は、ページが別のオリジンとの接続を確立することをブラウザに通知し、できるだけ早くプロセスを開始することを指定します。ブラウザが事前に接続されたオリジンからリソースをリクエストすると、ダウンロードがすぐに開始されます。

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch> は、<link rel="preconnect"> が処理するもののサブセットを処理します。接続の確立には、DNS ルックアップと TCP ハンドシェイクが含まれます。安全なオリジンの場合は、TLS ネゴシエーションも含まれます。dns-prefetch は、明示的に呼び出される前に特定のドメインの DNS のみを解決するようにブラウザに指示します。

preconnect ヒントは、最も重要な接続にのみ使用することをおすすめします。重要度の低いサードパーティのドメインには <link rel=dns-prefetch> を使用します。

<link rel="dns-prefetch" href="http://example.com">

dns-prefetch のブラウザ サポートは preconnect のサポートとは若干異なるため、dns-prefetch は