このエントリーが役に立ったらシェアをお願いします!

Resource Hintsとlinkタグによる事前読み込みでWebサイトを高速化しよう!

このエントリーが役に立ったらシェアをお願いします!

今までサイトの読み込み速度を速くする手法の一つに、遅延ロードや非同期読み込みが一般的でした。LazyLoadなどの遅延ロードを行ったり、Ajaxで非同期にscriptを読みこんだり。これらはjsをゴリゴリ書いたりすることで実現することができましたが、Resource Hintsに記載されているlinkタグのrel属性を使うことで、事前にコンテンツを読みこませることができます。今回はResource Hintsの仕様とlinkタグでの使い方をご紹介していきます。

スポンサーリンク

Resource Hintsとは

Resource Hintsに記載されている内容としては、主にリソースの事前読み込みについて書かれています。この仕様を使ってリソースの取得をタイミングを制御し、ユーザへ素早くコンテンツを配信させることができます。

This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.

ResourceHints Abstract

linkタグの属性にprefetchpreconnect,prerenderなどを指定し、リソースを先読みすることができます。それぞれ読み込むリソースやユーザの動きを想定して、適切に使わなければなりません。

linkタグを使った事前読込でサイトを高速化

linkタグのrel属性にこれから紹介する値を記述することで、Resource Hintsにある事前読み込みを実現できます。正しく使うことができれば、サイトの読み込み速度やユーザビリティの向上が期待できます。Resource Hintsの仕様やブラウザごとの対応状況についてはMDNにも記載されているので、併せて参考にしてみてください。

では実際に使い方を見ていきましょう。

dns-prefetch – 名前解決

dns-prefetchはドメインを指定しておくことで、事前に名前解決を行います。この名前解決によるレンダリングブロックは発生しません。HEADタグの上部に書いておくことで、名前解決を先に行うことができるので後から読み込むリソースの読み込み時間短縮に繋がります。

<!DOCTYPE html>
<html>
  <head>
    <link rel="dns-prefetch" href="http://example.com">
  </head>
  <body>
    <img src="http://example.com/hoge.jpg">
    <img src="http://example.com/foo.jpg">
  </body>
</html>

dns-prefetchは複数個書くことも可能です。CDNやアナリティクスなどといった外部のリソースを読み込む場合にそれらのドメインを羅列しておくことで、ブラウザが最適なタイミングで名前解決を行います。

ウォータフォールをチェックしてみると、名前解決を先に行っていることが分かります。

dns-prefetchによる名前解決

dns-prefetchによる事前名前解決

preconnect – 事前接続

preconnectはdns-prefetchによる名前解決のもう一歩先、ホストへの接続までを行います。これもHEADタグの上部に書いておくことで、後から読み込むリソースの接続時間を丸々削減することができます。
使い方はdns-prefetchとほぼ同じです。

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="http://example.com">
  </head>
  <body>
    <img src="http://example.com/hoge.jpg">
    <img src="http://example.com/foo.jpg">
  </body>
</html>

subresource – リソースの事前取得

subresourceは同一ページ内で使用する任意のリソースを裏で読み込んでおくことができます。これにより、時間差で適用したいcssやjsを即座に適用することができます。

<!DOCTYPE html>
<html>
  <head>
    <link class="subresource-sample" rel="subresource" href="/css/style.css">
  </head>
  <body>
    <!-- do something -->
    <script src="sample.js"></script>
  </body>
</html>
// イベントやbodyの下部など任意のタイミングで実行するイメージ。
var subresource = document.getElementsByClassName('subresource-sample');
subresource[0].setAttribute('rel', 'stylesheet');

上記のサンプルではsubresourceでstyle.cssを読み込み、bodyの下部で読み込みをしています。subresourceで事前にキャッシュされているので、実際にrel属性を書き換える際はキャッシュから即座に反映されます。javascriptで画面切り替えやデザイン切り替えなどをするときに役立つかと思います。サンプルではcssを読み込んでいますが、jsやWebフォント等も先に読み込むことができるので、使い方は様々です。

prefetch – 将来的に使用するリソースの事前取得

prefetchは将来的にリソースを先に読み込み、キャッシュします。使うタイミングが限られますが、LPなどで遷移先が明確になっている場合はファイルサイズが重いCSS,日本語Webフォントなどをprefetchで読み込むと表示速度はだいぶ改善されるかと思います。

<!DOCTYPE html>
<html>
  <head>
    <link rel="prefetch" href="/font/sample.woff">
    <link rel="prefetch" href="/css/style.css">
  </head>
  <body>
  </body>
</html>

prerender – 遷移先の事前レンダリング

prerenderは次に遷移するページのレンダリングを事前に行います。現在のページをレンダリングしながら裏で次ページのリクエストからレンダリングまでが行われている為、ユーザがそのページへ遷移するときは瞬時に画面が表示されます。
事前レンダリングの様子はChromeのタスクマネージャーで確認できます。(確認する際は開発者ツールを閉じて下さい。)

prerenderと事前レンダリング

prerender – 事前レンダリング

<!DOCTYPE html>
<html>
  <head>
    <link rel="prerender" href="http://example.com/sample.html">
  </head>
  <body>
  </body>
</html>

ちなみにGoogle検索を行った時は検索順位が一位のページに対してprerenderの処理が行われています。

prerenderを使う上での注意

prerenderは事前にレンダリングまで行うことができるので、非常に強力です。ただし強力な分、扱う上での注意点があります。

prerenderはページ内に一つまでしか指定できない
複数個のlink rel=”prerender”を記述しても、1つしか適用されません。
遷移先が予想できないと使用できない
ユーザが事前レンダリングされたページヘ遷移しなかった場合、内容は破棄されます。
実質2ページ分のレンダリングを行うのでユーザの帯域やCPU、メモリを圧迫する。
モバイルの場合、重いページを事前レンダリングしてしまうと端末そのもののCPUやメモリを食ってしまいます。

普通に使用する分には問題ないかと思いますが、重いページを事前レンダリングさせる場合は特に注意が必要です。

linkタグを使うだけでサイトを高速化できる

GTmetrixなどの数値には出にくいですが、Resource Hintsとlinkタグでサイトの高速化を図ることができます。一部対応していないブラウザもありますが、今後Resource Hintsの仕様は何かしらの形で最適化されていくのかなと思います。
linkタグを上手く使ってサイトの高速化を行い、UXを向上させていきましょう!

スポンサーリンク

このエントリーが役に立ったらシェアをお願いします!

1この記事を書いた人
ShoheiTai
フロントエンド志向のWebエンジニア。
HTML5やWeb高速化、SEO等のフロントエンド開発が大好物。
バックエンドではCakePHP,Wordpress開発を主戦場としています。
Web開発のスパイスファクトリー株式会社創業メンバー。

Resource Hintsとlinkタグによる事前読み込みでWebサイトを高速化しよう!
イケてないコード - Webエンジニアのブログの
最新情報をいいねしてチェックしよう!