Help us understand the problem. What is going on with this article?

Resource Hintsでリソースを事前取得しよう!

More than 1 year has passed since last update.

Resource Hintsとは?

下記4つのAPIから構成される。IEについては10以降にはなるが、大体のブラウザでサポートされている。
- DNS-Prefetch
- Preconnect
- Prefetch
- Prerender

詳しくはResource Hints参照。

DNS-Prefetch

ソーシャルボタンの設置やCDNの利用など、外部サイトからリソースを読み込む場合、「DNSルックアップ(ドメインをIPアドレスに変換すること)」が複数発生します。下記のように指定することで、あらかじめドメインの名前解決を行うことが可能です。

html
<link rel="dns-prefetch" href="//example.com">

参考

DNSプリフェッチにより実際に高速化された例など、下記サイトにかなり詳しく書いてあります。
ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得 | ゆっくりと…

<head>内でまとめて設定しておくと良いと思います(下記scriptは参考サイト参照)。

js
(function(document) {
    var servers = [
        /* evernote */
        "static.evernote.com"

        /* pocket */
        ,"d7x5nblzs94me.cloudfront.net"
        ,"widgets.getpocket.com"

        /* mixi */
        ,"img.mixi.net"
        ,"static.mixi.jp"
        ,"plugins.mixi.jp"

        /* google analytics, google +1 */
        ,"oauth.googleusercontent.com"
        ,"ssl.gstatic.com"
        ,"accounts.google.com"
        ,"apis.google.com"
        ,"www.google-analytics.com"

        /* facebook */
        ,"www.facebook.com"
        ,"s-static.ak.facebook.com"
        ,"static.ak.fbcdn.net"
        ,"static.ak.facebook.com"
        ,"connect.facebook.net"

        /* twitter */
        ,"twitter.com"
        ,"cdn.api.twitter.com"
        ,"p.twitter.com"
        ,"platform.twitter.com"

        /* hatena */
        ,"cdn-ak.b.st-hatena.com"
        ,"cdn.api.b.hatena.ne.jp"
        ,"b.st-hatena.com"

        /* zenback */
        ,"web-jp.ad-v.jp"
        ,"w.zenback.jp"
    ], i, e, link = document.createDocumentFragment();

    for (i = servers.length-1; i >= 0; i--) {
        e = document.createElement('link');
        e.setAttribute('rel', 'dns-prefetch');
        e.setAttribute('href', '//' + servers[i]);
        link.appendChild(e);
    }

    document.getElementsByTagName('head')[0].appendChild(link);
}(document));

Preconnect

DNSの名前解決に加え、TCPコネクションまで貼っておく。

html
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

Prefetch

あらかじめ取得したいリソースが静的にアクセス可能な場合、Prefetchを使うことでキャッシュに格納させ、リソースの読み込みを高速にします。

html
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

Prerender

linkタグのrel属性でURLを指定することで、Webページを事前に読み込ませ、次ページを高速に表示します。

html
<link rel="prerender" href="//example.com/next-page.html">

※ちなみに1ページしか指定できません

確認方法について

Chromeの開発者ツールが開いていると動作しないので閉じます。
事前レンダリングが実際に行われているかは、Chromeで「chrome://net-internals/#prerender」と打つことで確認が可能。

事前レンダリング DEMO
※画像はキャッシュされないようにしています

pre1.png

また、Chromeのメニューから「その他のツール」→「タスク マネージャ」でも確認ができます。

pre2.png

どんなケースで使えるの?

ユーザーが次に移動すると考えられるページURLを指定すると良い。
・フォームの入力画面→確認画面
・ブログの一覧・詳細→トップページ
などなど。バックグラウンドで事前取得するとは言え、JavaScriptを実行する訳ではないので、Googleアナリティクスで開いていない次ページをPV計上、などはされないので安心。

デメリットは?

・バックグラウンド(別タブ)で処理しているため、ネットワーク帯域を消費する。
・読み込み時にアニメーションするようなページの場合、開くとアニメーションが終わっている可能性がある。
・スマホユーザーのデータ使用量を無駄に消費する可能性がある。

大手の事例

ここで終わってもつまらないので、大手サイトの利用例を見てみましょう。

Twitter
<link rel="dns-prefetch" href="https://pbs.twimg.com">
<link rel="dns-prefetch" href="https://t.co">
<link rel="preload" href="https://abs.twimg.com/k/ja/init.ja.640d0656a56931310909.js" as="script">
<link rel="preload" href="https://abs.twimg.com/k/ja/16.commons.ja.747d52f46f99a6a58506.js" as="script">
<link rel="preload" href="https://abs.twimg.com/k/ja/7.pages_home.ja.6c89e737b2894bdc15cd.js" as="script">
Facebook
<link rel="preload" href="https://www.facebook.com/rsrc.php/v3/yf/r/JS-dyZdNSwf.css" as="style" crossorigin="anonymous" />
Pinterest
<meta http-equiv="x-dns-prefetch-control" content="on">
Amazon
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='//images-fe.ssl-images-amazon.com'>
<link rel='dns-prefetch' href='//m.media-amazon.com'>
<link rel='dns-prefetch' href='//completion.amazon.com'>
AWS
<link rel="dns-prefetch" href="https://a0.awsstatic.com" />
<link rel="dns-prefetch" href="//d0.awsstatic.com" />
<link rel="dns-prefetch" href="//d1.awsstatic.com" />

DNS-Prefetchは各社よく使っていますね。<meta http-equiv='x-dns-prefetch-control' content='on'>はブラウザにDNS Preftchを有効化させる指定です。

Prerenderについては、Googleでサイト名を検索した時くらいしか見つけられませんでした。大体の場合で指定したサイトが一位に表示され、そのサイトを事前レンダリングしておくのは理にかなっていることと思います。
cap3.png

参考リンク

プリレンダリングとプリフェッチのサポート (Windows)
resouce hintsとpreloadを使ってリソースの取得を最適化する | 69log

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away