ベストアンサー

外部CSSファイルの読み込み位置

2015/06/19 20:15

外部CSSファイルの読み込み位置について、GoogleのPageSpeed Insightsでは重要なスタイルのインライン化を推奨し、残りのスタイルを</html>タグの後に<link>タグを記述することで読み込んでいますが（参考URL参照）これはHTMLの文法的に問題はないのでしょうか。また、これによってCSSファイルが読み込まれないこともあるのでしょうか。よろしくお願いします。参考：https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#header_1

Proof4
お礼率100% (4/4)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

anmochi
ベストアンサー率65% (1332/2045)

2015/06/23 14:42 回答No.1

まず、規格が一番厳格であろうXHTML1.1で見てみると、閉じHTMLタグの後ろにLINKタグを置くのは完全にNGだ（そもそもXMLとして、文書1つにトップレベル要素が1つで他のタグは全部その中にないといけないっつーのがある）。次にHTML5の規格だが、RFCとかにまとまっているわけではないので完全にOKともNGとも判断はできないが、HTMLはXML（というかSGML）のサブセットというのはHTML1.0の頃から変わっていないと思われるのでXMLと同様文法としては間違っていると断じざるを得ない。実際にw3cという組織が提供している文法チェックツールでも「場所おかしい」というエラーとなった。ではLINKタグがHTMLタグの内側にあったらどうなのか。～～～～（１）～～～～ <html> <head> ～ <head> <body> ～ </body> <link hogehoge> </html> ～～～～～～～～これだったらどうかだが、一応HTMLではHEADとBODYとコメントしか子要素にできないはずなのでこれもNG。じゃあBODYの中なら？～～～～（２）～～～～ <html> <head> ～ <head> <body> ～ <link hogehoge> </body> </html> ～～～～～～～～これは、XHTML1.1的にはNG（XHTMLは各タグが出現できる箇所が厳密に決められていて、BODYタグの中にLINKタグは入れられない）だけど、HTML的にはどうなんだろうねぇ。根拠となる文書を探しきれなかった。先ほどのw3cの文法チェッカーも、HTML4.01 transitionalだと「場所おかしい」エラーになるんだけど、HTML5としてチェックすると「属性が足りない」としか出てこないのでHTML5だとこの場所でもいいという事なのかも知れない。さて、ブラウザの対応だが、ChromeはGoogle製なんだから対応していない（この書き方でCSSが読み込まれない）という事はまずないと思う。IEとFirefoxとOperaは分からないねー。まぁ、最後に処理したいスクリプトや外部ファイルはBODYタグの最後に書くのが現時点の対応ではベストではないでしょうか。ただ、Googleがこう書くのは若干分かる。jQueryというJavaScriptライブラリーと組み合わせた際、ページを読み込んだら実行される処理の書き方に $("body").ready(function () { // hogehoge }); というのがあるのだが、これは（２）だとcssの読み込みの後に実行され、（１）だとcssの読み込みと並行して実行される（ChromeがLINKタグにたどり着いた時には既にBODYタグが読み込み終了しているため）。ただ、これはjQueryの特性なのでこれを期待して（１）の書き方をするよりかはより正しい文法であると思われる（２）を使うのが吉だろう。また、普通使われる $(function () { // fugafuga }); は $(document).ready(function () { // herohero }); の略で、jQuery的にはこちらの方が文書を読み込んだら実行する処理の記述として本則であろうと思われるのでやはり"body".readyなどを期待してGoogleさんの書き方に倣うのは好ましいとは思えない、というのが私の感想だ。

質問者