46
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CSSファイルを<head>内ではなく</body>直前で読み込む

Last updated at Posted at 2016-05-25

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

46
35
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?