☰

最近のウェブサイトではなぜテキストがすぐに表示されないのでしょうか?

tag-icon • tag-icon performance browser display webkit
最近のウェブサイトではなぜテキストがすぐに表示されないのでしょうか?

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

基本的には以前とは逆に動作し、最初にテキストが表示され、次に画像が表示され、残りは後で読み込まれます。どのような新しいテクノロジーがこの問題を引き起こしているのでしょうか? 何か考えはありますか?

注意: 私の接続速度が遅いため、問題がさらに悪化している可能性があります。

以下の例を参照してください。すべてが読み込まれますが、テキストが最終的に表示されるまでにさらに数秒かかります。

ここに画像の説明を入力してください

答え1

理由の1つは、最近のウェブデザイナーはウェブフォント（通常はウォフ形式）、例えばGoogle ウェブフォント。

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

font-family: Arial, Helvetica, sans-serif;

最初のフォントがシステム上に見つからない場合、ブラウザは 2 番目のフォントを探し、最後にフォールバックの「サンセリフ」フォントを探します。

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

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

次に、次のようにして特定の要素のフォントを読み込みます。

font-family: 'Droid Serif',sans-serif;

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

例えば、私が住んでいる全国紙の一つは、日刊ニュースは、見出しにはウェブフォントを使用していますが、リードには使用していないため、そのサイトが読み込まれると、通常はリードが最初に表示され、0.5 秒後に上部の空白スペースすべてに見出しが表示されます (少なくとも Chrome と Opera ではそうです。他は試していません)。

(また、最近のデザイナーはあらゆるところに JavaScript を散りばめているので、誰かがテキストで何か巧妙なことをしようとしているのかもしれません。それが遅延の原因です。ただし、これはサイト固有の問題です。最近のテキストが遅延する一般的な傾向は、上記の Web フォントの問題であると私は考えています。)

追加

この回答は、あまり詳しくは述べなかったものの、非常に多くの賛成票を集めました。なぜならの。質問スレッドにはたくさんのコメントが寄せられているので、少し詳しく説明してみます (トピックが保護されてからしばらくすると、多くのコメントが消えてしまったようです。おそらく、モデレーターが手動で削除したのでしょう)。また、このスレッドの他の回答も読んでみてください。それぞれ独自の方法で詳しく説明されています。

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

お勧めしますウェブデザイナーのポール・アイリッシュによるウェブフォントに関するFOUTの投稿。

注目すべきは、ブラウザによって処理が異なることです。上で書いたように、OperaとChromeをテストしましたが、どちらも同様の動作をしました。WebKitベースのブラウザ（Chrome、Safariなど）はすべて、FOUTを回避するためにないWeb フォントの読み込み期間中にフォールバック フォントを使用して Web フォント テキストをレンダリングします。たとえウェブフォントがキャッシュされている場合、意思レンダリング遅延この質問スレッドには、反対意見や、キャッシュされたフォントがこのように動作するのは完全に間違っているというコメントが多数ありますが、たとえば上記のリンクから:

どのような場合にFOUTが発生しますか

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

ChromeはFOUTのリスクがなくなるまでレンダリングを待つため、遅延が発生します。範囲効果が見えるかどうかは (特にキャッシュから読み込む場合)、レンダリングする必要があるテキストの量やその他の要因などによって左右されるようですが、キャッシュしても効果が完全になくなるわけではありません。

Irish では、投稿の下部に、2011 年 4 月 14 日時点のブラウザの動作に関する更新情報もいくつか記載されています。

  • ファイアフォックス(FFb11およびFF4 Final時点)もうFOUTはありません!やったー！http://bugzil.la/499292基本的に、テキストは 3 秒間表示されず、その後フォールバック フォントが表示されます。ただし、Web フォントはおそらくその 3 秒以内に読み込まれるでしょう... うまくいけば...
  • IE9はWOFF、TTF、OTFをサポートしています（ただし、埋め込みビット 物を設定する– WOFF を使用する場合、ほとんど意味がありません。しかし!!! IE9 には FOUT があります。:(
  • Webkitには着陸を待つパッチ0.5 秒後にフォールバック テキストを表示します。FF と同じ動作ですが、3 秒ではなく 0.5 秒です。
  • 追加: ブリンクはこれにもバグが登録されていますしかし、これをどうするかについては最終的な合意に達していないようです。現在は WebKit と同じ実装です。

もしこれがデザイナー向けの質問であれば、次のような問題を回避する方法を検討できるだろう。webfontloaderしかし、それはまた別の問題です。ポール・アイリッシュのリンクでは、この件についてさらに詳しく説明しています。

答え2

その理由は、まだ読めないテキストがレンダリングされているからです。ウェブフォントそれはまだあなたのブラウザに届く途中です。

また、ブラウザはGoogle Chromeで、ページのレンダリングにWebKitを使用しているため、それは彼らによって決定された(WebKitの場合)、Webフォントがダウンロードされるまでテキストを一切表示しないのが最善です。ただし、代わりに適切なフォールバックシステムフォントでテキストを読みやすくしたい開発者の場合は、次のようなものを使用できます。Google の WebFont Loaderこれを達成するために。

答え3

短い答え：アヤックスまたはウォフ

があるいくつかの原因ウェブサイトの「テキストの表示が遅い」. の遅さポータブルアプリダウンロードによって発生するウォフフォント。しかし、あなたが「あちこちにテキストが表示され始めます」多くの場合、アヤックス。

ウェブサイトは多くの部分から構成されています。これらの部分がどのようにダウンロードされ、組み立てられるかがデザインの選択の管理下にあるウェブデザイナー速度低下の原因は、開発者が以下の構成要素をどのように組み立てるかによって生じます。

  • 初期 HTML ページ
  • CS
  • JS
  • 画像
  • WOFFフォント
  • AJAXリクエスト
  • DOM操作

従来のウェブサイト:

従来、開発者はテキストコンテンツを初期 HTML ページそしてそれを表示する入手可能になるとすぐにHTMLはいくつかのリソースを参照し、ダウンロードされます。ブラウザは徐々に再描画するスタイルと画像が利用可能になると、画面にそれらが含まれるようになりました。AJAX と WOFF は使用できませんでした。

WOFF ウェブサイト:

WOFFフォントを使用すると、通常はブラウザで利用できないフォントをウェブサイトで使用できるようになります。ウェブサイトからフォントをダウンロードする一部の開発者は、すべての WOFF フォントがダウンロードされるまでテキスト コンテンツを表示しないようにブラウザに指示します。私の経験では、このアプローチはまだ広く普及していません。

AJAX ウェブサイト:

開発者の中には、テキストコンテンツを最初のHTMLページに含めず、代わりにAJAXを使用してテキストコンテンツをダウンロードすることを選択する人もいます。基本ページが読み込まれた後私の経験では、この方法は多くのより広範な採用WOFF フォントよりも遅く、これがあなたが説明したような速度低下の原因となることがほとんどです。

原因の特定

特定のサイトの原因を特定するには、次のようなツールを使用した分析が必要です。ファイアバグまたはChrome デベロッパー ツールまたは、次の方法でサイトを開くこともできます。インターネットエクスプローラー8は AJAX をサポートしていますが、WOFF はサポートしていません。サイトがまだ遅い場合は、問題は WOFF ではなく AJAX にあります。

答え4

他の人も指摘しているように、カスタムフォントが遅延の原因になっている可能性があります。

背景をもう少し説明すると、ブラウザはページの内容を画面に表示する前に、おおよそ次の処理を行っています。

  1. HTML を取得 (DNS、TCP、リクエスト/レスポンスの複数回のラウンドトリップ)
  2. HTML の解析を開始し、外部 CSS や JS などの外部リソースを検出します。CSS はレイアウトをブロックし、JS は解析をブロックすることに注意してください。そのため、ドキュメントの早い段階で (たとえば、head で) 読み込まれた CSS や JS などの外部リソースは、ページのコンテンツを画面に表示するのにかかる時間を遅くします。
  3. 外部 CSS と JS を取得します (複数のラウンドトリップ: これらのリソースが CDN などの別のドメインにある場合は DNS と TCP、およびリクエスト/レスポンスの RTT)
  4. 外部CSSとJSの読み込みが完了したら、JSを解析/実行し、スタイルを解析/適用します。
  5. CSS がカスタムフォントを参照している場合、それらのフォントもダウンロードする必要があり、カスタムフォントに依存するページの部分をレンダリングするために追加の往復遅延が発生します。

これはカスタム フォントによって発生する遅延に関するものではありませんが、最近、レンダリング遅延の原因についての追加情報を提供するブログ記事を書きました。この投稿では、ページの最初のペイントにかかる時間を最小限に抑えるための提案をいくつか示しています。カスタム フォントを使用したいページなど、ページのコンテンツの表示を高速化することに関心のある読者にとって、この記事が役立つことを願っています。http://calendar.perfplanet.com/2012/make-your-mobile-pages-render-in-under-one-second/

関連情報