浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

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

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

 

dns-prefetchpreconnectprefetchprerenderと全部で四つあるのですが

今回自分が使ったのは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の読み込みに時間がかかっていたのが気がかりで

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

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

 

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

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

  • この記事いいね! (0)