自分でサーバなどを用意してWordpressなどでブログを運営する際にはあまり問題になりませんが、Bloggerなどの各種ブログサービスを利用する時に問題になるのが、CSSやJavascriptなどの外部化です。
別に外部化を行わなくても問題はありませんが、SEOやキャッシュ効果を狙うのであれば必要になってくる要素だと思います。
またここで悩むのが、どのサービスに外部化したCSSを置くか？です。このとき要求される要素としては、下記の2点が最重要となります。
- 高速なレスポンスと転送速度
- 安定したシステム
特に「高速なレスポンスと転送速度」が重要で、CSSの読み込みが完了するまでブラウザはページのレンダリングをブロックするので、表示完了までの時間が長くなってしまいます。
今回は「高速なレスポンスと転送速度」をメインにサービスを探してみたいと思います。
- GoogleAppEngine
- Dropbox
- Gist
- [2012/08/06 追加] GoogleSites
- Blogger(外部CSS化なし)
今回は上記3つのサービスと分割しないパターンを順に見ていきます。
測定方法は、同じ容量のCSSファイルをダウンロードした際に、Google Chrome のデベロッパツールの「Network」タブから読み込み時間を計測します。
測定結果
| 測定回数 | GoogleAppEngine | Dropbox | Gist | GoogleSites | Blogger(外部CSS化なし) |
|---|---|---|---|---|---|
| 1 | 378 | 367 | 215 | 235 | 174 |
| 2 | 300 | 409 | 186 | 243 | 175 |
| 3 | 312 | 322 | 198 | 398 | 173 |
| 4 | 261 | 377 | 198 | 308 | 174 |
| 5 | 378 | 434 | 188 | 237 | 187 |
| 平均 | 250.2 | 381.8 | 197 | 284.2 | 176.6 |
GoogleAppEngineの結果を見ると決して早いとはいえない速度ですね。最大で約380msのレンダリングブロックが発生するのは問題です。
Dropboxは同期機能が優秀なのですが、速度を見ると最大で約450msのブロックが発生するのはかなり問題がありそうです。
Gistはほかのサービスに比べてかなり早いのですが、色々調べてみるとCotent-Typeをすべて"text/plain"で送信してくるので、外部CSS置き場としては使用することができませんでした。非常に残念です。
[2012/08/06 追記] 外部CSSの読み込みタグが間違っていたようで、Gistでも問題なく読み込むことができました。今回比較したサービスの中では最速ですね。
[2012/08/06 追記] GoogleSitesはどうか？というコメントがありましたので、速度を見てみたところ、かなり不安定な印象を受けました。Content-Typeも"text/plain"になったり"text/css"になったりで微妙な感じです。
かなり驚いたのが外部CSS化なしのパターンで、HTMLを含んだ全データの読み込み時間がほかのサービスよりも高速な点です。データとしてすこし変な気がするので時間があれば再測定したいと思います。
結局どのサービスを利用する？
今回計測した3つのサービスを見てみると約280msほどの応答速度なので、少し悩んでしまう感じでした。
外部化を行わないほうがパフォーマンスがよいという結果となっているため、SEO的な要素よりも速度のほうが重要と感じたので、外部CSS化は諦めました。
どうしても利用したい場合は、GoogleAppEngineが良さそうですね。しかし転送量などの縛りがあるので、最終的にはDropboxのみになってしまいそうです。
結果として、外部ファイルを保存する場合は、Gistに置いておくのが一番ですね。
このほかに、良いサービスがあったらコメントなどで教えていただけるとうれしいです。