パフォーマンスを向上させるために、サブセットフォントが素晴らしい

Font Awesomeは人気のあるアイコンのライブラリですが、使用方法のパフォーマンスが不十分になる可能性があります。 SubsetでFont Awesomeを選択することにより、Fontファイルから未使用のグリフを削除できます。これにより、ネットワークによって送信されるバイト数が減り、パフォーマンスが向上します。

フォントの素晴らしいプロジェクトでフォントサブセットの選択を取り、それがどのような変更を加えることができるかを見てみましょう。次のプロセスでは、Font Awesomeから提供されるCSSファイルをインポートし、そのWebフォントを使用してアイコンを表示していると仮定します。

プロジェクト設定

デモンストレーションのために、Fontの基本的なCSSファイルをAwesomeにインポートするHTMLファイルは1つだけです。アイコンの合理的なサンプルを取得するために、サイドプロジェクトで使用する各アイコンをリストしました。

サブセットでフォントを選択する前に、HTMLファイルがブラウザでどのように見えるかを次に示します。

以下は、読み込まれたコンテンツを表示するDevToolのネットワークタブです。

次に、フォントファイルがこれらすべてをレンダリングするために必要なバイトの数を見てみましょう。

ベンチマーク

Font Awesomeを使用する最も直接的で最悪のパフォーマンスの方法が何であるかを見たいと思っています。言い換えれば、最も遅くて最適化ソリューションを実装したいと考えています。 Font Awesomeから提供されるAll.min.cssファイルをインポートしています。

上記のように、圧縮されたファイルサイズは33.4kbで、これは悪くありません。残念ながら、DevToolのフォントタブを見たとき、状況は悪化しました。

フォントファイルはブラウザのJavaScriptほど高価ではありませんが、ブラウザがダウンロードする必要があるバイトで、いくつかの小さなアイコンだけです。一部のユーザーは、モバイルデバイスでWebサイトを閲覧し、強力なインターネット接続または高速なインターネット接続から離れている場合があると考えてください。

PurifyCSSでの最初の試み

Font Awesomeのメインスタイルシートには、数千のアイコン定義が含まれています。しかし、数十個のアイコンしか必要ない場合はどうでしょうか？私たちは確かに望まないものを削除することができますか？

コードを分析し、スタイルシートから未使用のスタイルを削除する多くのツールがあります。私はたまたまpurifycssを使用しています。このライブラリはもはや積極的に維持されていませんが、その哲学は同じであり、最終的には、私たちが探している解決策ではありません。ただし、CSSを剪定して必要なコンテンツのみを含めると何が起こるかを見てみましょう。次のスクリプトを使用して実装できます。

 <code>const purify = require("purify-css"); const content = ["./dist/**/*.js"]; // Vite 构建的内容purify(content, ["./css/fontawesome/css/all.css"], { minify: true, output: "./css/fontawesome/css/font-awesome-minimal-build.css" });</code>

新しく構築されたCSSファイルをロードすると、ネットワーク上で転送されるCSSバイトの数は、33kbから7.1kbに大幅に低下しました。

残念ながら、他のフォントの素晴らしいフォントファイルは変更されていません。

どうしたの？ Purifycssはその仕事をします。未使用のすべてのアイコンのCSSルールを削除します。残念ながら、実際のフォントファイルを入力してGlyphsとCSSルールをトリミングすることはできません。

フォントファイルを処理できるPurifyCSSのようなツールがあれば素晴らしいでしょう...

救助するためのサブセット選択ツール！

もちろん、フォントファイルから未使用のコンテンツを削除できるツールがあり、サブセット選択ツールと呼ばれます。サブセット選択ツールは、Webページを分析し、フォントファイルを表示し、未使用の文字をトリミングします。 Zach LeathermanのGlyphhangerなど、フォントを選択するためのツールのサブセットがたくさんあります。 Font Awesomeは、サブセット選択ツールが組み込まれているため、サブセットを選択するのは非常に簡単であることがわかります。見てみましょう。

自動サブセット選択フォント

私の今後の自動サブセット選択と手動サブセット選択ツールには、有料のフォント素晴らしいプロサブスクリプションが必要です。

Font Awesomeを使用すると、 Toolkitと呼ばれるものをセットアップできます。これは、Font Awesomeドキュメントに「すべてのアイコンと素晴らしいコンテンツを簡単に配置できるバックパック」と説明できます。したがって、すべてのCSSファイルをインポートする代わりに、ToolkitはHTMLファイルに追加できるファイルを提供します

単一のスクリプトタグは、ツールキットが実際に必要なフォントグリフのみをフォントファイルから送信する場所です。ツールキットを作成するのに約1分かかります。これに似たスクリプトタグが取得されます。

<code></code>

スクリプトが読み込まれている場合、JavaScriptファイルは4kbしかありませんが、CSSファイルはまったくありません。 DevToolsフォントタブをもう一度見て、サブセットの選択を行った後にどのフォントファイルがロードされているかを確認しましょう。

757kbから331kbに落ちました。 50％以上削減されました。しかし、特に54個のアイコンのみをレンダリングする場合は、まだ改善できます。これは、Font Awesomeのマニュアルフォントサブセット選択ツールが登場する場所です。

手動サブセット選択フォント

Font Awesomeが私たちに必要な正確なアイコンを選択して、カスタムビルドを提供できるツールを提供してくれたら、それは素晴らしいことではないでしょうか？はい、彼らはしました。何らかの理由で、彼らはこれを誇大宣伝しませんでしたが、実際には、フォントの手動サブセット選択専用のデスクトップアプリがあります。アプリはウェブサイトからダウンロードできますが、自動サブセット選択ツールのように、このアプリには実際に使用するには有料のフォントの素晴らしいサブスクリプションが必要です。

アイコンを検索し、シリーズを選択し、必要なものを追加し、大きな青色のビルドボタンをクリックします。これは、Font Awesomeアイコンのカスタムサブセットを生成するために必要なすべての作業です。

ボタンをクリックした後、Font Awesomeはカスタムビルドを保存する場所を尋ねると、必要なものがすべてzipファイルをダンプします。実際、あなたが得る構造は、通常のフォントの素晴らしいダウンロードとまったく同じであり、これは特にシンプルなものになります。もちろん、カスタムビルドをプロジェクトファイルとして保存することで、後で再開して必要に応じてアイコンを追加または削除できるようにします。

devtoolsを開いて、読み込んでいるアイコンの最終サイズを確認しますが、最初に、実際のフォントファイル自体を見てみましょう。カスタムビルドは、ブラウザが使用するものに応じて、さまざまなタイプを作成します。 Chromeでロードされたファイルである.woff2ファイルに焦点を当てましょう。存在する前に存在していた同じライト、レギュラー、デュートン、ソリッドファイル、およびブランドファイルはまだ存在しますが、今回は5kbを超えるものはありません...これはGZIPによって圧縮される前です！

CSSファイルはどうですか？たった8kbに縮小します。 GZIPを使用して圧縮した後、2kbしかありません！

DevToolsの最終統計は次のとおりです。

出発する前に、デスクトップフォントSubset GUIツールにCI/CDと統合してビルド時にこれらのファイルを生成できるCLIがあるかどうか疑問に思っている場合、答えはまだありません。私はフォントの素晴らしいスタッフにメールを送りましたが、彼らは彼らが計画していると言いました。公開されている場合、ユーザーはビルドプロセスを簡素化できます。

ご覧のとおり、フォントなどのツールを使用してアイコンを表示するのは非常にクールです。ただし、デフォルトの使用法は、プロジェクトのためにそれを行うための最良の方法ではありません。可能な限り最小のファイルサイズを取得するために、サブセットのフォントを選択することは、必要なものをトリミングし、必要なものだけを提供するためにできることです。それが私たちが望むパフォーマンスです。特に、伝統的に処理するのが難しいフォントのロードに関しては、私たちが望むパフォーマンスです。

以上がパフォーマンスを向上させるために、サブセットフォントが素晴らしいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。