【Webサイト】サイトの高速化（WebフォントはadobeではなくてGoogleがお勧め）

　
びっくり！

結論

WebフォントはadobeではなくてGoogleの方がいいと思う。

経緯

昨日の記事で
Adobe Edge フォントはキャッシュ期間がたったの10分しかなく、
仕方ないからCDN利用をやめてローカルにリソースを配置するかー
って言ってたんだけど。

調べてみたらGoogleでもWebフォントを公開していて、色々違う。

読み込み速度

これは同じくらい。
でもファイルサイズがぜんぜん違う

フォント生成方法

AdobeフォントはJSから生成

　
GoogleFontはwoff形式を使っている

woffはオープンソフトウェア用のフォーマットのため、Adobeでは使っていないのかな。

TrueTypeやOpenTypeは、ご存じAppleやAdobe、Microsoftが開発したフォーマットであり、それと比べてWOFFは新しいフォーマットで基本的にオープンソースであるため、同じくオープンソース開発であるFirefoxなどにとったら大変扱いやすいのも利点の1つです。

http://blog.petitboys.com/archives/woff.html

　
AdobeFontは字体をインライン画像で取り込んでいる

キャッシュ期間

これがぜんぜん違う。

GoogleFontのCSSは1日

　
AdobeFontは10分

　
woffは1年

それぞれのキャッシュ活用期間をまとめてみると。。
AdobeFont
Fontを定義するJS　　　　　　　10分
Fontデータ（インライン画像）　１日

GoogleFont
Fontを定義するCSS　　　　　　 １日
Fontデータ（woff形式）　　　　 1年

　
キャッシュの期間調整はどちらも方法がなさそう。
Adobe・Googleのガイドには書いてない。
https://developers.google.com/fonts/faq
　

テスト結果

■変更前
webpagetest サイトではキャッシュしていないことを怒られてた↓

　
■変更後

あれ？キャッシュ期間が定義されないって書いてある。

　
調べてみると、Cache-Controlがprivateに設定されている。
ブラウザにはキャッシュされるけど、Proxyサーバーにはキャッシュされないということ。

色々調べてみたけれど理由は分からず。
Fontのデータくらい共有キャッシュを使ってもいいと思うんだけどな？？

■変更前

↓

HTTPリクエストが減ったおかげで、
DocumentCompleteの時間が大幅に削減されている。

Adobeではjsファイルでの読み込みだったから、
スクリプト解釈に大きく時間が使われていたけれど、その部分がなくなっている
（「ココの空白」のところ）

　
おまけ

リクエストは纏めること

そもそもこうやって2リクエストに分散して書いてるのも良くなかったね。。

<script src="http://use.edgefonts.net/rammetto-one:n4.js" type="text/javascript"></script>
<script src="http://use.edgefonts.net/concert-one:n4.js" type="text/javascript"></script>

Adobeフォントでも、こうやってまとめて書けるよ。

<script src="//use.edgefonts.net/abel;abril-fatface.js"></script>