Weblasts

Adobeフォントとgoogleフォントでどれぐらい違うのかテストしてみた

少し興味があったので簡単にではありますが、2つのwebフォントを使って速さの比較をしてみました。

コードを貼るのは不味そうなので貼ってありませんが、デモ用にかんたんなページは用意してあります。

比較するためのルール

フォントはどちらからでも使える『RocknRoll One』というものを利用して比較をします

同じサーバー内の同じ階層のディレクトリにほとんど同じコードでアップロードしました

フォントを読み込む部分のコードは同じにはできないので違いはそこだけ

adobeフォントの結果

adobeフォントを使って作ったページ

PageSpeed Insightsのスコア
adobeフォントのスコア adobeフォントのスコア2

Adobeフォントの方はPageSpeed Insightsで100点という最高のスコアを出しました。

少し気になる点は更新をかけた時に一旦デフォルトのフォントで表示されているのがはっきり見えるところぐらいです

googleフォントの結果

googleフォントを使って作ったページ

PageSpeed Insightsのスコア
googleフォントのスコア googleフォントのスコア2

googleフォントの方はPageSpeedInsightsで88点というスコアを出しました。

こちらの方は更新をかけた時にデフォルトのフォントで表示されてるのは全く見えないです

すごい簡素なHTMLですが、PageSpeedInsightsで12点の差が出たのは驚きです。

が、Adobeのフォントは一瞬デフォルトのフォントがちらつくのは気持ちが悪くもあります。

個人的にはgoogleフォントのほうがいいかなとは思いますが、Adobeのフォントを使って単価を上げる人もいると思うのでそうしたい人にはいい結果になったのではないでしょうか

もう少し別の要因も追加して、webフォントを使わなかったケースを追加したりして、さらなる調査が必要ですね