皆さん、こんにちは。

業務改善を行うIT・業務コンサルタント、高橋です。

最近、ウェブの表示スピードの話しがよくでるようになってきています。

理由は簡単です。

Google（グーグル）がウェブページの表示スピードにこだわっているところがあるからです。

Googleは、『スクロールせずに見える範囲のコンテンツは1秒以内に読み込まれるようにすべき』という見解をもっています。

1秒は1000ミリ秒ですが、『1秒以内に読み込まれるようにすべき』をクリアするには、非常に細かな部分にこだわって表示速度を追求する必要性があります。

数日前、『DNSプリフェッチでの速度改善』に関して書いた記事を覚えていますでしょうか？

それに近いものはありますが、もう1つの方法をお話しします。

ウェブの表示速度をさらに追求する

先日の記事にも書いた通り、昨今のウェブサイト（ページ）では外部リソースの読み込みが多くあります。

FacebookやTwitterなど、SNS系のプラグインを使っているのであれば間違いありません。

そして、先日ご紹介した『DNS prefetch（プリフェッチ）』は事前にDNS lookup（ルックアップ）を解決しておくものでしたが、それより少し先に行っているものがあります。

『preconnect（プリコネクト）』というものです。

この『preconnect』を指定した場合、DNSの解決、TCPハンドシェイク開始、TLSネゴシエーションを事前に行えるようにしてくれます。

では、実際にどのように記述するのか？

内に以下のような記述を加えればOKです。

<link rel=”preconnect” href=”//example.com”>

ただし、『DNS prefetch（プリフェッチ）』と『preconnect（プリコネクト）』では若干ブラウザの対応状況が異なります。

例えば、ChromeとFirefoxはpreconnect、DNS prefetchのどちらにも対応していますが、IE11（internet explorer11）はpreconnectは現時点で対応しておらず、DNS prefetchには対応しています。

従って、メジャーなブラウザに幅広く対応しておくには、preconnect、DNS prefetch、どちらも記述しておく方が得策ですので、

<link rel=”preconnect dns-prefetch” href=”//example.com”>

という感じで、preconnectとDNS prefetchを併記しておくことも良いでしょう。