サードパーティのJavaScriptを効率的に読み込む
サードパーティのスクリプトを使用して読み込み時間とユーザーエクスペリエンスを改善するときによくある誤りを回避します。
サードパーティのスクリプトによってページの読み込みが遅くなっている場合は、パフォーマンスを改善するための次の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属性のスクリプトは、ダウンロードが完了した後、ウィンドウの読み込みイベントの前の最初の機会に実行されます。これは、asyncスクリプトがHTMLに表示される順序で実行されない可能性がある (高い) ことを意味します。また、パーサーがまだ動作している間にダウンロードが終了すると、DOMの構築を中断される可能性があることも意味します。
defer #
defer属性のスクリプトは、HTML解析が完全に終了した後、DOMContentLoadedイベントの前に実行されます。deferは、スクリプトがHTMLに表示される順序で実行され、パーサーをブロックしません。
-
読み込みプロセスの早い段階でスクリプトを実行させることが重要な場合は、
async使用する。 -
重要度の低いリソースでは
deferを使用する (例: 最も重要な項目の下にある動画プレイヤー)。
これらの属性を使用すると、ページの読み込みを大幅に高速化できます。たとえば、最近、Telegraphは広告や分析を含むすべてのスクリプトを遅延させ、広告の読み込み時間を平均4秒改善しました。
必要なオリジンへの早期接続を確立する #
重要なサードパーティのオリジンへの早期接続を確立することで、100〜500ミリ秒を節約できます。
ここでは、次の2つの<link>タイプが役立ちます。
-
preconnect -
dns-prefetch
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％改善されました。DoubleClickの公式ドキュメントには、広告を遅延読み込みする方法に関するガイダンスがあります。
別のアプローチは、ユーザーがページのそのセクションまでスクロールしたときにのみサードパーティのコンテンツを読み込む方法です。
Intersection Observerは、要素がブラウザーのビューポートに入出力されるタイミングを効率的に検出するブラウザAPIであり、この手法を実装するために使用できます。lazysizesは画像とiframesを遅延読み込みするための一般的なJavaScriptライブラリです。 YouTubeの埋め込みとウィジェットをサポートしています。また、IntersectionObserverのオプションのサポートもあります。
画像とiframeの遅延読み込みでloading属性を使用することは、JavaScript手法の優れた代替手段であり、最近ではChrome76で利用できるようになりました。
サードパーティのスクリプトを実行する方法を最適化する #
サードパーティのCDNホスティング #
サードパーティベンダーは、通常、コンテンツ配信ネットワーク (CDN) でホスティングするJavaScriptファイルのURLを提供するのが一般的です。このアプローチの利点は、URLをコピーして貼り付けるだけですぐに開始でき、メンテナンスの負荷がないことです。サードパーティベンダーは、サーバー構成とスクリプトの更新を処理します。
ただし、それらは他のリソースと同じオリジンではないため、パブリックCDNからファイルを読み込むにはネットワークコストがかかります。ブラウザーは、DNSルックアップを実行し、新しいHTTP接続を確立して、安全なオリジンでベンダーのサーバーとSSLハンドシェイクを実行する必要があります。
サードパーティのサーバーからのファイルを使用する場合、キャッシュを制御できることはめったにありません。他の誰かのキャッシュ戦略に依存すると、スクリプトがネットワークから不必要に頻繁に再取得される可能性があります。
サードパーティのスクリプトをセルフホスティングする #
セルフホスティングのサードパーティスクリプトは、スクリプトの読み込み処理をより細かく制御できるオプションです。セルフホスティングにより、次のことができます。
- DNSルックアップとラウンドトリップ時間を短縮する。
- HTTPキャッシュヘッダーを改善する。
- HTTP / 2サーバープッシュを利用する。
たとえば、Casperは、A/Bテストスクリプトをセルフホスティングすることで、読み込み時間を1.7秒短縮することができました。
ただし、セルフホスティングには大きな欠点が1つあります。それは、APIの変更やセキュリティの修正があった場合に、スクリプトが古くなり、自動更新を実行できない可能性があることです。
サービスワーカーを使用して、サードパーティサーバーのスクリプトをキャッシュに保存する #
サードパーティのCDNの利点を活用しながら、キャッシュをより細かく制御できるセルフホスティングの代わりに、サービスワーカーを使用してサードパーティのサーバーからスクリプトをキャッシュに保存することもできます。これにより、スクリプトがネットワークから再取得される頻度を制御でき、ページが主要なユーザーの瞬間に到達するまで、必須ではないサードパーティリソースの要求を抑制する読み込み戦略を作成できます。この場合は、preconnect接続を使用して早期接続を確立することで、ネットワークコストをある程度軽減することもできます。