Googleのspeed insightsのコードについて

GoogleのSpeed Insightsを利用したところ、CSS配信の最適化を推奨されました。

その最適化推奨方法のひとつで、javascriptでstyle要素をロード後に読み込みという方法。
このコードはheadの外、htmlのすぐ下に適用されますが、HTMLの文法的に問題ないのかなと疑問に思いました。

html
1<html>
2  <head>
3    <style>
4      .blue{color:blue;}
5    </style>
6    </head>
7  <body>
8    <div class="blue">
9      Hello, world!
10    </div>
11    <script>
12      var cb = function() {
13        var l = document.createElement('link'); l.rel = 'stylesheet';
14        l.href = 'css/small.css';
15        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
16      };
17      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
18          webkitRequestAnimationFrame || msRequestAnimationFrame;
19      if (raf) raf(cb);
20      else window.addEventListener('load', cb);
21    </script>
22  </body>
23</html>

実行すると・・・

html
1<html lang="...>
2<link rel="stylesheet" href="css/small.css"> <!--この位置は??-->
3<head>
4...
5</head>

とのように、headの外にあると違和感で満載です。
ご教授お願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

W3Cのドキュメントを見るに、link要素は、メタデータコンテンツを置いてよいところに置くことができます。
メタデータコンテンツとは、head, title, base, link, meta, styleのことです。
html要素の中にhead要素を置くことができるので、html要素はメタデータコンテンツを置いてよいところです。
よって、link要素はhtml要素の直下に置くことができます。

投稿2017/04/21 08:58