概要 使わなくてもいいのに、安易にCDNを使っていませんか? 快適な表示のためにはCDNを使わない選択肢も必要ですよ。

20150306-FontawesomeのMaxCDNからのロード速度-03

画像出典:Font Awesome, the iconic font and CSS toolkit


皆さん、Webフォントの「Font Awesome」使っていますか?

様々なアイコンが入っていて便利ですね。

Bootstrap標準のWebフォントは使用していますが、Font Awesomeも最近よく使用しています。


Font Awesomeの便利なところは、CDNが用意されていて(MaxCDN)、1行を<head>タグ内に追加すればすぐに使えるところ。

以下の1行だけ追加するだけです。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

簡単!

これだけで519のアイコン(2015年3月6日現在)が使用できます。

MaxCDNさん、ありがとう!



●何か引っかかりを感じる…ので計測してみた

こんなに簡単に使えてウェブ制作では大変便利で感謝しまくりですが、使い始めると何か表示に引っかかりを感じるようになりました。

同じようなサイトを作っていても、手抜きをしたサイトと、きちんと作ったサイトでは引っかかり具合が違うなと感じたのです。


手抜きをしたサイトは先程のMaxCDNの1行を書いただけというもので、きちんと作ったサイトは、Font Awesomeのファイルをダウンロードして、使っているサーバーにCSSやフォントファイルをアップロードして、使っているサーバーから読み出すように作ったものです。


MaxCDNは世界中で使用されているCDNなので十分に早いのでしょうけれども、念のため速度を調べてみることにしました。



調べ方はFirefoxでFirebugのパネルを開き、Font AwesomeのCSSファイルのロード時間完了を調べるというもの。アナログです(笑)。

20150306-FontawesomeのMaxCDNからのロード速度-02

それを10回計測して平均を取ります。ステータスで「304 Not Modified」を返されると、意味がないので、毎回スーパーリロードして計測します。


MaxCDNから読み出すCSSファイルのアドレスは以下のアドレスです。

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

私が使っている国内のサーバー(SSL接続・https)からは、Font AwesomeからダウンロードしたCSSファイルを置き、同様に読み出します。



●読み出し完了時間の計測結果

それでは計測結果です。


MaxCDN 国内サーバー
1回目 386 ms 272 ms
2回目 527 ms 198 ms
3回目 421 ms 225 ms
4回目 386 ms 195 ms
5回目 527 ms 201 ms
6回目 507 ms 198 ms
7回目 396 ms 356 ms
8回目 370 ms 312 ms
9回目 371 ms 198 ms
10回目 411 ms 195 ms
平均430 ms 235 ms


結果として200ms(0.2秒)程度の違いが出ました。

国内のサーバーから読み出すと1.8倍速いことに。


この計測はFont AwesomeのCSSファイルだけです。

このCSSファイルが読み出された後、更に数倍のファイルサイズのフォントファイルも呼び出されるので、差は大きくなり、体感でも気付けるぐらいの違いになってしまうようです。



●まとめ

サーバーによっては、MaxCDNの方からロードすると、表示まで時間が掛かる場合がある。

※もちろん国内のサーバーがすべて早いわけではない


ウェブ制作者側の立場に立てば、CDNを使用して、簡単に作業できること(=コストを下げられること)・サーバーの負荷を考えなくても良いこと(=コストを下げられること)はとても良いことです。

閲覧する側の立場に立てば、スパッと素早く表示されることはストレスを感じさせず、大切なことです。


ウェブは閲覧者に見てもらって、使ってもらうことで意味のあるものになります。

制作者側のコスト意識も重要ですが、安易にCDNを選択するのではなく、可能な限り、閲覧者側に寄り添って、より高速に表示できる方法を選択した方が良いでしょう。


それでは、よいWebフォントライフを。



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索