リンクタグ「link rel=”xxxx”」でサイトの高速化を行う

2017/2/20 SEO

サイト高速化はlinkタグを使って行うことができるかもしれません。

サンプルソースと、説明を下に書いていきます。

1 サンプルソース

サンプルソース


<!DOCTYPE html>
<html>
    <head>
        <link rel="dns-prefetch" href="http://example.com">
        <link rel="preconnect" href="http://example.com">
        <link class="subresource-sample" rel="subresource" href="example.css">
        <link class="subresource-sample" rel="subresource" href="example.js">
        <link rel="prerender" href="http://example.com/sample.html">
    </head>
    <body>
        <img src="http://example.com/sample.png">
    </body>
</html>

dns-prefetch,preconnect

ドメインを先に指定しておくことで、記述行以降の読み込むリソースの短縮につながる。

subresource-sample

事前にjsやcssを読み込んでおく処理。

あとでJSなどを用いて、下記のように記述して読み込む。

var subresource = document.getElementsByClassName('subresource-sample');
subresource[0].setAttribute('rel', 'stylesheet');

prerender

遷移先を事前に読み込む。

決まった遷移先がある場合は記述すると良い。