【html5】Resource Hintsを使ってページを高速で読み込む

著者:asaba

【html5】Resource Hintsを使ってページを高速で読み込む

Resource Hintsとは、読み込みたいファイル(jsとかcss)を予め先に読ませておくことで

ページの高速化を計ることができるプロパティです。

dns-prefetch、preconnect、prefetch、prerenderと全部で四つあるのですが

今回自分が使ったのはdns-prefetchとprefetchの二つ。

ではどんな役割を担っているかというと、まずは

【dns-prefetch】

こちらは、外部ファイルを読み込みたい時に用いられます。

</pre>
<link rel="prefetch" type="text/css" href="css/jqMini.css" />
<pre>

gitなどで欲しいプラグインがあったときにhref=http://git○○とかで定義するアレのこと。

このurlからipアドレスを検索する時間を削減することで、ページの高速化が

見込めます。

続いては

【prefetch】

こちらはjsやcssを先に読んでおいてキャッシュをする役割を持っています。

</pre>
<link rel='dns-prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' />
<pre>

アプリ起動時に最初にprefetchで格納したcssを取り出すことで、

ページのロード時間を軽減することが出来ます。

クライアント側でできることは以上。

developerToolでscriptの読み込みに時間がかかっていたのが気がかりで

使ってみたのですが、初回以降の読み込みで分かる程度の速さに

調整することができました。

ただ、機種によってはまちまちでしたのでまだ改善の余地

ありといったところです。