ハイパフォーマンスWebサイト フロントエンドのパフォーマンスの重要性から続いています。
Webサイトの高速化 ルール5 CSSは上に!
July 3, 2007
——————————————————————————
http://developer.yahoo.net/blog/archives/performance/より翻訳。
Steve Souders は Yahoo!の「Chief Performance Yahoo!」です。
これは彼の「パフォーマンス改善のベストプラクティス」を書いた一連のブログです。
——————————————————————————
Yahoo!でパフォーマンスの調査をしている間に、スタイルシートをトップに移動すると、ページのロードが速くなることを発見しました。これは、スタイルシートを冒頭に置くことで、徐々にページが描画されるためです。
パフォーマンスに気を遣うフロントエンドエンジニアならページを速くロードさせようとするはずです。
つまり、我々は出来るだけ速くコンテンツをブラウザに表示させたい訳です。
ページのコンテンツが多くて、しかも、ユーザのインターネット帯域が遅い場合は特に重要です。
ユーザに対してプログレスインディケーターとかで視覚的に進行状況を見せることの重要性は、十分に研究され、書かれもしてきました。Webにとっては、HTMLの表示それこそが、プログレスインディケーターなのです。
ヘッダー、ナビゲーションバー、上のほうのロゴ・・・・と徐々にロードするのが、ユーザに見えれば、ユーザエクペリエンスの改善になります。
スタイルシートを下のほうに配置すると、IEも含めて多くのブラウザにとって、徐々にページを表示することができなくなります。ブラウザは、スタイルが変更されてページ要素を再描画しないといけなくなるのを避けるために、ページを読み込み終わるまで描画をブロックします。そのため、ユーザは真っ白なページを見続けることになります。Firefoxは描画をブロックしません。そのためスタイルシートをロードし終わった時にページ要素を再描画する場合があります。その結果、the flash of unstyled content problem（スタイル適用前のコンテンツが一瞬見えてしまうこと）といった問題が発生する場合があります。
訳注：the flash of unstyled content problem 日本語の関連ページ
HTMLの仕様では、スタイルシートはHEAD中に含まれるべきであるとなっています。
“Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times.”
空白のページが表示され続けたり、スタイル適用前のコンテンツが一瞬見えてしまったりするようなリスクは避けましょう。一番良い解は、HTML仕様に従ってスタイルシートはHEADのに配置することです。
Steve Souders
———————————————————————
◆◆訳注◆◆
普通、ヘッダー以外には置かない気がするが。
———————————————————————
エントリ一覧
Webサイトの高速化 フロントエンドのパフォーマンスの重要性
Webサイトの高速化 ルール1 HTTPリクエストの数を減らそう!
Webサイトの高速化 ルール2 CDNを使おう!
Webサイトの高速化 ルール3 Expiresヘッダーを追加しよう!
Webサイトの高速化 ルール4 コンポーネントを圧縮しよう!
Webサイトの高速化 ルール5 CSSは上に!
Webサイトの高速化 ルール6 scriptは下に!
Webサイトの高速化 ルール7 CSSのExpression()は使わない!
Webサイトの高速化 ルール8 JavaScriptとCSSは外部ファイルに!
Webサイトの高速化 ルール9 DNS Lookupsを減らそう!
Webサイトの高速化 ルール10 コードのサイズを圧縮する!
Webサイトの高速化 ルール11 リダイレクトを避けよう!
Webサイトの高速化 ルール12 スクリプトの重複に気をつける!
Webサイトの高速化 ルール13 ETagを正しく設定する!
