【パフォーマンス最適化】フロントエンドのPreconnect、DNS-Prefetch、プリロード機能

クズども · 掲載地 2022/09/26 21:45:08

要件:ウェブサイトをリクエストする際には大量のリソースを読み込む必要があり、ネットワークリクエストはウェブページのレンダリング速度にも影響します。ユーザーが操作をクリックして読み込みをすると、一部のリソースがユーザー体験に影響を与えることがあります。インターネットの急速な発展により、帯域幅やトラフィックのコストもそれほど高くなくなりました。リソースを事前に読み込みしたり、ターゲットサーバーと事前にリンクを確立したりするにはどうすればよいのでしょうか?

プリコネクト

要素プロパティのキーワード「preconnect」は、ユーザーがターゲットソースからリソースを必要とし、ブラウザがそれらを利用できるようになるかもしれないというヒントですこのソースへの接続を事前に開始することでユーザー体験を向上させます。

preconnectは、HTTPリクエストが正式にサーバーに送信される前に、DNS解決、TLS交渉、TCPハンドシェイクなど、ブラウザが多くの操作を行うことを可能にします。TCPハンドシェイクは往復遅延を排除し、ユーザーの時間を節約します。

プリコネクトは、多くのリクエストで往復経路を何百ミリ秒から数千ミリ秒の遅延まで短縮する重要な最適化手段です。
こちらはGoogleフォントでpreconnectを使う例です。preconnectプロンプトを fonts.gstatic.com に追加すると、ブラウザは即座にCSSリクエストと並行して実行されるリクエストを開始します。この場合、プリコネクトはクリティカルパスから3つのRTT(往復時間)を排除し、遅延が0.5秒以上削減されました。

構文は以下の通りです。

ログインが見えます。

ドキュメンテーション：ハイパーリンクのログインが見えます。

DNSプリフェッチはDNSプリフェッチを使用します

要素属性のキーワードdns-prefetchは、ユーザーがターゲットソースからリソースを必要とする可能性があることをブラウザに警告し、ブラウザがそのソースのDNS解決を事前に実行することでユーザー体験を向上させるためのものです。

DNSプリフェッチにより、ユーザーが閲覧している間もブラウザはページ上にいることが可能ですバックグラウンドでDNS解決を実行する。この方法により、ユーザーがリンクをクリックした時点でDNS解決が完了し、遅延を削減できます。特定のURLのDNSプリフェッチは、リンクタグのプロパティにrel="dns-prefetch"を加えることで行えます。Googleフォント、Google Analytics、CDNの扱いを推奨します。

「DNSリクエストの帯域幅トラフィックは非常に少ないですが、特にモバイルデバイスでは遅延が高くなることがあります。プリフェッチで指定されたDNSは、ユーザーがリンクをクリックした際など特定の状況で遅延を大幅に削減できます。時には1秒の遅延でも短縮できることがあります - Mozilla Developer Network」

構文は以下の通りです。

ログインが見えます。

ドキュメンテーション：ハイパーリンクのログインが見えます。

プリロード、プリロード

elementプロパティのpreload値により、HTMLでfetchリクエストを宣言でき、ページが間もなく必要になるリソースを指定します。ブラウザのメインレンダリング機構が始まる前のページのライフサイクルの早い段階で読み込みを始めたいのです。これにより、より早く利用可能になり、ページのレンダリングを妨げる可能性が低くなり、パフォーマンスが向上します。名前に「load」という用語が含まれていても、スクリプトを読み込んで実行するわけではなく、ただより高い優先度でダウンロードとキャッシュをスケジュールするだけです。

プリロードは、特定のリソースの読み込み方法を制御する新しいウェブ標準で、2016年1月に廃止されたサブリソースプリフェッチのアップグレードです。このコマンドは<link>、例えば <link rel="preload"> などで使用できます。一般的には、画像、CSS、JavaScript、フォントファイルなどの最も重要なリソースを読み込む際にプリロードを使うのが最善です。これは、HTMLで宣言されたリソースのみをプリロードするブラウザプリロードとは混同しないでください。プリロード指令はこの制限を克服し、CSSやJavaScriptで定義されたリソースの事前読み込みを可能にし、各リソースをいつ適用するかの判断を可能にします。

プリフェッチは現在のページに集中し、高優先度でリソースを読み込むのに対し、プリフェッチは次のページが読み込むリソースに集中し低優先度で読み込みます。また、プリロードはウィンドウのオンロードイベントをブロックしません。

さまざまなコンテンツタイプを事前に読み込むことができます。可能なasプロパティの価値は以下の通りです:

音声:通常に使用される音声ファイル<audio>です。
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed:要素に埋め込むリソース<embed>。
fetch:ArrayBufferやJSONファイルなど、fetchやXHRリクエストでアクセスされるリソースです。
font: 字体文件。
画像:画像ファイル。
オブジェクト:要素に埋め込むためのリソース<object>。
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
ワーカー:JavaScriptのウェブワーカーまたは共有ワーカー。
ビデオ:通常に使用されるビデオファイル<video>です。

構文は以下の通りです。

ログインが見えます。

ドキュメンテーション：ハイパーリンクのログインが見えます。

ズモリ775 · 掲載地 2022/09/28 8:54:26

Z兄さんを一歩一歩追いかけて、目にメモを取って。

トビウオ · 掲載地 2022/10/08 15:05:44

学ぶために

[その他] 【パフォーマンス最適化】フロントエンドのPreconnect、DNS-Prefetch、プリロード機能

関連記事

閲覧したセクション