サードパーティのスクリプトの処理が遅くなっている場合は、 次の 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 ミリ秒の節約が可能 早期接続を 通信できます。
2 つの <link> タイプ
preconnect と dns-prefetch が役立ちます。
preconnect
<link rel="preconnect"> は、ページが URL を確立することをブラウザに伝えます。
別のオリジンに接続し、すぐに処理を開始するようにする場合は
必要があります。ブラウザが事前接続されたオリジンからリソースをリクエストすると、
ダウンロードがすぐに開始されます。
<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">
サードパーティ リソースを遅延読み込みする
次の場合、埋め込みサードパーティのリソースによってページの読み込みが大幅に遅くなることがあります。 構築が不適切です重要でない場合、またはスクロールしなければ見えない範囲にある場合 （つまり、内容を見るためにスクロールが必要な場合）遅延読み込みは、 ページ速度とペイント指標を改善しますこれにより、ユーザーはメインページのコンテンツ より高速かつ快適に使用できます
<ph type="x-smartling-placeholder">
有効な方法の 1 つは、メインページの後にサードパーティのコンテンツを遅延読み込みすることです。 コンテンツが読み込まれます。広告がおすすめです。
多くのサイトにとって広告は重要な収入源ですが、ユーザーは 説明します。広告を遅延読み込みし、メイン コンテンツを迅速に配信することで、次のことが可能になります。 広告の全体的な視認性の割合を上げる。例: MediaVine 広告の遅延読み込みに切り替え ページの読み込み速度も 200% 向上しましたアドマネージャーには 広告の遅延読み込みの方法をご確認ください。
ユーザーが初めてスクロールしたときのみにサードパーティのコンテンツを読み込むよう設定することもできます。 該当セクションに移動します
Intersection Observer（交差点のオブザーバー）
要素は、要素の入出力を効率的に検出するブラウザ API です。
この手法を実装するために使用できます。
lazysizes は一般的な JavaScript ライブラリです。
（画像の遅延読み込み）と iframes の 2 つの部分があります。
YouTube の埋め込みと
ウィジェット:
また、オプションのサポートもあります。
Intersection Observer を指定します。
画像と iframe の遅延読み込みに loading 属性を使用する
JavaScript 手法に代わる優れた手法です。最近になって、
Chrome 76 で利用可能に
サードパーティ スクリプトの配信方法を最適化する
以下では、使用を最適化するために推奨される戦略をいくつか 使用できます。
サードパーティの CDN ホスティング
サードパーティ ベンダーは、一般的に、使用している JavaScript ファイルの URL を提供します。 （通常はコンテンツ配信ネットワーク（CDN）上にあります）。 この方法の利点は、1 行で簡単に始められる点です。 URL をコピーして貼り付けることもできます。メンテナンスのオーバーヘッドはありません。「 サーバーの設定とスクリプトの更新はサードパーティ ベンダーが処理します。
ただし、これらは他のリソースと同じオリジンではないため、 パブリック CDN からファイルを読み込むと、ネットワーク コストが発生します。ブラウザは DNS ルックアップを実行して新しい HTTP 接続を確立し ベンダーのサーバーと SSL handshake を実行する。
サードパーティのサーバーのファイルを使用する場合は、 キャッシュ保存について説明します。他者のキャッシュ保存戦略に依存すると、スクリプトが正しく実行されない 頻繁に再取得されている場合です
自己ホスト型のサードパーティ スクリプト
サードパーティ スクリプトの自己ホスティングを使用すると、スクリプトの内容をより細かく管理できる 読み込みプロセスに関するものです。セルフホストのメリットは次のとおりです。
- DNS ルックアップとラウンドトリップ時間を短縮します。
- HTTP キャッシュヘッダーを改善します。
- HTTP/2 または新しい HTTP/3 を利用します。
たとえば Casper 社では、1.7 秒短縮 A/B Testing スクリプトを自己ホストして読み込み時間を短縮します。
ただし、自己ホスティングには大きな欠点が 1 つあります。それは、スクリプトが古くなってしまい、 API の変更やセキュリティ修正があったときに自動更新されません。
Service Worker を使用してサードパーティ サーバーのスクリプトをキャッシュに保存する
Service Worker を使用してサードパーティ サーバーのスクリプトをキャッシュに保存できる セルフホスティングの代わりになりますこれにより、キャッシュ、 サードパーティの CDN のメリットも失いません
スクリプトをネットワークから再取得する頻度と
重要でないリクエスト、リクエストのレイテンシを抑制する
ユーザーがページ上でキー インタラクションに到達するまで、サードパーティのリソースにリクエストを転送することはできません。
preconnect を使用すると、早期の段階で接続を確立し、
ネットワーク費用を削減します