現在も、そしておそらくこれからも画像ファイルがWebページの表示を重くする一番の要因です。一方である調査によると、Webフォントは「平均的なWebページ全体の重さの3%以上」を占めるそうです。
このWebフォントの重さが占める割合はWebページ全体の小さな部分ですが、最適化の対応をすることでよりロード時間を短くすることが可能です。
本稿ではWebフォントのロード速度を上げる方法をご紹介します。
Googleフォントの特徴
まず、GoogleフォントとはWebで利用できる800以上のフォントを有するオープンソースディレクトリーで、ローカルにダウンロードして印刷その他にも利用することができます。何百万ものWordPressWebサイトがGoogleフォントを利用しており、サイトの見た目と利便性を向上させています。
純粋にパフォーマンスのみを考える場合は、システムフォントを利用するのが一番ですが、プロフェッショナリズムと美的観点を重要視するならGoogleフォントをお勧めします。実際、タイポグラフィーはコンバージョンによい効果をもたらすという調査結果もありますが、同時に利用する際はGoogleフォントを使うことでサイトの表示スピードとパフォーマンスにどれだけ影響が出るかを理解しておくことが重要です。
WordPressでGoogleフォントを利用する方法
いくつか方法はありますが、最も一般的なのは、Googleから直接取得する方法です。この方法は、Googleの世界中に設置されている様々なGoogleサーバーから素早くフォントをCDN(コンテンツ・デリバリー・ネットワーク)を利用して取得します。
CDNをサイトに追加すると、fonts.googleapis.comにリクエストすることになります。
また、ブラウザーサポートによりWOFFもしくはWOFF2をfonts.gstatic.comにリクエストします。
フォント追加プラグインを利用する方法
もしWordPress初心者の場合、GoogleフォントをWebサイトに追加する最も簡単な方法は、フリーのプラグインを利用することです。その中でも、”Eash Google Fonts” がお勧めです。現在、30万インストールを記録し、ユーザーの5段階評価で4.9の評価を獲得しています。
Googleフォントの埋め込みコードを追加する方法
WordPressプラグインは少し余計なものまで追加してしまうので、埋め込みコードを利用してGoogleフォントを利用するのが好きです。Googleフォントで好きなフォントなら”Roboto”を選択して使います。
Customizeオプションをクリックします。それぞれのフォントは異なる重さなので、このステップは重要です。
次に、Embedオプションをクリックします。ここでコピーしたい埋め込みコードを取得します。
取得したコードをWordPressの<head>セクションに追加します。このやり方はいくつかあり、フォントをキューに入れる方法もありますが、ここではシンプルにheader.phpにコードを追加する方法をご紹介しています。どの方法を選択するかは利用しているテーマに依存します。
(参考:https://gist.github.com/bgardner/4381352)
あと、WordPressでGoogleフォントを利用するためにいくつかのCSSスタイルを追加します。以下に実際に利用している例を示します。もし利用しているテーマアドミンパネルにカスタムCSSのエディター機能がない場合は、Custom CSSとJSのようなフリーのプラグインを利用できます。
(参考リンク: https://wordpress.org/plugins/custom-css-js/)
body {font-family:roboto; font-size:18px;} | |
h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;} | |
h1 {font-size:28px;} | |
h2 {font-size:26px;} | |
h3 {font-size:24px;} | |
h4 {font-size:20px;} | |
h5 {font-size:18px;} | |
h6 {font-size:16px;} |
Googleフォントのスピードを計測してみたところ、平均スピードは418ミリ秒でした。それぞれのテストは5回実施し、その平均を取りました。
Googleフォントを自分のホスト環境に置く方法
他に、Googleフォントをホスト環境に置く方法があります。Webサイトのユーザーが特定の場所に位置し、Webサーバーにも近い場合、Googleサーバーからダウンロードするよりもホスト環境上に置く方が速くなるでしょう。GoogleフォントのCDNは素晴らしいですが、追加の外部リクエストやDNSルックアップでいくらかの遅延が生じてしまいます。
この方法は速いホスト環境を利用している場合にのみ有効です。例えば、Google Cloudプラットフォームを利用しているKinstaのマネージドWordPressホスティングサービスを利用しています。
ホスト環境にGoogleフォントを置くのにgoogle-webfonts-helperというフリーツールを利用することもできます。このツールを使うことで、Googleフォントをより簡単にダウンロードでき、必要なCSSも提供してくれます。以下の図でその例を示します。
Webサーバーからダウンロードしたフォントをアップロードする必要があります。以下の例では、”fonts”フォルダーにフォントをセットしています。
/* roboto-regular - latin */ | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Roboto'), local('Roboto-Regular'), | |
url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ | |
url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ | |
} | |
/* roboto-500 - latin */ | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
src: local('Roboto Medium'), local('Roboto-Medium'), | |
url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ | |
url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ | |
} | |
/* roboto-700 - latin */ | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 700; | |
src: local('Roboto Bold'), local('Roboto-Bold'), | |
url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ | |
url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ | |
} |
外部コールをやめるために、headerの埋め込みコードを削除する必要があります。テストを実施した結果は386ミリ秒でした。
Webサーバーはアイオワ州にあり、スピードテストはテキサス州のダラスから実施しました。サーバーがアメリカのどこにあっても、ホスト環境からGoogleフォントをロードする方が少しだけ速いようです。
CDNでGoogleフォントをホストする方法
サードパーティーのKeyCDNを利用して、イメージ、CSS、JavaScriptなどのアセットをホストすることもできます。GoogleフォントをGoogleのCDNではなく、KeyCDNに置くとどうなるでしょう?
今回はフリーのCDNイネーブラーであるWordPressプラグインを利用しました。このプラグインを使うことで、フォントをWebサーバーの”fonts”フォルダーからKeyCDNにフォントをコピーします。これでフォントへのパスがCDNへ向くことになります。
/* roboto-regular - latin */ | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 400; | |
src: local('Roboto'), local('Roboto-Regular'), | |
url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ | |
url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ | |
} | |
/* roboto-500 - latin */ | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 500; | |
src: local('Roboto Medium'), local('Roboto-Medium'), | |
url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ | |
url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ | |
} | |
/* roboto-700 - latin */ | |
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 700; | |
src: local('Roboto Bold'), local('Roboto-Bold'), | |
url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ | |
url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ | |
} |
この方法でのテスト結果は平均384ミリ秒でした。
CDNを利用した方が少しだけ速いですね。これはCDNが、ホスト環境と同じように、HTTP/2コネクションを使い、外部コールやDNSルックアップを減らているからです。CDNを利用する利点の一つとして、世界のどこでも速いということです。
自身でテストして最適性を確認
以上のテスト結果からわかるように、GoogleフォントCDNは素晴らしいですが、常に最速という訳ではありません。環境やユーザー環境に依存します。
ここでご紹介した方法をご自身の環境でテストし、どの方法がサイトにとって最適かを確認することをお勧めします。
(※本稿は「6 Web Design Style Predictions for 2017」を翻訳・再編集したものです)