Webフォント最適化

Webフォントは、良いデザイン、ブランディング、読みやすさとアクセシビリティを持つことができます.また、彼らは、検索可能な、ズーム可能な高DPIテキストをもたらすだろう.しかし、あらゆる利点で貿易オフになります.
その他の部分
Part 1 on HTML and CSS
Part 2 use Preload/Prefetch to boost load time
Part 3 JavaScript tips and tricks
Part 4 Image optimisation

イントロ

人々は、それが全体的なページ・スピードでどれくらいの影響を与えるかについて理解することなく、最近、重くウェブフォントを使います.
これは、あなたがそれらを使用すべきではない、という事実だけでは、最適化されたフォントを使用する方法を知っている必要がありますし、負荷をどのようにページロードに影響を減らすためにロードする.
Webフォントの最適化は、フォントをホストする場所、Webアプリケーションのデザインとバックエンドサーバー、技術的な能力、そしてあなたの会社がこれにどのように投資しているかに依存します.しかし、これは私が通過するテクニックに従うことから、あなたを保持しないでください、全体的なページの負荷に少しでも改善は、より良いユーザーエクスペリエンスに向かってカウントされます.

あなたが使用しているどのように多くのフォントを見つける

タスクを起動する前に、フォントを使用して、ウェブサイト全体を使用する必要があります.あなたは簡単にChrome DevToolsのネットワークタブの監査タブを使用して、HTTPの要求を見て、これを見つけることができます.
フィルタアイコンのタブをクリックすると、ファイル拡張子のように見えるwoff , woff2 , tff , otf など

どのように多くの

ウェブページの平均67 %の研究ショーは、カスタムフォントを使用します.
あなたが使っているフォントの数を一度考えれば、どのフォントを使うべきかについて考えるべきです.通常、これらの決定は、UXやデザインチームによって駆動されますが、間違いなく彼らとの言葉を持つことができます.
あなたが何人が多すぎるかについて考えているならば、親指の規則はそれですthree is crowd and two is the best to stick to .
あなたのウェブサイトを通してより少ないフォントを使うならば、ネットワーク要求の数だけは減少します、しかし、デザインもより合理化されて、一貫しています.

必要なサブセットを選択

複数の言語をサポートする国際的なウェブサイトを持っていない限り、すべての文字セットを使用することは意味をなさない.必要なものだけを選択し、使用する言語を選択します.
ilya grigorik開発者支持者とウェブperfグルは、Googleで.explains how you can subset or split web fonts into multiple unicode ranges to deliver only what you need .
あなたはUnicode-range descriptor 範囲値のリストを指定するには、3つの異なる形式で設定できます.

シングルCodePoint :単一の文字を示します.

間隔範囲:文字列の範囲の開始点と符号位置を示します.

ワイルドカード範囲:? 文字は16進数を示します.

可能性を示すために、これはどのように分割することができますFont Awesome ラテン語と日本語のサブセットに.一度行うと、ブラウザが必要に応じて各サブセットをダウンロードします.
注意:Unicode範囲のサブセットは、グリフの数が西洋の言語よりはるかに大きいアジア言語にとって特に重要です、そして、典型的な「完全な」フォントは数十キロバイトの代わりにメガバイトでしばしば測定されます.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
    url('/fonts/awesome-l.woff2') format('woff2'),
    url('/fonts/awesome-l.woff') format('woff'),
    url('/fonts/awesome-l.ttf') format('truetype'),
    url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
    url('/fonts/awesome-jp.woff2') format('woff2'),
    url('/fonts/awesome-jp.woff') format('woff'),
    url('/fonts/awesome-jp.ttf') format('truetype'),
    url('/fonts/awesome-jp.eot') format('embedded-opentype');
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}

注意:local() ディレクティブを使用すると、参照、読み込み、ローカルインストールフォントを使用できます.The url() ディレクティブを使用すると、外部フォントを読み込むことができますformat() 指定されたURLで参照されるフォントの形式を示すヒント.
現在、すべてのブラウザではないがキャッチされますsupport unicode-range . 幸いにも主要なブラウザーのほとんどは、それをサポートし、フォールバックオプションを持っている必要があります.
今、どのサブセットがどのように私が必要とするかを決める方法を尋ねているなら、答えは以下の通りです.

ブラウザがUnicode範囲をサポートしている場合、自動的に右のサブセットを選択します.サブセットファイルを提供し、適切な範囲を指定する必要があります@font-face 規則

ブラウザがこの機能をサポートしていない場合、必要なサブセットを手動で指定する必要があります.

オープンソースツールを使用してサブセットを生成できますpyftsubset tool . それに加えて、いくつかのフォントサービスは、カスタムクエリパラメータを介して手動でのサブセットを許可します.
あなたがサブセットから離れて活用することができますいくつかの他の機会があります.あなたのページのタイトルを表示するには、Googleのフォントが必要だとしましょう.このフォントからダウンロードする文字を指定できます&text= 文法

<link
  href="//fonts.googleapis.com/css?family=Roboto&text=log"
  rel="stylesheet"
/>

警告:これは単語セレクタではなく文字セレクタであるので注意する必要があります.これはl , o , and g Robotoに表示されます.

最適化フォントフォーマットを提供する

Web上で使用される主要な4つの形式があります.

埋め込まれたオープンタイプ(EOT):マイクロソフトはこの形式を設計しました.

真のTypeフォント(TTF):部分的なIEのサポートを持って1980年代後半以来されている形式です.

Webオープンフォント形式(WOT):2009年に開発された形式は、本質的にOpenTypeまたはTrueType圧縮と追加のメタデータです.それは広範なサポートを楽しんでいますが、古いブラウザでは利用できません.

Webオープンフォント形式(WOF2 2):平均的に、ファイルサイズの30 %削減を提供するWOFFの改善.サポートはまだ多くのブラウザの進行中の仕事です.

すべてのブラウザで動作する1つの形式は、したがって、一貫性のある経験を提供するために複数の形式を提供する必要があります.Google開発者のウェブサイトから:

Woff 2.0バリアントをサポートするブラウザに提供します.

ブラウザの大半にwoff variantを提供します.

古いAndroid(以下4.4)ブラウザにTTFのバリアントを提供します.

古いIE ( IE 9以下)ブラウザにEOTバリアントを提供する.

あなたのユーザーの大部分が現代のウェブブラウザを使用するならば、ちょうど2つの形式を指定することで得ることができます:

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), local('Roboto'),
    url(fonts/Roboto.woff2) format('woff2');
}

常にフォントをチェックする

一部のユーザーは既にフォントをシステムにインストールしているかもしれないので、フォントをダウンロードすることを余儀なくされます.あなたが優先順位を与えることを確認することで、これを防ぐことができますlocal() にsrc フォントの顔のルールの属性.
上記のサンプルノートではsrc: local はurl .

ローディングとレンダリングの最適化

デフォルトで、フォントは怠惰にロードされます.そして、それはレンダリング木が完全に造られるまで、ネットワーク要求が遅れることを意味します.
カスタムフォントのローディング戦略を実装する必要があるフックは3つあります.

<link rel=preload>

CSSfont-display プロパティ

フォント読み込みAPI

プリロードあなたのWebフォント

フォントがページで使用される可能性が高い場合は、プラットフォーム機能を使用してフォントを読み込むことができます.<link rel=preload> .
これは、フォントが初期にフェッチされるべきであることをブラウザに伝えますが、それを使う方法を指定しません.適切なCSSを指定する必要があります@font-face :

<link
  rel="preload"
  href="/fonts/Roboto.woff2"
  as="font"
/>

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  /* will be preloaded */
  src: local('Awesome Font'),
    url('/fonts/awesome-l.woff2') format('woff2'),
    url('/fonts/awesome-l.woff') format('woff'),
    url('/fonts/awesome-l.ttf') format('truetype'),
    url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

警告:すべてのブラウザがこの機能をサポートしているわけではありませんが、Woffit 2をサポートしている人もサポートしていますので、その形式を使用してください.
他の解決法の詳細についてはthis great post .

概要

要するに、Webフォントを最適化するときに考慮すべき点です.

あなたのフォント使用を監査して、モニターしてください.

サブセットフォントリソース.

各ブラウザに最適化されたフォント形式を提供します.

優先するlocal() あなたのsrc リスト.

フォントの読み込みとレンダリングをカスタマイズ<link rel="preload"> , font-display , またはフォント読み込みAPI.

再検証と最適キャッシュポリシーの指定

これはあなたのWebアプリケーションのパフォーマンスを向上させるために正しい方向に1つ以上のステップを移動することができます願っています.