フォントをプリロードして Web ページの読み込みを高速化するにはどうすればよいですか?

Web ページの読み込みの最適化: フォント レンダリング遅延の最小化

@font-face を使用してフォントを埋め込む場合、一般的に、短い遅延が発生します。フォント ファイルがロードされるまで Web ページをレンダリングします。これにより、システムのデフォルトのフォントが一時的に表示され、ユーザー エクスペリエンスが損なわれる可能性があります。この問題に対処するために、最新のブラウザは、「プリロード」リンクという解決策を提供しています。

フォントのプリロードに「プリロード」リンクを使用する

「プリロード」リンクにより、次のことが可能になります。レンダリング プロセスの前に、特定のリソースのダウンロードと解析を優先することができます。フォントのプリロードの場合、以下に示すように、フォント ファイルの URL、形式、およびクロスオリジン情報を指定できます。

<link
  rel="preload"
  href="assets/fonts/xxx.woff"
  as="font"
  type="font/woff"
  crossorigin
/>

「プリロード」リンクを使用すると、ブラウザにフォント ファイルのロードを開始するように指示できます。 Web ページが読み込まれるとすぐにレンダリングできるようになります。この技術により、正しいフォントの表示の遅延が大幅に最小限に抑えられ、ユーザー エクスペリエンスが向上し、よりシームレスなブラウジング環境が作成されます。

追加リソース:

• [Can I使用: link-rel-preload](https://caniuse.com/link-rel-preload)
• [ドキュメントrel=preload - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Link_types#rel_preload)
• [Web フォントのプリロード ヒント - Bram Stein](https:// www.bramstein.com/writing/preload-web-fonts/)

以上がフォントをプリロードして Web ページの読み込みを高速化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。