2022-04-15
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の読み込みに時間がかかっていたのが気がかりで
使ってみたのですが、初回以降の読み込みで分かる程度の速さに
調整することができました。
ただ、機種によってはまちまちでしたのでまだ改善の余地
ありといったところです。