2015年も暮れようとようとしているのにいまだにCSSを外部ファイルとして読み込んでるの？

釣りっぽいタイトルの記事を書いてみたかったのでやってみました。内容としてはCSSファイルを <link rel=stylesheet... で外部スタイルシートとして読み込むんじゃなくて、style要素にベタ書きしようよという話です。AMP (Accelerated Mobile Pages)の話につながります。

外部CSSファイルはブロッキングCSSリソースになる

『CSSをstyle要素内にベタ書きする』ということに違和感を感じる人もいるかもしれません。普通はlink要素で外部リソースとしてCSSを読み込むからです。ですが、GoogleのPageSpeed Insightsで自分が制作したサイトやページを計測したことのある人なら分かると思いますが、CSSファイルを <link rel="stylesheet" ... で読み込むとPageSpeed Insightsで

このページには、ブロッキングCSSリソースが1つあります。これが原因で、ページのレンダリングに遅延が発生しています。

のようなメッセージが出てしまいます（『1つ』の部分は読み込んでいるファイル数によって変わります）。これは <script src="... で読み込む外部JavaScriptファイルについても同様です。

JavaScript ファイルを読み込む script 要素の場合は、モダンブラウザに限ると defer 属性を使用することで回避することができます。defer 属性をもたせることでブラウザは DOM の解析とレンダリングを続けることができ、JavaScript は DOM 構築後に実行されます。async 属性も同様ですが、こちらはスクリプトが読み込まれ次第実行されます。defer の方は DOMContentLoaded イベントの前に、defer 属性をもつ script 要素の順番に実行されます（例えば jQuery のプラグインの場合はまずjQuery 本体を実行する必要があるため、async ではなく defer にする必要があります）。詳しくは以前に書いた PageSpeed Insights についての記事や、HTML5 Experts.jp の『ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）』を参照してください。

CSS の場合に defer のようなものがあるかというと、残念ながらありません。ではどうすればいいか。回避する一つの方法として、loadCSS.jsを使用して非同期に CSS を読み込む、という対処法がありますが、これだと非同期処理が終わるまでに表示される HTML はスタイルが当たらずに崩れます。それを回避したければファーストビューの部分だけを head 要素内に書いておけばいいのですが、そうすると今度はファーストビューより下に読み進めてページの再読み込みをすると、やはりスタイルが当たっていないコンテンツが一瞬表示されます。それも回避しようとなると結局 style 要素に CSS を全部書く必要があります。

もちろん外部 CSS にすることで CSS ファイルがキャッシュされて、ページ遷移時にキャッシュから CSS を読み込めるという大きな利点もあります。ですが、なるべく HTTP リクエストを減らして通信回数を抑え、ページの読み込みを速くする方が結果的にユーザエクスペリエンスの向上につながります。

AMP ではインラインスタイルのみが認められている

ここまでだったらまだ良かったんですが、本題はここからです。それは AMP ではインラインスタイルのみが認められている（2015年12月現在） という点です（AMP ってなに？という人は海外SEO情報ブログの『モバイルウェブが爆速に！ Google が AMP (Accelerated Mobile Pages) を立ち上げ』あたりを読んでください）。AMP PROJECT の Get Started ページの"How AMP Speeds Up Performance"には以下のように書かれています：

All CSS must be inline and size-bound

CSS blocks all rendering, it blocks page load, and it tends to get bloated. In AMP HTML pages, only inline styles are allowed. This removes 1 or often more HTTP requests from the critical rendering path compared to most web pages.

Also, the inline style sheet has a maximum size of 50 kilobytes. While this size is big enough for very sophisticated pages, it still requires the page author to practice good CSS hygiene.

意訳すると

CSS はレンダリングやページの読み込みをブロックし、ますます肥大化する傾向にあります。AMP HTML ページではインラインスタイルだけが認められています。こうすることで、多くのウェブページに比べて1つかそれ以上の HTTP リクエストをクリティカルレンダリングパスから減らすことができます。

また、インラインスタイルシートには 50KB のサイズ制限があります。これは洗練されたページには十分大きなサイズですが、それでもウェブページの制作者は衛生的な CSS を実践する必要があるでしょう。

といったところです。最後は適当ですが、要は汚い、無駄の多い CSS を書くんじゃなくて、整頓された綺麗な CSS を書く練習になるでしょ？ってことなんでしょうか。

Google の John Mueller 曰く、2016年は AMP がSEOのキーワードの一つになるそうです。Google が検索を支配している以上、モバイルでの AMP 対応というのは避けて通れないでしょう。ということは必然的に CSS もインラインスタイルで書くことが多くなっていきそうです。