サードパーティ スクリプトによってページの読み込みが遅くなる場合、次の 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 の構築が中断される可能性があります。
async を含むスクリプトは、引き続き HTML 解析をブロックできます。defer
defer 属性を持つスクリプトは、HTML 解析が完全に終了した後、DOMContentLoaded イベントの前に実行されます。defer を使用すると、スクリプトが HTML に表示される順序で実行され、パーサーがブロックされなくなります。
defer を含むスクリプトは、ブラウザが HTML の解析を完了するまで実行を待機します。- 読み込みプロセスの早い段階でスクリプトを実行することが重要な場合は、
asyncを使用します。 - スクロールしなければ見えない範囲にある動画プレーヤーなど、重要度の低いリソースには
deferを使用します。
これらの属性を使用すると、ページの読み込み時間を大幅に短縮できます。たとえば、Telegraph は広告やアナリティクスを含むすべてのスクリプトを遅らせ、広告の読み込み時間を平均 4 秒短縮しました。
必要なオリジンへの早期接続を確立する
重要なサードパーティの送信元への早期接続を確立すると、100 ～ 500 ミリ秒を節約できます。
ここでは、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 は preconnect をサポートしないブラウザのフォールバックとして機能します。安全に実装するには、個別のリンクタグを使用します。
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
サードパーティ リソースを遅延読み込みする
埋め込みのサードパーティ リソースの構成に問題があると、ページの読み込みが大幅に遅くなる可能性があります。重要でない場合、またはスクロールしなければ見えない範囲にある場合（ユーザーがスクロールしないと表示できない場合）、遅延読み込みはページ速度とペイント指標の改善に役立ちます。これにより、ユーザーはメインページのコンテンツをより速く取得し、優れたエクスペリエンスを得ることができます。
効果的なアプローチの 1 つは、メインページのコンテンツの読み込み後にサードパーティ コンテンツを遅延読み込みすることです。広告がおすすめです。
広告は多くのサイトにとって重要な収益源ですが、ユーザーはコンテンツを求めてサイトにアクセスします。広告を遅延読み込みしてメイン コンテンツをより速く配信することで、広告の全体的な視認性の割合を増やすことができます。たとえば、MediaVine は遅延読み込み広告に切り替えた結果、ページの読み込み速度が 200% 向上しました。Google アド マネージャーには、広告を遅延読み込みする方法に関するドキュメントがあります。
また、ユーザーがページの該当セクションに初めてスクロールしたときにのみ、サードパーティのコンテンツが読み込まれるように設定することもできます。
Intersection Observer は、要素がブラウザのビューポートに移動したタイミングを効率的に検出するブラウザ API です。この API を使用して、この手法を実装できます。lazysizes は、画像と iframes の遅延読み込みに使用される一般的な JavaScript ライブラリです。YouTube の埋め込みとウィジェットをサポートしています。また、Intersection Observer のオプションのサポートもあります。
画像や iframe の遅延読み込みに loading 属性を使用する方法は、JavaScript の手法に代わる優れた手法であり、最近 Chrome 76 で利用できるようになりました。
サードパーティ スクリプトの配信方法を最適化する
サードパーティ スクリプトの使用を最適化するための推奨戦略をいくつかご紹介します。
サードパーティの CDN ホスティング
サードパーティ ベンダーは、通常はコンテンツ配信ネットワーク（CDN）でホストする JavaScript ファイルの URL を提供するのが一般的です。このアプローチの利点は、URL をコピーして貼り付けるだけですぐに開始でき、メンテナンスのオーバーヘッドがないことです。サードパーティ ベンダーがサーバー構成とスクリプトの更新を処理します。
ただし、他のリソースと同じオリジンにないため、パブリック CDN からファイルを読み込むとネットワーク費用が発生します。ブラウザは、DNS ルックアップを実行して新しい HTTP 接続を確立し、安全なオリジンでベンダーのサーバーと SSL handshake を行う必要があります。
サードパーティ サーバーのファイルを使用する場合、キャッシュを制御できることはほとんどありません。他のユーザーのキャッシュ戦略に依存すると、スクリプトが不必要にネットワークから取得される頻度が高すぎる可能性があります。
自己ホスト型のサードパーティ スクリプト
サードパーティ スクリプトをセルフホストすると、スクリプトの読み込みプロセスをより細かく管理できます。セルフホストすると、次のことができます。
- DNS ルックアップとラウンドトリップ時間を短縮します。
- HTTP キャッシュ ヘッダーを改善。
- HTTP/2 または新しい HTTP/3 を利用します。
たとえば Casper は、A/B テスト スクリプトを自己ホストすることで、読み込み時間を 1.7 秒短縮しました。
ただし、自己ホスティングには大きな欠点が 1 つあります。スクリプトが古くなって、API の変更やセキュリティ修正があったときに自動更新されないことです。
Service Worker を使用してサードパーティ サーバーのスクリプトをキャッシュに保存する
自己ホスティングの代わりに、Service Worker を使用してサードパーティ サーバーのスクリプトをキャッシュに保存できます。これにより、サードパーティの CDN のメリットを維持しながら、キャッシュをより細かく制御できます。
ネットワークからスクリプトを再取得する頻度を制御し、ユーザーがページで重要な操作に到達するまで、重要でないサードパーティ リソースのリクエストをスロットリングする読み込み戦略を作成できます。preconnect を使用すると、早期接続を確立し、ネットワーク コストを削減できます。