Web サイトでは、優れたタイポグラフィがコンバージョンを増加させる可能性があります。 最適なフォントを選択して最適化することが重要です。 Google Fonts はよくデザインされており、標準的な Web サイトに優雅さを加えることができるため、人気のあるサービスです。 残念ながら、適切に使用しないと、インターネット上の他のものと同様に、Web サイトのパフォーマンスが低下する可能性があります。 この記事では、WordPress での Google フォントの動作を改善するための 5 つの提案を見ていきます。
Google フォントと WordPress サイトのパフォーマンス
Google フォントディレクトリにある 1300 を超える無料のフォント ファミリを、誰でも自分の Web サイトや印刷物に使用できます。 何百万もの WordPress サイトで使用されていますが、Web サイトのデザインを改善する優れた方法です。 その中でもユニークなデザインがきっと見つかるはずです。 通常、WordPress Web サイトは、Google の CDN からダウンロードして Google フォントを追加します。 これは、フォントとスタイルシートがユーザーに最も近いサーバーに保存されることを意味します。 システム フォントは、インターネットからダウンロードしてコンピュータにインストールした Google フォントよりも高速です。 Web サイトに出入りするトラフィックの量は、読み込み速度に影響します。 ウェブサイトのパフォーマンスは、大きなファイルよりも Google フォントの読み込み時間による影響が少なくなります。 結局のところ、フォントは画像よりもはるかに小さいです。 ただし、ユーザーがサイトにアクセスしようとするたびに、アクセスできないため時間が失われます。 サイトの読み込み速度を上げるには、Google フォントを最適化する価値があります。
WordPress で Google フォントを使用する場合、パフォーマンスを向上させる方法はいくつかあります。
使用するフォントを減らす
少数のフォントのみを使用することをお勧めします。 最良の結果を得るには、2 つのペアのフォント セットを使用する必要があります。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始めるフォント ファミリとは、フォントについて話すときの意味です。 フォントの種類について話すときは、主なフォントについて話すことがよくあります。 ただし、イタリック体、太さの異なるフォント、数字と記号のフォント、イタリック体のフォントなど、さまざまなフォントがあります。 それらは「グリフ」と呼ばれます。
細い、軽い、中程度、やや太字、太字、超太字など、さまざまなフォントの太さを利用できます。 これらはそれぞれ異なるフォント ファミリーに属しています。 さらに、各ウェイトには斜体があり、フォントの数が 2 倍になります。 そのフォント ファミリを使用すると、そのバリアントもすべて読み込まれます。 結局のところ、それはたくさんあります。
たとえば、Roboto は現在 Web サイトで人気のフォントです。 このファミリには 12 セットのフォントがあり、それぞれに 282 個のグリフがあります。 これは、使用したいフォント拡張機能の数に、1 つのフォント ファミリの 3,384 個のグリフを掛けた値に等しくなります。 Roboto Condensed と Roboto Slab が追加されると、Web サイトで使用されるフォントの数が急増することが容易にわかります。 複数のフォント ファミリを使用すると、何万ものフォントが使用される場合があります。
WordPress サーバーで Google フォントをホストする
Google フォントをダウンロードして、WordPress サーバーにホストすることができます。 したがって、ユーザーは Web サイト自体と同じ場所から Web サイトのタイポグラフィを取得します。 Web サイトはフォント ファイルを別の場所から取得する必要がないため、ユーザーの読み込みが速くなります。 Google Fonts の Web サイトでフォントを選択すると、そのフォントをダウンロードできます。 フォント ファミリーをダウンロードしたら、FTP を使用して content/uploads フォルダーにアップロードします。 ページの「head」セクションで使用する場合は、サードパーティのフォント ホストへの参照を含めないでください。 代わりに、スタイルシートの URL/fonts/FONT FILE NAME.file-extension への参照を含めます。
これを覚えておいて、必要なフォントと太さだけをロードしてください。 使用可能なすべてのイタリックとウェイトを使用しないでください。 フォントごとに、TTF、EOT、WOFF、および WOFF2 形式を使用します。
Google フォントのプリロード
通常、Google の CDN は Google フォントのダウンロードに使用されます。 このサーバーは高速ですが、通常、Web サイトの読み込みが完了した後にフォントがダウンロードされます。
接続に問題があり、フォントをダウンロードできない場合は、ページにシステム フォントが表示されます。 フォントがダウンロードされた後、ページは再レンダリングされます。 簡単に言えば、あるフォントを読み込んだ後、ページは別のフォントに切り替わります。 スタイルのないテキスト「flash」がこれです (FOUT)。 これを行うよりも、待機することをお勧めします。 それでも、それは素晴らしいことではありません。 フォントのプリロードは、これを処理する 1 つの方法です。 さらに、Google フォントをプリロードすると、ロード プロセスが約 100 ミリ秒高速化されます。 これは、Google Fonts CSS ファイルが DNS、TCP、および TLS と同時に読み込まれるためです。 プリロードするには、スタイルシートでプリロード リンクを事前に接続して使用する必要があります。 フォント ファミリーとスタイルシートは、HTML を使用して Web サイトの「head」セクションに読み込まれます。
CDN Planetは、事前接続を含む次の HTML のサンプルを提供します。
<head>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3344545b4773000303">[email protected]</a>&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c5d5dac6f2858282">[email protected]</a>&display=swap'>
</head>上記の例の Roboto とすべてのフォント オプションを、使用するフォントとオプションに変更します。
WordPress プラグインで Google フォントを最適化する
WordPress 関連のタスクの大部分は、Google フォントの最適化など、プラグインによって大幅に促進されます。 コードを配置する場所について心配する必要はありません。ソフトウェア側の処理が行われるからです。
Google フォントを拡張できる優れたプラグインが多数あります。 OMGF | Host Google Fonts Locallyは、私が特に興味を持っている機能の 1 つです。これは、既に使用している Google Fonts をより効果的にするために特別に作成されたものです。 他の多くのプラグインと同様に、この Google Fonts プラグインには無料バージョンとプレミアム バージョンの両方があります。 無料版のすべての設定は手動で、難しい場合があります。 しかし、それらを設定することはそれほど難しくありません。
これと他のものとの主な違いは、誰でも使用できる無料版に最適化を含めることで、単にフォントを使いやすくするだけではないということです。 この種のほとんどのプラグインのプレミアム バージョンは、最適化を提供する唯一のものです。 それでも、最良の結果を得るにはプレミアム バージョンを使用することをお勧めします。 無料版には十分な最適化が行われています。
Google フォントをローカルでホストでき、プラグインはフォントをキャッシュします。 ローカル フォントは、ヘッダー内のエンキューされたフォントに自動的に置き換えられます。 スクロールせずに見える範囲のフォントをプリロードすることで、特定のフォントやスタイルシートが読み込まれないようにすることができます。
検出設定では、フォントを追加または削除できます。 これは、再設計後に特に役立つため、ユーザーが決して見ることのない古いリソースをロードすることはありません。
さらに、自宅をきれいにしている場合は、[詳細設定] でフォント キャッシュのディレクトリを選択できます。
Google Fonts と Divi モジュールの統合を使用する
600 すべてのテキストベースの Divi モジュールは、Google フォントを使用します。これは、 Divi テーマと Divi プラグインの両方で利用でき、最高のパフォーマンスとデザインのために最適化されています。 本文と各見出しのサイズを個別に、フォント ファミリー、太さ、およびスタイルを選択し、サイズ、色、行の高さ、間隔、および影を変更します。 特定のデバイス用に変更することもできます。
Google Fonts のキャッシュ バージョンは、モジュールが必要とするフォントのみを読み込むために使用されます。 これにより、ブラウザが不要なフォント バリエーションをロードするのを防ぎます。
Divi テーマ オプションの [全般] > [パフォーマンス] タブには、Google フォントの設定がいくつかあります。 どちらもデフォルトでオンになっています。 したがって、Divi を使用していて、これがテーマで処理されるものであることに気付いていなかった場合は、すでに処理されていることになります。
Google フォントのアップグレード ローディングは、Google フォントをキャッシュし、インラインでロードして、ページの読み込みを高速化し、ページのレンダリングをブロックするリクエストを削減します。 その下に「従来のブラウザでの Google フォントのサポートを制限する」というラベルの付いたオプションがあります。 読み込み時間を短縮するために、この機能は Google フォントのサイズを縮小します。 欠点は、すべての古いブラウザーが Google フォントをサポートしているわけではないことです。
まとめ
Google Fonts がすでに Web サイトである程度使用されている可能性があります。 しかし、Google Fonts が WordPress で動作する方法を改善するためのこれらの 5 つの提案に従うと、違いに気付くと思います. 小さくても最適化が不十分な Google フォントは、ユーザー エクスペリエンスを損ない、ウェブサイトの読み込み速度を遅くする可能性があります。 Google フォントを手動で最適化する方法はいくつかありますが、代わりに OMGF などのプラグインを使用することをお勧めします。 もちろん、Divi は、あらゆる種類のフォントを管理および最適化するための優れた選択肢です。
