フォントローダーでページのパフォーマンスを改善する方法

キーポイントの概要

概要

フォントローダーを使用すると、Webページのフォントの読み込みと方法を制御できるため、Webページのパフォーマンスを大幅に向上させると、ページの読み込み時間を短縮し、「スタイルのないテキストがちらつく」（FOUT）を避けます。
WebFontLoader JavaScriptライブラリは、ページをロードした後にバックグラウンドのさまざまなソースからフォントをロードできる非常に便利なツールであり、CSSおよびJavaScriptコールバック関数を使用してロードプロセスのカスタマイズを可能にします。
フォントの使用とユーザーエクスペリエンスはバランスが取れている必要がありますが、フォントはウェブサイトの美学を強化する必要があります。したがって、フォントローダーを使用して、代替フォントを実装すると、スムーズで高速なユーザーエクスペリエンスを維持できます。
この記事の執筆につながったインスピレーションをしてくれたJason Pamentalに感謝します。そうでなければ、私はこれについて考えないかもしれません！

arial、Times New Roman、Helveticaまたは…（Chilling）をWebページで最後に使用したときは…コミックサンズはいつでしたか？ Webフォントは遅すぎるように見えますが、一度表示されると、振り返ることはありません。フォントは楽しいです、（通常）無料で実装しやすい：

その後、ページでフォントを使用できます。

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

フォントはモバイルデバイスで適切に動作するため、ユーザーはレスポンシブWebデザインで優れたエクスペリエンスを得ることができます。

それとも本当にそうですか？

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

写真の後、フォントは通常、Webページで最大のリソースです。上記のubuntuフォントは、ページにほぼ250kbを追加します。これは、モバイルネットワーク接続が遅いことで明らかです。 Chrome、Ie、Safari、およびOperaは、フォントがロードされたときに空白のスペースを残すため、ページを使用できません。 FirefoxおよびOperaの古いバージョンは、代替フォントとスイッチでテキストを表示します。これは、非スタイルのテキストフラッシュ（FOUT）と呼ばれます。これらの状況はどちらも理想的ではありません。フォントの重み付けの問題について心配することはめったになく、「これは最初のページの問題です」や「多くのユーザーがフォントをキャッシュしている」などの言い訳をすることはめったにありません。あまり使用されていないフォントを省略する場合があります。標準的なオペレーティングシステムフォントを使用して明らかなソリューションを採用することを敢えてする人はほとんどいません。当社のクライアントとデザイナーは決して私たちを許しません。

javascript webfontloader

幸いなことに、別のオプションがあります：webfontloader。このJavaScriptライブラリは、Google、TypeKit、fonts.com、fontdeck、またはページのロード後の背景に独自のサーバーからフォントをロードできます。ライブラリ自体は、ページに追加の17kbを追加しますが、バックグラウンドプロセスとしてもダウンロードされます。上記のubuntuフォントセットをロードするには、フォントと設定を定義するwebfontconfigというグローバルオブジェクトを作成し、webfontloader自体をロードします。

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

したがって、

デバイスと帯域幅の容量に基づいて、一部またはすべてのフォントがロードされているかどうかを判断できます。理想的には、ネットワーク情報APIを使用できますが、ブラウザのサポートはまだ限られています。または、WebFontConfigのタイムアウト設定に注意してください。

cssコールバック関数

WebFontLoaderは、操作中にクラス名をHTML要素に適用します：

• .wf-loading - すべてのフォントが要求されます
• .wf-active - すべてのフォントが利用可能
• .wf-inactive - フォントをロードできません

クラス名も各フォントに適用されます：

• .wf-<familyname>-<fvd>-loading</fvd></familyname> - シングルフォントが要求されました
• .wf-<familyname>-<fvd>-active</fvd></familyname> - 単一のフォント
で利用できます
• .wf-<familyname>-<fvd>-inactive</fvd></familyname> - 単一のフォントをロードできません

ここで、<familyname></familyname>はフォント名の精製バージョンであり、<fvd></fvd>はi4が400厚の斜体を表すバリアントの説明です。これにより、フォントのダウンロード後にフォントを切り替えることができます。たとえば、Firefoxが行うのと同じように：

<code>body {
    font-family: Ubunutu, sans-serif;
    font-weight: 400;
}</code>

javaScriptコールバック関数

同様のJavaScriptコールバック関数は、WebFontConfigで定義できますが、これはめったに有用ではありません。

詳細については、webfontloaderドキュメントを参照してください。

var WebFontConfig = {
    google: {
        families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
    },
    timeout: 2000
};

(function(){
    var wf = document.createElement("script");
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
})();

最小化

スタイル、厚さ、または間隔の点で代替フォントがWebフォントとは非常に異なる場合、スタイルのないテキストの点滅は厳しい場合があります。ただし、ほんの少しの実験では、代替フォント、厚さ、ラインの高さ、マージンを調整して、Webフォントをロードするときにページ要素がほぼ同じままであることを確認できます。フォントローダーの使用方法 "。

[スイッチフォント]ボタンをクリックして、フォントの切り替え効果を表示します。この変化は完全に解言されていないわけではありませんが、ユーザーが読み始めても、自分の場所を失わないことが重要です。任意のページに「スイッチフォント」ボタンを追加して、適切な代替スタイルを評価するのに役立ちます。

要するに、フォントの使用は無料かもしれませんが、ユーザーのコストを最小限に抑えるようにしてください。 1MBのフォントファイルをロードしている場合、慎重に作成されたレスポンシブWebデザインはモバイルデバイスには適していません！

/* 默认操作系统字体 */
body {
    font-family: arial, sans-serif;
}

/* 字体现在已加载 */
.wf-active body {
    font-family: 'Ubuntu';
}

（以下はFAQパーツであり、元のテキストに基づいて書き換えられ、統合されており、一部のコンテンツは合理化されています）

フォントローダーを使用してWebページのパフォーマンスを向上させることについてのよくある質問

フォントローダーとは何ですか？なぜページのパフォーマンスにとって重要なのですか？

Font Loaderは、ウェブサイトにWebフォントのロード方法を制御できるツールです。 Webサイトの読み込み時間を短縮するのに役立つため、ページのパフォーマンスにとって重要です。 Webページがロードされている場合、ブラウザはフォントを含むすべての必要なリソースをダウンロードする必要があります。フォントが大きい場合または大きい場合、これによりページの読み込み時間が遅くなります。フォントローダーを使用すると、これらのフォントのロード方法と方法を制御できます。これにより、ページのパフォーマンスが大幅に向上する可能性があります。

フォントローダーはどのようにページのパフォーマンスを改善しますか？

フォントローダーは、Webフォントの読み込みを制御できるようにすることでページのパフォーマンスを向上させます。フォントを非同期にロードすることを選択できます。つまり、ページの残りのレンダリングをブロックしません。これにより、ページがインタラクティブになるまでの時間を大幅に短縮できます。さらに、フォントローダーは、Webフォントがまだロードされている間にブラウザが代替フォントを表示する「Unstyled Text Flickering」（Fout）現象を防ぐのに役立ちます。

一般的に使用されるフォントローダーは何ですか？

GoogleのWebFont LoaderやTypeKitのWebFontローダーなど、一般的に使用されるいくつかのフォントローダーが利用可能です。どちらのツールも、Webフォントのロード方法を制御するための複数のオプションを提供します。また、Webサイトにフォントロードを簡単に実装できるWordPressプラグイン（Developly Googleフォントなど）もあります。

私のウェブサイトにフォントローダーを実装する方法は？

ウェブサイトにフォントローダーを実装するには、通常、HTMLにスクリプトを追加する必要があります。このスクリプトはフォントローダーをロードし、フォントローダーのAPIを使用してWebフォントのロード方法を制御できます。正確なプロセスは、使用しているフォントローダーによって異なる場合があるため、特定の命令についてはドキュメントを参照することをお勧めします。

フォントローダーを任意のWebフォントで使用できますか？

フォントがフォントローダーがロードできるようにホストされている限り、

ほとんどのフォントローダーは、任意のWebフォントと互換性があります。これには、GoogleフォントやTypeKitなどのフォントサービスがホストする自己ホストのフォントとフォントが含まれます。

フォントローダーを使用すると、フォントの外観に影響しますか？

フォントローダーを使用すると、フォントの外観に影響を与える可能性があります。ただし、フォントの実際のデザインやスタイルを変更しないでください。フォントローダーを実装した後にフォントの外観に変更があることに気付いた場合、構成の問題が原因である可能性があります。

「Unstyled Text Flashing」（FOUT）とは何ですか？フォントローダーはどのようにそれを防止しますか？

FOUTは、Webフォントがまだロードされているときにブラウザに代替フォントを表示する現象です。これにより、最終的なフォントとは異なるフォントを使用して、短いテキストがちらつき、ユーザーが不快に感じることがあります。フォントローダーは、テキストにWebフォントを適用するときに制御できるようにすることにより、FOUTを防ぎます。たとえば、Webフォントがロードされるまでテキストを非表示にするか、Alternate Fontにテキストを表示して、Webフォントがロードされた後に置き換えることができます。

フォントローダーは私のウェブサイトのSEOを改善できますか？

はい、フォントローダーは、ページの読み込み時間を短縮することにより、ウェブサイトのSEOを改善できます。ページの読み込み時間は、検索エンジンがWebサイトをランキングするときに考慮する要因であるため、SEOを改善する可能性のあるものを減らすために何でもできます。

フォントローダーを使用することの欠点はありますか？

フォントローダーを使用することの潜在的な欠点の1つは、Webサイトコードの複雑さを高める可能性があることです。ただし、ページのパフォーマンスとユーザーエクスペリエンスの改善の利点は、しばしばこの不利な点を上回ります。さらに、多くのフォントローダーには優れたドキュメントとサポートがあり、比較的簡単に実装できます。

フォントローダーが私のページのパフォーマンスを改善しているかどうかを判断する方法は？

さまざまなツールを使用して、フォントローダーを実装する前後にページのパフォーマンスを測定できます。これらのツールは、ページの読み込み時間、最初のドロータイム、インタラクティブな時間などのメトリックを提供できます。これにより、フォントローダーの影響を定量化できます。一般的に使用されるパフォーマンス測定ツールには、GoogleのLighthouseとWebPagetestが含まれます。

以上がフォントローダーでページのパフォーマンスを改善する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。