【Webサイト】サイトの高速化(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データ(インライン画像) 1日
GoogleFont
Fontを定義するCSS 1日
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>