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/fontawesome-free@5.6.3/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の読込速度比較

Official0.6716秒
jsDelivr0.1490秒
VALUE SERVER0.1295秒
mixhost0.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/fontawesome-free@5.6.3/css/solid.min.css');

FontAwesome solid.cssの読込速度比較

Official0.4507秒
jsDelivr0.0995秒
VALUE SERVER0.1265秒
mixhost0.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/fontawesome-free@5.6.3/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サービスのほうが信頼できそうですよね…。

つい昨日、VALUE-SERVERでうちのサイトがほんの数分間とはいえ接続不能状態になったのを体験して、やっぱり格安だしなぁ、と思ったのでした。CORE SERVERへの乗り換えを検討してみようかしら(懲りてない)

うーん、低価格サーバーばかり使っているぼくはやっぱりCDNは積極的に使っていく方針で行きます(*´ω`*)