Webページの表示は少しでも高速化させたいですね。
そのために我々はいろいろな方法を使いミリ秒単位の短縮化を頑張るわけですが、そのテクニックの一つをメモします。
Webサイト表示高速化の一つの方法として、レンダリングをブロックさせるCSSとJavaScriptをHTMLの<head></head>
内ではなく</body>
タグの直前に読み込ませるというものがあります。
JSは普通に</body>
タグの直前に書けばいいのですが、CSSは残念ながら<head>~</head>
の中にしか書けません。
HTMLの仕様が変わって書けるようになったそうです!教えてくれたmyakuraさんありがとうございます。コメント欄参照
それでもどうしてもCSSも</body>
タグの直前に書きたいという場合はJSを利用し以下のように書くことが出来ます。
html
<head>
...
</head>
<body>
...
<script type="text/javascript">
var link = document.createElement('link');
link.href = 'pathto/css/style.css';
link.rel = 'stylesheet';
link.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
</script>
</body>
ファーストビューに関わるCSSだけを<style>
タグを使ってインライン化した上で、このテクニックを使えば、体感上の速度は結構向上するのではないでしょうか。
2019年8月9日追記
レンダリングブロックを発生させずにCSSを読み込むならこの方法が簡単で良いですね。ってかこれすげえハックだわ→ CSSを非同期ロードする最も簡単な方法 - Qiita