style.cssはどこに書く？別ファイルかヘッダー内か

公開日：2018/08/18 更新日：2019/01/11

スタイルシート（style.css）で悩んでいます。

私のスタイル、今は100行くらいしかない。
無駄な記述もあるので、多少追加していっても100行を超えることはない。

ふつうに別ファイルとしてheader.phpの中で読み込んでいた。
<head> ～ </head> の間に、よくあるこの１行。

<link rel="stylesheet" href="stylesheet.css" type="text/css">

こんな小さなスタイルシートをよみこんでいるだけなのに、PageSpeed Insightsさんに、注意される。

「このページの読み込み時間を短縮できるよ。次の提案を検討してね」ときた。
どんな提案ですか？

「レンダリングをブロックしている JavaScript/CSS を排除したらどう？」
何を排除したらいいんですか？

style.css！

「リソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください。」

非同期に読み込むためのサンプルまで付けてくれています。
でも、よく理解できないコードをずらずら書く気はない。

100行足らずのスタイルシート（style.css）、header.phpに直接書いてやれ！
<head> ～ </head> の間に下記の要領で貼り付ければOK。

<style>
<！--

（※ここにスタイルシート（style.css）のテーマ名や説明より下を貼り付け）

-->
</style>

すると今度は、

「HTML がでかいよ。縮小したら？」
「HTML コード（コード内のインライン CSS も含むよ）を縮小すると、速くなるよ！」

そうですか・・・。

ネットで調べてみても、

「スタイルシート（style.css）は別ファイルにするのがおすすめ！」

う～ん。
どっちがいいんだろう？

いっそのこと、 style属性を使って、全部インラインで書いてやろうか！