私は Google フォントと自分のサイトのタイポグラフィを使用しています。見た目は素晴らしいのですが、オーバーヘッドが大きくなります。サイトの速度を落とさずに、自分の Web サイトに同じ外観と雰囲気を持たせる方法はありますか?
ここで自分のサイトを分析していますhttps://developers.google.com/speed/pagespeedGoogle フォントを使用すると、スコアが 60 前後と非常に低くなりますが、これらのフォントを削除するとスコアは良くなります。Web ページの品質を損なわずにこれらのフォントを使用する方法はありますか? ページの最適化が優先事項です。
ベストアンサー1
短い答え: いいえ。もう少し長い答え: いいえ。試すことはできますが、Google WebFonts がすでに提供しているものを上回ることはまずあり得ません。では、問題をもう少し詳しく分析してみましょう...
まず、単一の外部リソース (Web フォント) を追加するだけで PageSpeed スコアに悪影響が出るのであれば、ページがかなり軽量であるはずです。おそらく、PageSpeed 側でこれを修正する必要があるでしょう。では、Web フォントに戻りましょう。
グラウンドゼロ：追加どれでも外部リソースをページに組み込むと、ページ全体のパフォーマンスに悪影響が及びます。Web フォントの場合、CSS は「重要なリソース」と見なされ、フォントが到着するまでレンダリングが遅延されるため、これはさらに大きな問題になる可能性があります。この手順を省略すると、ユーザーは「スタイル設定されていないコンテンツのフラッシュ」(FOUC) を受け取る可能性があります。この場合、ページは 1 つのフォントでレンダリングされ、フォントが到着するとスタイルが変更されます。これは不快な体験であり、絶対に避けるべきです。
ステップ2：ウェブフォントを使用するには、外部CSSファイル（この場合はGoogleサーバーから提供される）を含める必要があります。これらのサーバーは重く低遅延に最適化されていますが、同時に、ここには魔法はありません。まだ時間がかかります。
ステップ3: CSSファイルの内容は? 多くの人がGoogle WebFontsを批判するのはこの部分です。スタイルシートはurl()Webフォントファイルへの参照を提供します。なぜフォントをbase64/インライン化しないのでしょうか? Google WebFontsは毎日何十億ものページでレンダリングされるため、フォントがブラウザのキャッシュに保存されている可能性が高い最初のページの読み込みをテストするためにコールド キャッシュを使用してページを更新する場合 (そうすべきです)、常にフォントが取得されますが、これは私たちが最適化しているエクスペリエンスではありません。
さらに、フォントをページにインラインで挿入するだけではダメなのでしょうか？プラットフォームごとに受け入れ可能なファイル形式が異なり（woff、eot、ttfなど）、Google WebFontsは動的にフォントを提供します。最も最適化されたフォーマット現在のプラットフォームに基づきます。WebFont (例: woff) をダウンロードしてインライン化するだけでは、うまく機能するかもしれませんが、異なるプラットフォームの訪問者には機能しない可能性があります。さらに、これらのフォントの圧縮は常に改善されています。Google サーバーを使い続けると、これらの改善が自動的に継承されます。独自のフォントを作成すると、行き詰まってしまいます。
簡単に言うと、自分で作成する場合は、各プラットフォームに合わせてフォントを最適化し、プラットフォームに基づいて条件付きフォントを提供し、時間の経過とともに圧縮の改善に追いつくようにしてください。これらすべてを実行できれば、提供されているものよりも優れた結果が得られるかもしれません。:-)
最後になりましたが、重要なことです。ウェブフォントを使うことを恐れないでください確かに、追加の時間がかかりますが、プレゼンテーションも重要です。それはあなたの判断次第です。課せられた遅延が許容できない場合は、デフォルトのフォントを使い続けてください。ただし、Google WebFonts インフラストラクチャ/CDN に勝とうとしても、あまり効果は期待できません。
PS 最後にもう 1 つアドバイスがあります。含めるウェイトとフォント フェイスをすべて実際に使用するようにしてください。多くの人は (念のため) ファミリー全体を選択し、結局まったく使用しなくなるため、一部のブラウザーでは不要なダウンロードが発生します。