Webページにテキストがすぐに表示されないのはなぜですか。

ブラウザのウィンドウを覗き見しがちな人は、テキストを読み込む前にページが頻繁に画像やレイアウトを読み込むことに気づいたかもしれません。1990年代には正反対の読み込みパターンがありました。どうしたの?

本日の質疑応答セッションは、コミュニティ主導のQ&A Webサイトのグループである、Stack Exchangeの下位区分であるSuperUserの好意により提供されます。.

質問

SuperUserの読者Laurentは、丁度ページが昔とはまったく異なる方法で要素をロードするように見える理由について非常に興味を持っています。彼は書く：

最近多くのWebサイトではテキストの表示が遅いことに気付きました。通常、背景、画像などが読み込まれますが、テキストは読み込まれません。しばらくするとテキストがあちこちに表示され始めます（必ずしもすべてが同時に表示されるとは限りません）。.

それは基本的にはテキストが最初に表示されたとき、それから画像と残りがその後ロードされていたときに使用していたときとは反対に機能します。この問題を引き起こしている新しい技術は何ですか？何か案が?

私は遅い接続をしていることに注意してください、それはおそらく問題を強調します.

例は[above]を参照してください - すべてがロードされましたが、テキストが最終的に表示されるまでにさらに数秒かかります.

それで、何が得られますか？ Laurent、そして私たちの多くは、テキストが最初にロードされ、それ以外のすべてのもの、つまりアニメーションGIF、タイル張りの背景、および90年代後半のWebブラウジングのその他すべてのアーティファクトが後になったことを覚えています。デザイン要素の現在の状況が最初に発生し、テキストが後で発生する原因?

答え

SuperUserの寄稿者であるDaniel Anderssonが、「なぜフォントロード最後の謎」の根底にある素晴らしい詳細な回答を提供しています。

その理由の1つは、Webデザイナーが最近Webフォント（通常はWOFF形式）を使用することを好むことです。 Google Webフォント.

以前は、サイトに表示できるフォントは、ユーザーがローカルにインストールしたものだけでした。例えばMacユーザーとWindowsユーザーは必ずしも同じフォントを持っているわけではなく、デザイナーは本能的に常に次のようにルールを定義しています。

フォントファミリー：Arial、Helvetica、sans-serif。 

最初のフォントがシステム上に見つからなかった場合、ブラウザは2番目のフォントを探し、最後に代替の "sans-serif"フォントを探します。.

これで、ブラウザにフォントをダウンロードさせるCSSルールとしてフォントURLを指定できます。

@import url（http://fonts.googleapis.com/css?family=Droid+Serif：400,700）; 

そして、次のようにして特定の要素のフォントをロードします。

font-family： 'Droid Serif'、サンセリフ。 

これはカスタムフォントを使用できることで非常に人気がありますが、リソースがブラウザによってロードされるまでテキストが表示されず、ダウンロード時間、フォントロード時間、およびレンダリング時間が含まれるという問題も生じます。これはあなたが経験しているアーティファクトであると思います.

例：私の全国紙の1つ、Dagens Nyheterは見出しにWebフォントを使用していますが、見込み客には使用していません。見出し付き（これは少なくともChromeとOperaに当てはまります。他の人に試したことはありません）.

（また、最近ではデザイナーがJavaScriptを絶対にあちこちに散布しているので、誰かがテキストを使って巧妙なことをしようとしているので、それが遅れるのはそのためです。時は、上記のWebフォントの問題です、と私は思います。）

添加：

この答えは非常に支持されるようになりました。 なぜなら これの。質問スレッドにはたくさんのコメントがありますので、少し拡張してみます[…]

この現象は、一般に「スタイルのないコンテンツのフラッシュ」、特に「スタイルのないテキストのフラッシュ」として知られています。 「FOUC」と「FOUT」を検索すると詳細な情報が得られます。.

Webフォントに関して、WebデザイナーのPaul IrishによるFOUTへの投稿をお勧めします。.

気づくことができることは、異なるブラウザはこれを異なる方法で処理するということです。私はOperaとChromeをテストしたと上記のように書きました。すべてのWebKitベースのもの（Chrome、Safariなど）は、FOUTを回避することを選択します。 ではない Webフォントの読み込み期間中にWebフォントのテキストを代替フォントでレンダリングする. たとえ Webフォントがキャッシュされている 意志 レンダリング遅延になる. この質問スレッドには他にも多くのコメントがあり、キャッシュされたフォントがこのように振る舞うのは間違っていると言っているのですが、例えば上記のリンクから：

どのような場合にFOUTが得られますか

• 意志： リモートttf / otf / woffのダウンロードと表示
• 意志： キャッシュされたttf / otf / woffを表示する
• 意志： data-uri ttf / otf / woffのダウンロードと表示
• 意志： キャッシュされたデータの表示 - utit / otf / woff
• しない： 従来のフォントスタックにすでにインストールされていて名前が付けられているフォントを表示する
• しない： local（）の場所を使用してインストールされ、名前が付けられているフォントを表示する

Chromeはレンダリング前にFOUTのリスクがなくなるまで待機するため、遅延が生じます。これに エクステント その効果は目に見える（特にキャッシュからロードするとき）レンダリングされる必要があるテキストの量とおそらく他の要因にとりわけ依存しているようですが、キャッシュは効果を完全に削除しません.

アイルランド人はまた、2011-04-14の時点でのブラウザの動作に関するいくつかの最新情報を記事の下部に掲載しています。

• Firefox （FFb11、FF4決勝時点） FOUTがなくなりました! Wooohoo！http：//bugzil.la/499292基本的にテキストは3秒間見えず、それからフォールバックフォントに戻ります。ウェブフォントはおそらく3秒以内にロードされるでしょうが…うまくいけば…
• IE9はWOFF、TTF、OTFをサポートしています（ただし、埋め込みビットセットが必要です。WOFFを使用している場合はほとんど問題ありません）。. しかしながら！！！ IE9にはFOUTがあります. :(
• Webkitには、0.5秒後に代替テキストを表示するための着陸を待つパッチがあります。 FFと同じ動作ですが、3秒ではなく0.5秒です.

これがデザイナー向けの質問であれば、このような問題を回避する方法があります。 ウェブフォンローダー, しかしそれはまた別の問題になるでしょう。 Paul Irishのリンクは、この問題に関するさらなる詳細に入ります.

説明に追加するものがありますか？コメントの中で消してください。他の技術に精通したStack Exchangeユーザーからの回答をもっと読みたいですか？こちらのディスカッションスレッドをチェックしてください。.