これまでのモジュールでは、HTML、CSS、JavaScript、 メディア リソースが含まれます。このモジュールでは、ウェブ アプリケーションを 使用できます。
ウェブフォントは、読み込み時とレンダリング時の両方でページのパフォーマンスに影響を与える可能性があります。
フォント ファイルのサイズが大きいと、ダウンロードに時間がかかり、
Contentful Paint（FCP）を報告しますが、font-display 値が間違っていると、
ページの Cumulative Layout Shift の原因となる、望ましくないレイアウト シフト。
（CLS）。
ウェブフォントの最適化について説明する前に、ウェブフォントが これによって、CSS がどのようにルールを 特定の状況における不要なウェブフォントの検索
ファインド
ページのウェブフォントは、@font-face を使用してスタイルシートで定義します。
宣言:
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
上記のコード スニペットでは、"Open Sans" という名前の font-family を定義しています。
は、それぞれのウェブフォント リソースの場所をブラウザに指示します。費用を抑えるため
ブラウザは、フォントが判別されるまでウェブフォントをダウンロードしません。
現在のページのレイアウトで必要であることを示します
h1 {
font-family: "Open Sans";
}
上記の CSS スニペットでは、ブラウザが "Open Sans" フォント ファイルをダウンロードします。
このコードは、ページの HTML 内の <h1> 要素を解析する際に使用します。
preload
@font-face 宣言が外部スタイルシートで定義されている場合、
ブラウザがスタイルシートをダウンロードした後にのみ、ダウンロードを開始できます。
そのため、ウェブフォントは遅れて発見されるリソースになりますが、
より早くウェブフォントを検出できます。
preload を使用して、ウェブフォント リソースの早期リクエストを開始できます。
指定します。preload ディレクティブを使用すると、開発中の早い段階でウェブフォントを検出できるようになります。
ブラウザはダウンロードを待たずにすぐに開始します
ダウンロードと解析を終了します。preload ディレクティブ
は、ページでフォントが必要になるまで待機しません。
<!-- The `crossorigin` attribute is required for fonts—even
self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>
@font-face のインライン宣言
インライン インライン コードで、ページ読み込みの早い段階でフォントを検出可能
@font-face 宣言を含む、レンダリングをブロックする CSS を <head>
<style> 要素を使用して HTML を変換します。この場合、ブラウザは
読み込みの早い段階でウェブフォントを使用できます。
スタイルシートをダウンロードします。
@font-face 宣言をインライン化すると、preload を使用するよりもメリットがあります。
ヒント: ブラウザでは現在の画像のレンダリングに必要なフォントのみがダウンロードされるため、
できます。これにより、使用していないフォントがダウンロードされるリスクを回避できます。
ダウンロード
ウェブフォントを検出し、現在のページのフォントで必要であることを確認したら、 ブラウザにダウンロードされます。ウェブフォントの数、エンコード、 ファイルサイズもウェブフォントの 読み込み速度に大きく影響します レンダリングされます。
ウェブフォントの自己ホスト
ウェブフォントは、Google Fonts などのサードパーティ サービス、または 配信元で自己ホストできますサードパーティのサービスを使用する場合、 ページでプロバイダのドメインへの接続を開く必要があります。 必要なウェブフォントをダウンロードします。これが発見とその後の活動を遅らせる可能性があります。 ウェブフォントのダウンロードなどです
このオーバーヘッドは、preconnect リソースヒントを使用して削減できます。方法
preconnect の場合、クロスオリジンへの接続を開くようブラウザに指示できます。
ブラウザよりも早く
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
上記の HTML スニペットは、ブラウザに対して接続を確立するよう通知します。
fonts.googleapis.com と fonts.gstatic.com への CORS 接続。一部
フォント プロバイダ（Google Fonts など）は、さまざまな環境から CSS やフォント リソースを
生成します。
アプリケーションを自己ホスト型化することで、サードパーティとの接続の必要性を サポートしています。ほとんどの場合、自己ホスト型のウェブフォントはダウンロードよりも高速です 作成できますウェブフォントの自己ホスティングを計画している場合は、 コンテンツ配信ネットワーク（CDN）の HTTP/2 または HTTP/3 を使用しており、 ウェブサイトに必要なウェブフォントのキャッシュ ヘッダーを正しく学習します。
WOFF2 と WOFF2 のみを使用
WOFF2 はブラウザを幅広くサポートし、圧縮率も最大 30% 向上 はるかに効率的ですファイルサイズが縮小されるため、ダウンロード時間が短縮されます。WOFF2 多くの場合、最新の環境下での完全な互換性を実現するためには、 できます。
<ph type="x-smartling-placeholder">ウェブフォントをサブセットする
ウェブフォントには通常、以下のようなさまざまなグリフが含まれています。 さまざまな言語で使用されるさまざまな文字を表すことができます。お使いの コンテンツが 1 つの言語でのみ配信されている場合（またはアルファベットが 1 つしか使用されていない場合）は、 サブセット化してウェブフォントのサイズを小さくしますこれは多くの場合 Unicode コードポイントの数値または範囲を指定します。
サブセットとは、元のウェブに含まれていたグリフを集約したもので、 追加します。たとえば、すべてのグリフを配信するのではなく、 サブセットを使用します。必要なサブセットに応じて、 グリフを使用すると、フォント ファイルのサイズを大幅に削減できます。
一部のウェブフォント プロバイダ（Google Fonts など）では、
クエリ文字列パラメータの使用たとえば、
https://fonts.googleapis.com/css?family=Roboto&subset=latin URL は、
ラテン文字のみを使用する Roboto ウェブ フォントのスタイルシート。
ウェブフォントを自己ホストすることにした場合は、次のステップとして glyphanger や subfont などのツールを使って自分でサブセットをホストすることもできます。
ただし、独自のウェブフォントを自己ホストする容量がない場合は、
追加の text を指定して、Google Fonts が提供するウェブフォントのサブセット
必要な Unicode コードポイントのみを含むクエリ文字列パラメータ
測定しますたとえばサイトにディスプレイ ウェブフォントがあり、
「ようこそ」というフレーズに必要な文字数が少なければ、
次の URL から Google Fonts でこのサブセットをリクエストします。
https://fonts.googleapis.com/css?family=Monoton&text=Welcome。これにより、
大幅に、1 つの書体に必要なウェブフォント データの量を大幅に削減
（このような極端なサブセット化がウェブサイトで役立つ場合）
フォントのレンダリング
ブラウザがウェブフォントを検出してダウンロードした後、
表示されます。デフォルトでは、
ダウンロードが完了するまで表示されません。ブラウザのテキスト レンダリングは調整可能
ウェブ アプリケーションのページまでに表示 / 非表示を
フォントが完全に読み込まれました（font-display CSS プロパティ）。
block
font-display のデフォルト値は block です。block では、ブラウザは
は、指定されたウェブフォントを使用するすべてのテキストのレンダリングをブロックします。異なる
ブラウザの動作が若干異なります。Chromium と Firefox では、
フォールバックが使用されます。Safari が無期限にブロック
読み込みます。
swap
swap は、最も広く使用されている font-display の値です。swap はブロックしない
代替ですぐにテキストが表示され、その後で
表示されます。これにより、コンテンツを待たずにすぐに表示できます。
ウェブフォントをダウンロードします。
ただし swap の欠点は、フォールバックしたときにレイアウト シフトが発生することです。
CSS で指定されるウェブフォントとウェブフォントは、行が大きく異なる
その他のフォントの指標を
変更できます次の場合、ウェブサイトの CLS に影響する可能性があります。
preload ヒントを使用して、ウェブ フォント リソースをすぐに読み込むことは
または他の font-display 値を考慮しない場合に行います。
fallback
font-display の fallback 値は、次のどちらかの値になります。
block と swap。swap とは異なり、ブラウザはフォントのレンダリングをブロックしますが、
ごく短時間に代替テキストをスワップするblock と異なり、
ブロック期間は非常に短くなります
高速ネットワークでは、fallback 値の使用がうまく機能します。たとえば、ウェブフォントが
ダウンロードが速くなるため、ウェブフォントはページの
初期レンダリングを行いますただし、ネットワークが遅い場合は、代替テキストが
最初はブロック期間経過後に、ウェブフォントが変化したときにスワップアウトされます。
表示されます。
optional
optional は最も厳格な font-display 値です。ウェブのみを使用します。
100 ミリ秒以内にダウンロードした場合、そのフォント リソースに課金される場合があります。ウェブフォントが
その長さを超える場合はページ上では使用されず、ブラウザは
ウェブフォントがダウンロードされている間の現在のナビゲーションの代替書体
キャッシュに配置されます。
その結果、後続のページ ナビゲーションでは、すぐにウェブフォントを使用できるようになります。
確認します。font-display: optional はレイアウト シフトを回避します。
swap と関連付けていますが、ウェブフォントの到着が遅すぎると、一部のユーザーには
最初のページ ナビゲーション。
フォントのデモ
理解度テスト
ブラウザがウェブフォント リソースをダウンロードするタイミング（
preload ディレクティブで取得）？
ウェブ コンテンツ配信に必要な唯一かつ最も効率的なフォーマットは、次のうちどれですか。 対応していますか？
次のステップ: コード分割 JavaScript
フォントの最適化について理解したら、 次のモジュールに進みます。このモジュールでは、改善の余地があるトピックを取り上げます。 ユーザーの最初のページ読み込み速度を遅らせます。つまり、 コード分割による JavaScript。これにより、帯域幅と CPU 使用率を 競合をできるだけ抑える必要があります。つまり、 ユーザーが操作する可能性が非常に高い時間帯におすすめします。