サードパーティのスクリプトによってページの読み込みが遅くなっている場合は、次の 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 handshake が必要です。安全なオリジンの場合は、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 であり、これを使用してこの手法を実装できます。lazysizes は、画像と iframes の遅延読み込み用の一般的な JavaScript ライブラリです。YouTube の埋め込みとウィジェットをサポートしています。また、Intersection Observer のオプションのサポートもあります。
loading 属性を使用して画像や iframe を遅延読み込みする方法は、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 を使用すると、早期接続を確立し、ネットワーク コストを削減できます。