CSS読み込みのタイミングで適用前の装飾が表示されることを「FOUC」と言う

WEBページを開いた時に、文字の羅列だけになってしまっているページ、 CSSの読み込みが完了したら、途端に綺麗な装飾が現れるというページに遭遇した経験のある人は少なく無いと思います。 もはや慣れてしまって気になっていない人は、ページが表示されて、CSSが適用されるまで気長に待っているというツワモノもいるかもしれません。

残念なFOUC

いつまで待っていてもCSSが適用されない場合です。 これは、CSS部分が容量が大きいとか、たまたま回線状況が悪く正常にDLされなかったとか、なんやかんやのコーディングエラーがたまたま発生したとか・・・ そんな時は、ページがテキスト表示のまま、まるでひと昔のホームページのように表示されてしまいます。 ここで、手慣れている人は、ブラウザのリロードボタンを押して、正常読み込みを完了させる事ができるのですが、 会社などでコーディング担当じゃない人であれば、コーダーに対して「ページが崩れてるんですけど〜〜〜！」とさも被害者のように言っている姿も見受けられます。

FOUCの意味

そもそも「FOUC」ってどういう詳細なんでしょう？ 「Flash of Unstyled Content」の頭文字で、ページ読み込みの時に一瞬CSSが適用されていないページが見える時の事。 FOUCは一瞬の出来事なんですね。 そうです、CSS読み込みエラーの場合はFOUCでは無いんですね。

FOUCさせない為に

FOUCは、ページのテキスト読み込み（DOM読み込み）が完了した後にCSSが読み込み完了してしまう、非同期読み込みの際に発生しがちです。 headタグにlinkタグを書き込むのが一般的ですが、body部分で、下部に書かれている時も起こりがちです。 他にもcss内で「important」で外部CSSを読み込む時や、javascriptで、非同期にCSSを読み込む時も発生しがちです。 逆に発生させない為には、上記のような原因を排除すればいいのですが、SCSSや、外部ライブラリに頼りきっているフレームワーカーな人は、対応に苦労すると思います。 もちろん、CSSが膨大に膨らんでいる状態もNGなわけで、そのページに必要最低限の状態がベストとも言えます。

ブロードバンドの落とし穴

そして、こうしたFOUCを無くす事を仕事で行う場合、忘れてはいけないのが、

世の中みんなが、ブロードバンド環境ではない。

という事です。 これは、今やGB（ギガ）環境でのネット接続が当たり前になった日本国内インフラでも、3G環境でしか接続されない地域もあるし、光回線すら届いていない地域もあります。 そうした時に、MB（メガ）クラスのボリュームを読み込むページでは、読み込み完了するまでに、数分待たなければいけない状態になることは避けたいですよね。 たくさんの画像を表示するサイトなどは、サムネイルをできるだけ軽くて小さい圧縮画像にして、出し分ける必要もあるし、無駄なライブラリなどは読み込まないのが一番です。 意外とこうしたナローバンド環境って「今時遅い環境使っている方が悪い」と言ってしまう開発員がいるのも事実なので、そういう人は是非、海外旅行などをして、日本の環境がいかに優れているかを体感してみる事をお勧めします。 下記参考リンクにFOUCについての見解が書かれているので、気になる人は参考にしてみてください。 FOUC問題まとめ