スタイル設定されていないコンテンツを含むウェブページが読み込まれ、ページ
本来の見た目や雰囲気と
合致するかどうかは定かではないものの、表示されるまでに数秒（あるいは数分）かかるのを見たことがあるでしょう。ウェブデザインの世界では、この異常現象は「意図しないスタイル設定さ
れていないコンテンツのフラッシュ（FOUC）」と呼ばれます。 図Aは、
CNN米国版のトップページでCSSの読み込みに失敗した際に発生したFOUCの異常例です。
図A
図Aの拡大図をご覧ください。
この記事では、FOUC に関する背景情報を共有し、ブラウザやデバイスに関係なく
、Web サイトで FOUC が発生しないようにする方法、または少なくとも
Web サイトが FOUC の影響を受ける可能性を減らす方法について説明します
。
簡単な歴史
FOUCが2001年の記事「スタイルなしコンテンツのフラッシュ」で初めて報告された当時、この問題はInternet Explorerに特有のものと思われていました。その後、
2006年にSafariにもこの不具合が見つかり、「FOUC問題」の記事で解説されました。どちらの記事も、これら2つのブラウザ
におけるCSSレンダリングの不規則性
と、スタイル付きコンテンツを一貫してレンダリングできないという問題を露呈しました
。最近の兆候では、
スタイル設定や画像、特にページの読み込みに時間がかかったりハングアップしたりするコンテンツにスクリプトが使用されている
特定のJavaScriptおよびjQuery実装でもFOUCが発生することが示され
ています。
FOUCを最小限に抑えるテクニック
最初の手法は、Brad BaxterによるFOUCチュートリアルで紹介されています。彼は、id=” fouc”を持つ
コンテナ内のすべてのコンテンツを非表示にするセレクタとして
クラス名「js」を適用することで、すべてのスタイルとJavaScriptが完了するまでWebページ全体または一部を非表示にすることで、FOUCを最小限に抑える簡単な方法を概説しています。「fouc」要素は
、JavaScriptのgetElementById関数を使用して表示値を「ブロック」
レベルに設定することで非表示
解除されます。
この短いプレゼンテーションでは、<style> と
<script> によるクラス名とID名の提案、そして
ウェブページの <head> 要素と <body> 要素内におけるコード例の配置例が
示されています。プレゼンテーションはGoogleドキュメントからPDF形式でダウンロードすることもできます。図B
のスクリーンキャプチャは、
BradがFOUC処理のために共有してくれたコードスニペットを2ページ表示したものです。
図B
図Bの拡大図をご覧ください。
John Polacek氏による、同じ手法を用いた短いFOUCチュートリアルがもう1つあります。彼は<style>
と<script>をJavaScriptメソッドと組み合わせて、「no-fouc」クラス
名をdisplay equals noneに設定することで、ページが完全に読み込まれるまで指定されたコンテンツを非表示にしています
。コードはGitHub Gistからも入手できます。
同様のテクニックを用いたFOUCに関する別のレッスンは、Karl Swedberg氏によるものです。彼は、
Webページの読み込み
時にJavaScriptを使用してスタイルを適用する際に、jQueryを使ってFOUCを回避する方法の一つを実演しています。さらに、
ページの読み込み時には非表示になっている黄色のハイライトリストを点滅させるデモテストページも提供しています。Karl
氏の別のテストページでは、スクリプトをページの下部に配置することでFOUCを事実上排除しています
。<script>テクニックの重要なポイントの一つは、
すべてのスクリプトをWebページの下部に配置することです。
同様のテクニックが、Paul Irishのブログ記事「Avoiding the FOUC v3.0」で紹介されています。彼はJavaScriptを使わないユーザー向けに独自のCSSを利用しており、
アコーディオンや画像スライダーといった一般的な機能のセレクター
の前に.jsを記述する必要がありません。
彼の解決策は、HTMLタグにclass=”no-js”を追加し、
<head>タグ内に<script>タグを1つ追加して、これを「js」に戻すというものです。私はこの方法を試したことはありませんが、Paulによると、このアプローチはModernizrでも
<body>タグの読み込み時に
HTML要素のクラスを設定するために使用されているとのことです。
ほとんどのWeb開発者にとって当然のテクニックは、スタイルシートへのリンクタグを
Webページドキュメントの<head>内に含めることです。Steve Souders氏は、この
点を「ルール5：スタイルシートを先頭に配置する」（「Webサイトの読み込み速度を高速化するための14のルール」リストの一部）で指摘しています。彼のルール5のページでは、スタイルシートを
bodyの末尾、</body>終了タグの直前に追加することでこれを実証しています。このページで実際にFOUCが機能している様子は、図Cの
前後のスクリーンショットで
確認できます。
図C
図Cの拡大図をご覧ください。
この最後のテクニックは、ほとんどのウェブ開発者が活用していると思います。JavaScriptのテクニックの中には、実際に使われているものもあるかもしれませんが、十分に活用されていないものもあるでしょう。FOUC
を回避するために、これらのあまり活用されていない方法を試してみて、ウェブサイトでFOUCとの戦いに勝てるかどうか試してみてください。
