たきです。
昨日あたりからこのサイトでWebフォントの使用を始めました。iOSの方は軽くしか確認していないのですが、ちゃんと表示されていますかね。
今日はWebフォントを導入しようと思った経緯と、導入したらサイトの読み込みは遅くなるのか、書いていきたいと思います。
導入に至った経緯
iOSのフォントが気に食わない
前にiPhone Xのホームインジケーターが邪魔だという記事を投稿したのですが、今回もiOSがことの発端です(笑)
このサイトではWebフォントを導入する前はメイリオフォントを使用していました。
僕はフォントに関しては正直詳しくないのですが、一つだけ嫌いなフォントがあって、それが明朝体なんですよね。（明朝体ファンに怒られそう）
明朝体って細いし、大人びているというか固いイメージがあるんですよね。なので、僕はメイリオとかゴシックとか柔らかいイメージのフォントが好きなんです。
なのに！iPhoneで自分のサイトを見てみたら明朝体みたいなフォントだったんですよ！
iOSにはメイリオフォントがデフォルトでインストールされていないので、CSSでメイリオフォントを指定しても表示されずに、デフォルトの明朝体らしきフォントで表示されるみたいです。
別にいいじゃんと思うかもしれませんけど、このサイトはiPhoneからのアクセスが圧倒的に多いので、Webフォントを導入することにしました。
画像をあまり使いたくない
Webフォントを導入する前、ヘッダーの「たきぶろぐ」は画像で表示させていました。
このヘッダーなんですが、ややこしい話をすると偽物のヘッダーで、本物のヘッダーは非表示にしているのです。
SEO的にはあまり好ましくないですし、 画像の読み込みにも時間がかかります。これもWebフォントを導入した理由です。
今はちゃんと本物のヘッダーです(笑)
無料Webフォント『Google Fonts』を使うとサイトの読み込みは遅くなるのか
結論から言うと「遅くなる」
Googleが提供する「Test My Site」というサービスがあるのですが、今回はそれを使って導入前後のタイムを計測していきたいと思います。
まず、こちらがWebフォントを導入する前のタイムです。Google的にはサイトの表示タイムが2.5秒以下が好ましいようで、導入前は2.4秒なのでそれをクリアしています。
では、導入後どうなるのか。
はい、4.4秒と約2秒遅くなりました。勿論アウトです。Google Fontsにはデフォルトで「display:swap」という読み込みをなるべく早くさせる工夫がされてはいるのですが、
僕の場合はヘッダーの「たきぶろぐ」と、以外の2つのフォントを使用しているということもあって、読み込み時間が長くなってしまいました。
じゃあヘッダーのフォントは「たきぶろぐ」しか読み込まないようにしてみようではないか。
0.4秒早くなりました()。これでもまだアウトですね...。
このサイトではトップページに3記事表示させていました。文字が多いと読み込みに時間がかかるのではないか、ということで、表示させる記事の数を1つにしてみました。
3.6秒になりました。4.4秒からは大分縮みましたが、2.5秒は相変わらず上回ってしまっています。
無料ブログサービスを利用しているので、広告などが表示されていますが、それを含めても最初の計測時には2.4秒だったので、サイトの表示が遅くなったのはWebフォントが原因だと考えられます。
これ以上軽量化する方法が僕にはわからないので、もうどうしようもないんですけど、意地でも明朝体は使いたくないので、引き続きGoogle Fontsを使っていこうと思います。
