Googleフォントパフォーマンスの最適化

公開: 2020-03-28

優れたウェブサイトのデザインは、見事な画像とフォントで飾られています。残念ながら、これら2つのWeb要素は、多くのWebサイトが煩わしい遅延を示す理由に大きく貢献しています。もちろん、Webフォントだけが、さわやかで予想外の新しいものを提供できます。

しかし、この恐ろしい現象を封じ込める方法があります。 SVGは、開発者が画像レンダリングの課題のいくつかを管理するのを支援しています。また、最も一般的に使用されているWebフォントであるGoogle Fontsの場合、ページのレンダリング時間を改善することは、GoogleFontのパフォーマンスを最適化するために利用できるいくつかのトリックを展開することです。

Googleフォントとは何ですか？

Googleフォントは、ウェブサイトで使用するフォントを構成する、特別に調整されたグリフのコレクションです。これらはインターネット上で使用するように特別に設計されているため、Webフォントという名前が付けられています。

Webフォントの構造は、書き込み用の記号または文字を形成するために特別に配置されたベクトル形状（グリフ）のコレクションとして最もよく説明されます。

2010年に約30フォントでGoogleWebFontsとしてリリースされたGoogleFontsには、現在約170億のフォントがあり、現在、すべてのWebサイトの約57％に電力を供給しています。完全に無料のGoogleFontsは、この記事の執筆時点で毎秒約500,000回の視聴を記録しており、2010年以来37兆回以上の視聴を蓄積しています。

WebサイトでGoogleフォントを使用すると、システムフォントや、ほとんどすべてのオペレーティングシステムにプリインストールされているArialやGeorgiaなどの「Webセーフフォント」に制限されることを回避できます。

Googleフォントを実装する方法

WebサイトでのGoogleFontsの実装は、ユーザーが選択したフォントを参照して、アプリケーションプログラミングインターフェイス（API）を使用して行われます。 Googleが提供するこのAPIは、標準のCSSリンクタグまたはインポートの構文を使用してHTMLドキュメントに埋め込むことができます。以下は、BalooChettan2を実装するためのAPIの例です。

標準のCSSリンクタグを使用する

インポート構文の使用
<style> @import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap'); </style>
以下の例に示すように、HTMLドキュメントで上記のAPIのいずれかを使用すると、CSSドキュメントでフォントファミリを参照して使用できます。

font-family ：'Baloo Chettan 2'、筆記体;

GoogleFontのパフォーマンスを最適化することの重要性

他のWebフォントと同様に、Google Fontsの実装と使用は大したことではありませんが、Webサイトの訪問者にフォントを提供します。ユーザーはデバイスにこれらのフォントを持っていないことを忘れないでください。言い換えれば、彼らがあなたのウェブサイトのコンテンツを見ることができる前に、彼らのブラウザはそれらをダウンロードしなければなりません。

フォントの太さ

各フォントには、Webサイトの待ち時間に悪影響を与えるように設定された重みが付いています。たとえば、GoogleのBalooChettan2フォントの合計サイズは720KBです。つまり、Webサイトで使用可能なすべての言語とバリアントを含むBalooフォントファミリ全体（19）を使用する必要がある場合は、Webサイトの読み込みに約9MBを考慮する必要があります。もちろん、これは理想的ではなく、Webフォントの最適化に近いものではありません。ただし、間違っているということは、Webサイトの訪問者が、Webサイトにテキストが表示されるまで数秒間待たされることを意味します。

フォントフォーマット

これまで、Webで使用されている主要なWebフォント形式は4つあります。それらは、TrueTypeフォント（TTF）、Embedded Open Type（EOT）、Web Open Font Format（WOFF）、およびWeb Open Font Format 2.0（WOFF2）です。

残念ながら、これらの形式はいずれも、すべてのブラウザで機能するユニバーサル形式とは見なされていません。

EOTはIEでのみサポートされています。 ChromeとOperaはほとんどの形式を最もサポートしていますが、すべてのブラウザの約86％がWOFF形式をサポートしています。これには、使用するフォントごとにすべてのフォント形式を含める必要がある場合があります。アイデアは、すべてのブラウザがすべてのフォントを表示できるようにすることで、一貫したエクスペリエンスを提供することです。

これらの問題は、Googleフォントのパフォーマンスを最適化することが非常に重要である多くの理由の一部です。

GoogleFontのパフォーマンスを最適化する

Google Fontの最適化は、Font APIの配置とリクエストの形式から始まり、レンダリングに至るまで続きます。 Googleフォントを最適化するための簡単なコツを次に示します。

GoogleFontリソースをプリロードする

新しいWebプラットフォーム機能である<link rel="preload">を使用することを強くお勧めします。これにより、Webフォントを事前にロードできます。この機能を使用すると、デフォルトのブラウザの動作をバイパスできます。これは通常、リソースリンクにアクセスする前に、必要なフォントリソースを知るために最初にレンダリングツリーを構築することにより、テキストのレンダリングを遅らせます。

<link rel="preload">は通常、HTMLの<head>タグに含まれており、CSSOMの作成を待たずに、フォントの要求を十分に早くトリガーします。この機能は、Webフォントがどのように使用されるかについての情報を提供せずに、Webフォントがすぐに必要になるという事前情報をブラウザに提供するだけです。

また、プリロード機能と一緒に適切なCSS @ font-face定義を使用して、リソースURLの使用方法をブラウザーに通知することをお勧めします。次のポイントの例を参照してください。

注：すべてのブラウザが<link rel =” preload”>をサポートしているわけではありません。それをサポートしていないブラウザは、コードを無視するだけです。ただし、この機能は、優先フォントのリモートコピーがある場合に、無駄な要求を行うことがあります。

複数のフォントに対して1つのリクエストを使用する

Googleフォントを最適化するためのもう1つの良い方法は、複数のフォントリクエストを1つのタグに結合することです。フォントごとに個別の<link>タグを含めないでください。これにより、複数のリクエストが異なるバッチで送信されます。フォントリクエストを組み合わせるには、APIのフォントを|で区切るだけです。キャラクター。ただし、これは、GoogleFontページで必要なすべてのフォントを一度に選択するだけでも実現できます。

不正なフォントリクエスト形式：

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"

rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"

rel="stylesheet">
推奨されるフォントリクエストの形式：
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"

rel="stylesheet">
複数のフォントリクエストを1つのタグに結合することで、サーバーへの複数回のアクセスからブラウザーを節約し、ドメインごとに一度に最大2つの接続を持つ古いブラウザーを支援します。

すべてのブラウザに最適化されたフォント形式

特定のフォント形式をサポートしていないブラウザは、それを無視して、レンダリングツリーの次のステップにジャンプします。また、一貫したエクスペリエンスを提供するには、CSS@font-face宣言にすべてのフォント形式を含める必要があります。

ただし、重量を減らすことができます。フォントを表す個々のグラフは、GZIPなどの互換性のあるコンプレッサーを使用して圧縮できる同様の情報で構成されています。 TTFおよびEOT形式はデフォルトで圧縮されていますが、両方のフォント形式を配信するときにサーバーが圧縮を適用するように構成されていることを確認する必要があります。

WOFFに最適な圧縮設定を使用します。これには圧縮が組み込まれており、カスタムの前処理および圧縮アルゴリズムを使用して、ファイルサイズを最大30％削減したWOFF2を提供します。

CSS@font-face宣言の例
@font-face { font-family: 'Baloo Chettan 2'; font-style: normal; font-weight: 600; src: local('Baloo Chettan 2'), url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */ url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */ url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */ url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */

注：src：はいくつかのリソースバリアントを指しますが、url（）を使用すると外部フォントをロードでき、local（）を使用するとローカルでフォントを入手できます。 format（）は、特定のURLのフォント形式を示します。

srcリストでlocal（）を優先します

このGoogleフォント最適化のアイデアは、デフォルトのシステムフォントを参照していない限り、携帯電話ユーザーには実際には当てはまらないかもしれませんが、Webフォントを最適化するための効果的なトリックです。

上記のCSS@font-face宣言の例を見ると、local（）がsrc：記述子のリソースバリアントのコンマ区切りリストの一番上にあることがわかります。この優先順位付けは意図的なものであり、ローカルで利用できない場合はダウンロードする前に、ユーザーのブラウザをローカルでフォントの最初のソースに送信することを目的としています。

これにより、ブラウザがユーザーのコンピュータにローカルにインストールされているフォントをダウンロードしなくなり、Webサイトのパフォーマンスが向上します。

フォントレンダリングのカスタマイズ：CSSフォント表示

@ font-faceのfont-display記述子を使用してフォントのパフォーマンスを制御すると、ダウンロードにかかる時間に基づいて、GoogleFontsのレンダリング方法を決定できます。元々、Webブラウザーには、フォントのロードに時間がかかりすぎる場合の処理に関するデフォルト設定があります。それらのほとんどは、フォールバックフォントを使用する後にタイムアウトを設定しますが、残念ながら、タイムアウト期間は異なります。

ChromeとFirefoxは、Webフォントの準備ができていない場合、3秒後にフォールバックフォントを使用し、ダウンロードするとすぐにテキストを目的のフォントに交換します。 Internet Explorerはゼロ秒で同じことを行いますが、Safariにはフォントレンダリングのタイムアウト動作がありません。

新しく導入されたfont- displayプロパティは、現在5つの値の範囲をサポートしています。 ブロック| スワップ| フォールバック| オプション

特定の書体でテキストをレンダリングすることが非常に重要な場合は、プロパティをブロック値に設定する必要があります。これは、ブラウザが準備ができていないときに優先フォント面の代わりに無敵のテキストを使用し、ダウンロードが完了するとすぐにそれらを交換できるようにするためです。ほとんどのブラウザは、この値をデフォルト（ auto ）値として使用します。

スワップは、優先フォントフェースの準備ができるまで一時的なフォントフェースをレンダリングする余裕がある場合に使用できます。スワップはブロックに似ていますが、ページの読み込みが開始されるとすぐにフォールバックフォントがレンダリングされ、準備ができ次第、優先する書体に置き換えられます。この値には、無限のスワップ期間とゼロ秒のブロック期間があります。

スワップ値は、テキストを移動することによって読者のエクスペリエンスを途中で中断しないように、本文テキストには理想的ではありません。これは、フォールバックを使用して会社の名前やスローガンをすばやく表示する必要があるが、最終的にはブランディングの目的で公式の書体が必要になるロゴテキストに使用できます。

例：スワップに設定されたfont-displayプロパティ
@font-face { font-family : 'Baloo Chettan 2'; font-style : normal; font-weight : 600; font- display : swap src : local('Baloo Chettan 2'), url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */ url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */ url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */ url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */ url('/fonts/awesome.svg') format('svg'); /* modern web browsers */
スワップ値は、HTMLドキュメントでGoogleフォントをリンクする方法を示すために使用されるコードの最初の行（Google Font API）に実装されていることがわかります。

フォールバックはスワップに似ていますが、スワップ期間が限られています。優先フォント面が設定された期間（通常は0秒）内に読み込まれない場合、テキストはページの残りの期間、フォールバックフォントを維持します。これは本文テキストの良い候補です。テキストをできるだけ速くレンダリングし、誰かが読み始めるまでにテキストをシフトしません。

オプションの値はフォールバックのレプリカですが、ユーザーのネットワーク速度を考慮して、ブラウザーがWebフォントのダウンロードを開始するかどうかを決定できます。接続が弱すぎる状況では、ブラウザはリクエストを制限し、Webフォントをダウンロードするリクエストを送信しないことで、最も必要なリソースに優先順位を付ける必要があります。

フォントファミリーとバリアントを制限する

各フォントファミリとバリアントはページの重みに寄与するため、Googleフォント最適化プロセスの一部には、これら2つの要素の制限を含める必要があります。

ほとんどの専門家は、最大2つのフォントファミリを使用することをお勧めします。見出しとコンテンツ。これは論理的であり、Webフォントを活用してデザインを改善しながら安全にプレイできます。

イタリック、レギュラー、ボールドなどのいくつかのバリエーションが利用できるからといって、ダウンロードにそれらを含めるための「選択肢」があるとは限りません。ダウンロードを必要な正確なバリアントに切り詰め、多すぎないようにします。完全なバリアントをダウンロードするのは無駄です。なぜなら、そこから1つの単語だけを使用したいからです。これは、GoogleFontsの次の最適化のトリックが役立つところです。

テキストパラメータを使用する

textパラメータは、知っておく必要のあるGoogleフォント最適化の最高のトリックの1つであり、驚くべきことに、ほとんどの開発者はそれを使用していません。このパラメータを使用すると、必要な文字のみをロードできます。

次の例のように、会社名にフォント面の2文字のみを使用するとします。文字CとNに異なるフォントを使用しました。

会社名

フォント面全体ではなく、これら2文字のみをロードするように要求できます。フォントURLには、次のような追加のパラメータが含まれます。

https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN

Google Fontのパフォーマンスを最適化するこの方法は非常に効果的であり、フォントの太さの最大90％を削減できます。

結論は

Googleフォントの最適化は、ウェブサイトの全体的なパフォーマンスを向上させるための重要な戦略です。

タイポグラフィの優れたデザインは別として、アクセシビリティと読みやすさは常に焦点を当てるべき主要な要素です。フォントのパフォーマンスを向上させるための上記の方法はすべて、フォントの太さを縮小し、Webフォントにできるだけ早くアクセスし、ユーザーネットワークが不安定な場合に有効な形式/代替フォントをレンダリングすることに重点を置いています。

これらの方法のいずれかを試したことがあるかどうか、およびこの記事に記載されていないWebフォントの最適化プロセスについてお知らせください。