22

Google フォントとサイトのタイポグラフィを使用しています。見た目は素晴らしいですが、大きなオーバーヘッドが追加されます。サイトの速度を犠牲にすることなく、自分の Web サイトで同じルック アンド フィールを得る方法はありますか?

ここで自分のサイトを分析していますhttps://developers.google.com/speed/pagespeedと Google フォントを使用すると、60 前後の非常に低いスコアが得られますが、これらのフォントを削除すると、良いスコアが得られます。Web ページの品質を損なうことなくこれらのフォントを使用する方法はありますか? 私の優先事項はページの最適化です。

4

2 に答える 2

37

短い答え：いいえ。少し長い回答: いいえ、試すことはできますが、Google WebFonts が既に提供している機能を上回る可能性はほとんどありません。では、問題をもう少し詳しく見てみましょう...

まず、外部リソース (Web フォント) を 1 つ追加するだけで PageSpeed スコアにマイナスの影響がある場合は、ページをかなり軽量にする必要があります。おそらく、PageSpeed 側でこれを修正する必要があります。さて、ウェブフォントに戻りましょう！

グラウンド ゼロ: 外部リソースをページに追加すると、ページの全体的なパフォーマンスに悪影響を及ぼします。Web フォントの場合、これはさらに大きな問題になる可能性があります。これは、CSS がフォントが到着するまでレンダリングを保留する「重要なリソース」と見なされるためです。このステップをスキップすると、ユーザーは「スタイル設定されていないコンテンツのフラッシュ」( FOUC) では、ページは 1 つのフォントでレンダリングされ、フォントが到着するとスタイルが変更されます。これは耳障りな経験です - あなたは間違いなくこれを望んでいません.

ステップ 2: Web フォントを使用するということは、外部 CSS ファイルを含める必要があることを意味します。この場合は、Google サーバーによって提供されます。これらのサーバーは低レイテンシー向けに大幅に最適化されていますが、同時に魔法のようなものはありません。まだ時間がかかります!

ステップ 3: CSS ファイルの中身は? これは、多くの人が Google WebFonts を批判する場所です。スタイルシートはurl()Webfont ファイルへの参照を提供します。base64/フォントをインライン化しないのはなぜですか? Google WebFonts は、毎日何十億ものページでレンダリングされます。フォントがブラウザのキャッシュにある可能性が非常に高いため、特に URL を使用することにしました。最初のページの読み込みをテストするために (必要に応じて) コールド キャッシュを使用してページを更新する場合、常にフォントを取得します..しかし、それは私たちが最適化しているエクスペリエンスではありません.

さらに、フォントをページにインライン化しないのはなぜですか? 各プラットフォームには、受け入れるファイル形式 (woff、eot、ttf など) が異なり、Google WebFonts は、現在のプラットフォームに基づいて最も最適化された形式を動的に提供します。単純に WebFont (例: woff) をダウンロードしてインライン化すると、うまく機能するかもしれませんが、異なるプラットフォームの訪問者にとってはそうではありません。さらに、これらのフォントの背後にある圧縮は常に改善されています。Google サーバーを使い続けると、これらの改善が自動的に継承されます。自分で転がすと、行き詰まります。

簡単に言えば、独自のフォントを作成する場合は、各プラットフォームに合わせてフォントを最適化し、プラットフォームに基づいてコンディショナル フォントを提供し、時間の経過とともに圧縮の改善についていくようにしてください。そのすべてを行うことができれば、提供されているものよりもうまくいく可能性があります。:-)

最後だが大事なことは。ウェブフォントの使用を恐れないでください。はい、追加の時間が追加されますが、プレゼンテーションも重要です。君に電話だ。課せられた待ち時間が許容できない場合は、デフォルトのフォントを使用してください。しかし、Google WebFonts インフラストラクチャ / CDN を打ち負かそうとしても、それほど遠くまで到達することはほとんどありません。

PS 最後のヒント: 含まれているすべてのウェイトとフォント フェイスを実際に使用していることを確認してください。多くの人がファミリー全体を選択し (念のため)、それらをまったく使用しないことになり、一部のブラウザーでは不要なダウンロードにつながります。

于 2012-08-28T04:41:37.777 に答える
3

はい、できます。

  1. Google Web フォント ファイルをダウンロードする
  2. それらをfont squirrel web generatorにアップロードします
  3. [エキスパート設定] を選択し、[Base64 CSS] にチェックを入れます。
  4. base64 を介してフォントをロードする場合、外部の http 呼び出しが終了するのを待っているわけではありません。
  5. これにより、Flash Of Unstyled Content (FOUC) が削除されます。

参照: https://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/他の多くの記事をオンラインで参照できます。私も自分のウェブサイトで試してみましたが、うまくいきました。

于 2014-09-16T23:13:16.927 に答える