タグを使用してWebサイトを高速化する方法

「予報「ブラウザは最高速度のインターネットサーフィンの未来です。, 欲しいリソースを持ってくる 欲しいと思う前でも. 今日のブラウザはすでに 作る一部予測 時々ドキュメントの取得とレンダリングをスピードアップします。これを次のステップに進めるために、私たちはWeb開発者以外の誰にも頼らない.

開発者は かなり良いアイデア の 彼らのウェブサイトがどのようにナビゲートされるか, そしてどれ リソースは最も頻繁に要求されます したがって、ブラウザがサイトに対して行うべき将来の操作を予測できます。今必要なのは、開発者が以下の方法を見つけることだけです。 これらを中継する予測ブラウザへ そして それらを有効利用する. ここにいくつかの特別な "HTMLリンク"が入ってきます。.

HTTPリクエストの復習

これらのリンクを見る前に、HTTPで要求された典型的なファイルフェッチ操作がどのように行われるかについて、私たちの記憶をリフレッシュする時が来ました。 Joeという名前の人がWebサイトにアクセスしたいとしましょう。.

これが次に起こることです：

Joeは、ブラウザのアドレスバーにWebサイトの人間が呼び戻すことのできるアドレスを入力し、[Enter]を押します。.
それがそのアドレスを受け取ると、ブラウザはJoeによって与えられたアドレスのIPアドレスをDNSサーバ（ISPの賛辞）に尋ねます.
DNSサーバーが義務付けている.
ブラウザはIPアドレスを認識したので、接続を要求するメッセージを（TCPの方言で）Webサイトのサーバに送信します。.
サーバーが正常に動作している場合は、ブラウザの要求を承認する応答を送信し、ブラウザはサーバーのメッセージに応答して承認します。（注意：はい、これはクライアントとサーバー間のTCPハンドシェイクの極端に荒廃したバージョンです。）
ハンドシェイクが終了すると、両者の間に接続が確立されます。.
ブラウザはその方言スタイルをHTTPに変更し、サーバーにWebサイトを要求します。.
ウェブサイトのホームページを知っているサーバーはそれを返します、それはブラウザによって受け取られて、コンピュータの前で非常に辛抱強く待っているジョーに示されます.

典型的なHTTPリクエストは通り抜けます すべて インターネットを介して文書を取得することです。だからこれらのプロセスのいずれかが 可能であればジャンプスタートすることができます, 私たちはできる 欲しいリソースが届くのを待つ時間を減らす.

HTMLリンクの関係

W3Cは4つのHTMLリンク関係を規定しています（rel 関係のために） DNSプリフェッチ, 事前接続, プリフェッチ, そして 演じる. 一緒に彼らは（W3Cによって）と呼ばれていますリソースのヒント"今、私たちは見るよ 彼らができること そして 使用できる場所.

1. DNSプリフェッチ

DNSプリフェッチでは、 ドメイン名解決 （別名、DNSサーバーから一致するIPアドレスを取得する）事前に行われる.

その姉妹サイトへの参照リンクがたくさんあるWebサイトに参照ページがあるとしましょう。ユーザーが参照ページにアクセスすると、 高確率 ユーザーが姉妹サイトに移動することを確認します。だから、 初期のDNS検索 姉妹サイトのためにそれがサイトを開くのにかかる時間を減らすことができるので（それによってユーザエクスペリエンスを向上させる）.

この DNSプリフェッチによる待ち時間の短縮 このコードを参照ページに追加することで実行できます.

ブラウザが参照ページでこのコードを処理すると、そのタスクキューに姉妹サイトのDNSルックアップが追加されます。また、キュー内の他の優先度の高いタスクが解放されると、WebサイトのDNS解決が開始されます。姉妹サイト.

そのため、ユーザーが姉妹サイトにアクセスするためのリンクの1つを最後にクリックしたときに、そのサイトのDNS解決は既に完了している可能性があり、ブラウザは直ちに姉妹サイトとのクライアントサーバーTCP接続の確立を開始できます。サーバー、そのページの読み込みを速くする.

この機能は、2016年3月現在、Safari以外のほとんどすべての最新ブラウザで利用可能です。.

2.事前接続

PreconnectはDNSプリフェッチからさらに一歩進んだもので、将来的に送信される可能性のあるサーバーへの接続を確立します。.

W3Cはpreconnectのための理想的なユースケースを挙げています： リダイレクト. 開発者はいくつかの理由でリダイレクトを使用します.

この場合、ブラウザの次のリクエスト（リダイレクトされたサイト）は 100％予測可能, そしてできます に事前接続されている, に ナビゲーションの待ち時間を減らす.

にリダイレクトする中間サイトページがあると想像してください。xyzsite"、次のHTMLリンクはブラウザがその中間ページにたどり着くとxyzsiteサーバに事前接続します.

2016年3月現在、これはChrome、Opera、Firefoxで利用可能です。.

プリフェッチ

あり プリフェッチ, リソースの場合は、ブラウザ リソースのドメイン名のDNS解決の実装を開始します, それから リソースのサーバーとTCP接続を実行します。, HTTPリクエストを行い、最後に プリフェッチされたリソースを取得して格納します ブラウザのキャッシュに.

後で必要になるリソースが確実にわかっている場合は、それが事前にプリフェッチするリソースです。その中にキャッチがあります. 先読みには推測が必要, あなたが間違って推測した場合、あなたはあなたのサイトをスピードアップするのではなく実際にスローダウンするかもしれません.

オンラインの本、ギャラリー、またはポートフォリオの場合、ユーザーが次のページを閲覧する可能性が最も高い場合は、次のようなリソースをプリフェッチします。画像, 物事を大幅にスピードアップすることができます。これを行うためのコードは次のとおりです。.

プリフェッチはChrome、Firefox、およびOperaでサポートされています.

4.プレレンダリング

HTMLページの場合のみ、事前レンダリングを実行できます。レンダリング済みのHTMLページは オフラインにする, ユーザーが実際に必要とするときに画面に描画されます。レンダリング より高い計算作業とメモリリソースが必要;加えて、ページをレンダリングするために、ブラウザは追加のリソース（ページに追加された画像のような）を必要とするかもしれません。 より多くの結果的な要求 ブラウザで.

そう, 演じる である必要があります 注意して使用, そして使いすぎではありません。次のコードを追加すると、 "About"ページが事前にレンダリングされます。.

2016年3月現在、Prerenderは既にChrome、IE、およびOperaで利用可能です。.

注意すべきいくつかのこと

（1） ブラウザがすでにビジー状態の現在のページの操作に必要な要求を処理し、これらの最適化を実行しているため、上記のリソースヒントでは、要求のさまざまな段階の実行と完了が保証されません。 ユーザーの現在のタスクを妨げる可能性があります.

だから、すべてが ブラウザがそれを実行するのに十分な空きを感じたときにキューに入れられ実行される.

これらのリソースヒントは、ページを読み込む前であっても必ずしもページ内に存在する必要はありません。彼らはすることができます 後でJavaScriptで追加, そしてリソースヒントはいつものように彼らの仕事をするでしょう.

（2） W3Cは HTMLリンク属性 呼ばれる ヒント確率, 広報 これらのリソースヒントのための（0から1の値を持つ）、これは将来行われる要求の確率を提供するために使用することができます。私はまだこの属性がどのブラウザによっても実装されているのを見たことがありません。例として、次のコードでは、xyzsiteが将来要求される可能性が80％、aboutページに30％の可能性があると述べています。.

リンクされたリクエストのCORSクレデンシャルをブラウザに通知するために、リソースヒントにオプションのcrossorigin属性を追加することもできます。.