Webサイトにアクセスした時にWebフォントの読み込みが遅いと表示が崩れますが、
Webフォントの読み込みが遅い原因は3つあります。
ではWebフォントの読み込みが遅くなる原因と対処法について詳しく見ていましょう。
Webフォントの読み込みが遅い原因①
Webサイトにアクセスした時にWebフォントの読み込みが遅い原因の1つとして
考えられるのが「日本語フォントのデータが重い」ことです。
日本語は平仮名と片仮名でそれぞれざっと70文字、漢字に至っては数千文字あります。
アルファベットは大文字小文字合わせて50文字ほどですから、
日本語のWebサイトでは圧倒的に使用する文字数が多くなっています。
全てとは言わずとも常用の文字を網羅するだけでも、
Webフォントのデータサイズが1MBを超えてしまうこともあるのです。
データサイズが大きいほど読み込みには時間がかかるので、
日本語のWebサイトはWebフォントの読み込みが遅くなってしまうわけです。
Webフォントの読み込みが遅い原因②
Webフォントの読み込みが遅い原因としてもう1つ「Webサイトを公開する環境が
良くない」ことが考えられます。
Webサイトはサイトデータをサーバーに保存、
そのサーバーに閲覧者がアクセスすることでWebサイトを閲覧できます。
サイトデータを保存しているサーバーの処理速度が遅いため、
アクセスした時にWebフォントの読み込みが遅くなるわけです。
一般的にWebサイトにアクセスした時にサーバーは「HTML→CSSやJavaScript→
画像→Webフォントを含むその他のデータ」の順に処理します。
要するにWebフォントの処理は後回しになっているので、
全体の処理が遅いとWebフォントの読み込みも遅くなるというわけです。
Webフォントの読み込みが遅い原因③
Webフォントの読み込みが遅い原因としてもう1つ考えられるのが
「Webフォント以外のデータが大きすぎる」ことです。
先にも書いたように、
一般的にはWebサイトにアクセスするとWebフォントの読み込みは後回しとなります。
Webフォントよりも先に処理されるデータの量やサイズが大きいと、
Webフォントの読み込みに時間がかかってしまうのです。
卑近な例で言うと、食事の用意と食事を早く済ませると
皿洗いなどの後片付けも早く終わらせることができます。
ところが用意が遅れたり食事に時間をかけると、
後片付けをするのが後ろにズレて遅くなってしまうといった感じです。
画面に動きをつけるJavaScriptや画像のデータが大きすぎると、
その処理に時間がかかるのでWebフォントの読み込みが遅くなってしまうわけです。
Webフォントの読み込みが遅い場合の対処法
Webフォントの読み込みが遅いとWebサイトの表示が崩れて見にくくなるため、
閲覧者にすぐ離脱される恐れがあります。
そこでWebフォントの読み込みが遅くならないようにする対処法をいくつか紹介します。
対処法の1つ目は「サーバー環境の見直し」です。
Webフォントの読み込みが遅いのにはサーバーの処理速度も大きく関係しているので、
サーバー環境に問題が無いかチェックするのです。
サーバーの転送量が公開しているWebサイトのサイズに合っているかをチェックします。
合っていない場合は、
レンタルサーバーだと転送量が無制限など大きいプランへ変更してください。
自作サーバーだと、
サーバーとして使っているパソコンやハードディスクをより高性能なものに替えましょう。
サーバーの処理能力が原因でWebフォントの読み込みが遅くなっているなら、
サーバーを増強することで改善されるはずです。
JavaScriptや画像のデータを整理・縮小する
Webフォントの読み込みが遅くならない対処法2つ目は
「JavaScriptや画像のデータの整理・縮小」です。
先にも書きましたが、Webサイトにアクセスした時には全てのデータが
同時に読み込まれるのではなく決まった順番で読み込まれます。
Webフォントが読み込まれる順番はJavaScriptや画像よりも後で、JavaScriptや
画像の読み込みに時間がかかるとWebフォントの読み込みも遅くなります。
Webフォントよりも先に読み込まれるデータの容量を小さくすれば、
Webフォントの読み込みの遅さも改善されるというわけです。
HTMLやCSSはWebサイトの骨格部分なので触るのが難しいかもしれませんが、
装飾部分のJavaScriptや画像は容量の縮小してもWebサイトへの影響が小さいです。
例えばWebサイトで使う画像は形式をPNGからJPEGに変換するだけで
容量を圧縮できます。
PNGもJPEGも圧縮の仕方は同じですが、
JPEGの方が圧縮率が高いので同じ画質でもより容量を小さくできるのです。
グレースケールなど色の少ない画像ならPNGで良いですが、カラフルな画像は
JPEGにした方がWebフォントの読み込み時間短縮に役立ってくれます。
ただしJPEGは保存を繰り返すと画質が劣化しますし、イラストのように色がハッキリ
分かれている画像では色同士の境界線がぼやけることがあるので注意が必要です。
ちなみに画像の変換や圧縮はPhotoshopなどの画像編集ソフトで簡単にできますし、
無料ソフトでも問題ありません。
またWordPressを使ってWebサイトで制作する場合は、
画像最適化プラグインを使うと自動で画像サイズを最適化してくれます。
画像の形式をPNGやJPEGではなくWebPにする方法もあります。
WebPはGoogleが開発したWebサイト用の画像形式で、
高画質なのに容量が小さいのが大きな特徴です。
IEなど既に開発が終了しているブラウザは除いて、
現状で利用されているほとんどのブラウザに対応しています。
WebPに変換できるツールが現状ではそれほど多くありませんが、
変換に手間がかかるほどではありません。
JavaScriptの圧縮
Webサイトに動きをつけるJavaScriptも圧縮可能ですが、
こちらはコード自体を圧縮する必要があります。
実際にJavaScriptのコードを見ると、余計な空白や改行、コメントが多数含まれています。
JavaScriptのコードを作る時には空白やコメントなどがあることで読みやすく
分かりやすいのですが、完成して公開すると余計なものとなってしまうのです。
Webサイトで使用しているJavaScriptの規模が小さいなら余計な空白などを
1つ1つ手作業で削除できますが、規模が大きくなると手作業では大変です。
JavaScriptの規模が大きい場合は、自動的に余計な空白などを
検出・削除してくれるJavaScriptの圧縮ツールを使いましょう。
JavaScriptが圧縮できればWebフォントの読み込みが速くなるだけでなく、
Webサイト全体の読み込みが速くなります。
サイト全体の読み込みが遅いほど閲覧者の途中離脱が増えるので、
サイトを詳しく閲覧してもらうのにもJavaScriptの圧縮は有効です。
またサーバーへの負担も軽くなるため、
サーバー障害やサーバーダウンによるWebサイトの信用低下リスクも軽減できます。
最新のWebフォントのファイルフォーマットを使う
Webサイトを制作する際、Webフォントはファイルフォーマットが最新のものを
使うようにすることでWebフォントの読み込みが遅くなることが防げます。
Webフォントのファイルフォーマットは新しいほど容量が小さく、
効率的に読み込めるようになっているのです。
古いフォーマットのファイルよりも最新のファイルフォーマットを優先表示するように
CSSで指定しておきましょう。
Webフォントを先に読み込ませるようにする
Webサイトにアクセスした時のWebフォントの読み込み順位を速くするコードを
追加するのも1つの方法です。
通常はWebサイトにアクセスすると、ブラウザがサイト内にWebフォントが必要な
テキストなどの要素を見つけてからWebフォントの読み込みが始まります。
テキストなどの要素を探すことが優先されているので、
JavaScriptや画像よりもWebフォントの読み込み順位が遅いわけです。
Webサイトアクセス時に最初に読み込まれるHTMLでWebフォントを
先に読み込むように指定しておくと、Webフォントの読み込みが速くなります。
HTMLの最初に「」を付けておきます。
ちなみに（）内の「フォントファイルの属性値」と「フォントファイルパス」には、
Webサイトで使っているWebフォントに適合したものをそれぞれ入れてください。
次にCSSの頭にも
@font-face ｛
font-family:’フォントの名前’;
src: url（’フォントファイルのパス’） format（’フォントファイルの形式’）;
｝
と付け加えればOK。
HTMLでWebフォントを早く読み込むように指示して、
CSSでどのWebフォントを読み込むのかを指示するわけです。
Webフォントを早く読み込むコードを加えることで、
テキストなどの要素を探す前にWebフォントの読み込みが始まります。
先にWebフォントが読み込まれるので、
Webサイトにアクセスした時に一瞬表示が崩れるといったことが無くなるわけです。
まとめ
Webフォントの読み込みが遅い原因や対処法を紹介しましたが、そもそも文字数の多い日本語フォントはどうしても重くなりがちです。
ただWebフォントの読み込みが遅くて表示が崩れると途中離脱が増えてしまい、
SEO対策的にも不利となります。
まずは自サイトでWebフォントの読み込みが遅い原因を見極めて、
その原因に応じた対処をおこなうようにしてください。