ブラウザを使って特定のページを見ている時、ページへの接続スピードが遅くなることがあります。
「DNS必須のドメインへの事前接続」とは?
ブラウザがサーバーにリソースを要求する前に、接続を確立する必要があります。安全な接続の確立には、次の3つのステップが含まれます。
- ドメイン名を検索し、IPアドレスに解決します。
- サーバーへの接続を設定します。
- セキュリティのために接続を暗号化します。
ページを読み込む際に必要となる、DNSルックアップ及びTCP接続に加え、リソースダウンロードとレンダリング処理を事前に行う処理をしていないと、この現象が起こってしまいます。
ネットワークの状態によっては、1回の往復にかなりの時間がかかる場合があります。
これらは、Resources Hintsで行う4つの投機的な処理と呼ばれており、ページを高速に表示させるための技術として提供されています。
この4つの処理は、リンク先へ事前に接続されることから、「必須ドメインへの事前接続」と呼ばれることが一般的です。
対改善・対処方法は?
Resources Hints で行う投機的な処理が含まれていない場合に発生します。Resources Hints で行う投機的な処理とは、リンク先へ事前接続を行うことです。
クリックする前からリンク先の読み込み処理を行うことで、クリックしてからの処理速度を短縮させることができる技術です。
Resources Hints で行う投機的な処理には、以下の 対処方法があります。
dns-prefetch
:ページ読み込み時の DNS ルックアップを事前に行う。preconnect
:ページ読み込み時の TCP 接続を事前に行う。prefetch
:ページ読み込み時のリソースダウンロードを事前に行う。prerender
:ページ読み込み時のレンダリング処理を事前に行う。
DNS ルックアップを事前に行う
サーバという形で提供されていますが、このシステムを利用してドメイン名やホスト名、IPアドレス同士を相互に探す行為が、DNSルックアップです。この処理を事前に行うことで、ページ接続をより高速にすることが可能です。
TCP/IPネットワーク上において、ドメイン名やホスト名とIPアドレスとの対応関係を管理するシステムが、DNSと呼ばれるものです。
TCP 接続を事前に行う
TCP接続を事前に行うことにより、指定したページを確実に接続できるようになります。
コネクション型のプロトコルと定義され、通信する相手の状況を確認して接続を確立する行為がメインです。
相手にデータが確実に接続したかどうかを確認し、欠損などを検知、送信順に並べ直すといった役割も果たします。
転送効率よりも確実性を重視するプロトコルで、通信不能を防止するために使われます。
レンダリング処理とリソースダウンロードを事前に行う。
プロトコルの一つである、HTTPはページ表示を行うリソースを事前に要求します。
その中身は文字や写真など様々なものが該当し、それらはURLの中に格納されています。これらを事前に呼び寄せることをリソースダウンロードと呼びます。
リソース内にある文字や写真をユーザーの目に見えるように適切に処理する行為は、レンダリングと呼ばれます。
これらを事前に行うことで、文字や写真を早く表示することができます。投機的な処理方法としては、
<link href=”https://bar.example.com” rel=”dns-prefetch”>
<link href=”https://example.com” rel=”preconnect”>
<link href=”script.js” as=”script” rel=”prefetch”>
<link href=”image.png” as=”image” rel=”prefetch”>
<link href=”https://example.com/next.html” rel=”prerender”>
コメント