FontAwesomeの読み込み速度を公式サイトとCDNサービスで比較してみた
「FontAwesomeを4から5にしてハマった話」で書いたとおり、最近FontAwesomeを使い始めたばかりの新参者ですが、色を変えるたびにアイコンを作り変える必要もなく、統一感もあるためさっそく気に入って使いまくっております。
そこで前回「JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話」でjsDelivrの速度が予想外に早かったことに驚いたため、これはいっちょFontAwesomeの読み込み速度も比較してみようか、とそんなわけです。
FontAwesomeのall.cssの速度比較
比較用のコード
こんな感じで前回の記事と同じPHPスクリプトを使います。
<?php
checkLoadTime('Official', 'https://use.fontawesome.com/releases/v5.6.3/css/all.css');
checkLoadTime('jsDelivr', 'https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css');
function checkLoadTime($title, $url, $max = 5) {
$total_time = 0;
for ($i = 0; $i < $max; $i++) {
$start_time = microtime(true);
file_get_contents($url);
$total_time += (microtime(true) - $start_time);
}
//試行回数の平均値を表示
echo '<span style="display:inline-block;width:120px;">'.$title.'</span>';
echo number_format($total_time / $max, 4).'秒<br>';
}
?>
FontAwesome all.cssの読込速度比較
| Official | 0.6716秒 |
| jsDelivr | 0.1490秒 |
バリューサーバー
 | 0.1295秒 |
mixhost
 | 0.1347秒 |
おぉぉ、やっぱり本家よりjsDelivrのほうが早い……！
………けど、jQueryのときと違ってレンタルサーバー上に置いたほうが早いみたいですね。
ちなみに計測した時間帯は朝方です。時間帯はもちろんのこと、プロバイダーによっても結果は異なってくるでしょう。
FontAwesomeのsolid.cssの速度比較
恐らく傾向は同じでしょうけれど、solid.cssでもテスト。
比較用のコード
関数は省略しますが、呼び出し部分をこんなふうに変えた感じ。
checkLoadTime('Official', 'https://use.fontawesome.com/releases/v5.6.3/css/solid.css');
checkLoadTime('jsDelivr', 'https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/solid.min.css');FontAwesome solid.cssの読込速度比較
| Official | 0.4507秒 |
| jsDelivr | 0.0995秒 |
| バリューサーバー
| 0.1265秒 |
| mixhost
| 0.0961秒 |
solid.cssのほうでもやはり本家FontAwesomeよりもjsDelivrのほうが早いですが、格安レンタルサーバーでもそんなに変わらないですね。
うーん、この程度の違いだったら同じサーバー上にCSS置いたほうが良いかなぁ。
特にmixhost
はWebサーバーにLiteSpeedを使っているからなのか、安いわりに早いサーバーなので自分とこに置いたほうが良いかも知れませんね。
まとめ
- jQueryだけではなくFontAwesomeでも公式CDNよりjsDelivr CDNのほうが早かった
- ……が、格安レンタルサーバーでも読み込み速度はさほど変わらないかも
CDNにしておくと、FontAwesomeがバージョンアップしたときに読み込み部分のURLを変えるだけで済むというのはありがたいです。ダウンロードして解凍してアップロードするだけのことではありますけど、たくさんのサイトを管理しているとそれもなかなかの手間ですしね。
ちなみにバージョン管理についてはjsDelivrがVersion aliasingという面白い機能を持っていて、こんな書き方が出来ます。
■FontAwesome 5.6.3を直指定(通常)
https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/solid.min.css■FontAwesome 5系の最新を使用(Version aliasing)
https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/solid.min.cssつまり、後者の書き方ならFontAwesome5.6.3が5.6.4または5.7にバージョンアップした場合、自動的にcssもそれに変わるという仕組みです。マイナーバージョンであれば基本的にバグ修正だろうから、自動アップデートでいいじゃん、という主旨です。
…が、オープンソースのものってけっこう、その、マイナーバージョンアップ程度で被害甚大になったりしますよね。ぼくはちょっと怖くてこの自動アップデートの仕組みは利用しづらいかなぁ(；´Д｀)
それから、CDNを利用するもうひとつのメリットとして、利用者側のブラウザにキャッシュされている確率が上がることも外せません。
特にFontAwesomeについては公式のCDNが遅いとはいえ、実際の利用状況ではキャッシュされていることが多いでしょうから、ここまでの差は出ないと思います。
ホントはCDNのメリット・デメリットとして分けて書くつもりでしたが、デメリットって自サイトが動いているのにCDNが落ちた場合…くらいしか思いつきません。
本気の商用サイトなら別ですが、個人レベルの運営サイトだと格安レンタルサーバーを使っていることも多いでしょうし、正直なところ月数百円のレンタルサーバーよりはCDNサービスのほうが信頼できそうですよね…。
つい昨日、バリューサーバー
でうちのサイトがほんの数分間とはいえ接続不能状態になったのを体験して、やっぱり格安だしなぁ、と思ったのでした。CORE SERVERへの乗り換えを検討してみようかしら（懲りてない）
うーん、低価格サーバーばかり使っているぼくはやっぱりCDNは積極的に使っていく方針で行きます(*´ω｀*)
