読者です 読者をやめる 読者になる 読者になる

せかいや

いまいるここを、おもしろく http://sekai-in-the-box.appspot.com/

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

 
びっくり!

結論

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


 

経緯

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

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

 

読み込み速度

これは同じくらい。
でもファイルサイズがぜんぜん違う
f:id:sekaiya:20131019081657j:plain

 

フォント生成方法

AdobeフォントはJSから生成
f:id:sekaiya:20131019082002j:plain

 
GoogleFontはwoff形式を使っている
f:id:sekaiya:20131019082011j:plain





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

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

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

 
AdobeFontは字体をインライン画像で取り込んでいる
f:id:sekaiya:20131019081726j:plain


キャッシュ期間

これがぜんぜん違う。

GoogleFontのCSSは1日
f:id:sekaiya:20131019082628j:plain


 
AdobeFontは10分
f:id:sekaiya:20131019082631j:plain


 
woffは1年
f:id:sekaiya:20131019084709j:plain



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

GoogleFont
Fontを定義するCSS       1日
Fontデータ(woff形式)     1年


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

テスト結果

■変更前
webpagetest サイトではキャッシュしていないことを怒られてた↓
f:id:sekaiya:20131019085834j:plain

 
■変更後
f:id:sekaiya:20131019101853j:plain
あれ?キャッシュ期間が定義されないって書いてある。


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

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


■変更前
f:id:sekaiya:20131019102325j:plain

f:id:sekaiya:20131019102123j:plain

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>