Bloggerには、ユーザが作成したCSSやJavascriptなどの静的なファイルをアップロードする機能はありません。公開されているテンプレートを見てみても、CSSやJavascriptなどのコードをテンプレートに直接記述している場合が殆どです。
しかし、テンプレートにすべて記述してしまうと、ブログがすべて表示されるまでに時間がかかってしまったり、キャッシュが効かなかったりと不都合な部分がでてきてしまいます。
そこで、CSSやJavascriptを別のサービスに保存して、使用するようにしてみます。
以前、以下の記事をこのブログに投稿しました。
GoogleドライブにBloggerで使う外部CSSをホスティングさせてみる
http://blogger.weblix.net/2013/02/google-drive-css-hosting.html
CSSやJavascriptを外部化する時にベストなサービス 追記
http://blogger.weblix.net/2012/07/css-js-externalize-service.html
これらの記事を投稿した時点では、「外部化しないほうが早い。そのままでいい。」という結論に至ったのですが、状況がかなり変わってきたのでもう一度考察してみたいと思います。
今回は、この選択肢以外のGithubを試してみたいと思います。
Githubで外部ファイルをホスティングする
今流行りのGithubには、Github PagesというWEBサイトを公開できるサービスが存在します。このサービスを使って、Bloggerで利用するCSSやJavascriptを外部化してみたいと思います。
Github Pagesの登録方法や、使い方などは、以前に公開した記事にまとめてありますので、そちらを参照して下さい。
Github Pagesでウェブサイトを構築する方法
http://blogger.weblix.net/2014/01/github-pages-create-web-site.html
この記事通りに進んでいくとWEBサイトを公開できる段階までたどり着くことができるはずです。
後は、index.htmlを公開したときと同様に*.cssや*.jsなどの外部化したいファイルを同じフォルダ内に放り込んでPublishすれば準備は完了です。http://自分のアカウント名.github.io/main.css という感じでファイルにアクセスすることができると思います。
このブログの場合は、Github Pagesに独自ドメインを割り当てて利用しています。
上記のリンクがこのブログの外部CSSへのURLとなります。
肝心のレスポンスは？
肝心のレスポンスを調べてみた結果を表にまとめてみます。測定内容は、Google Chromeのデベロッパツール(キャッシュOFF)を使った場合の読み込み時間と、Pingdomを利用して測定した場合の読み込み時間を計測します。
それぞれ10回測定し、平均値を出します。測定対象は、GithubPagesでホスティングしている以下のファイルとします。
では、実際に速度を測ってみます。
Google Chrome Developer Tool (Cache OFF)
41ms, 9ms, 8ms, 10ms, 10ms, 8ms, 7ms, 9ms, 9ms, 12ms
平均値: 12.3ms
Website Speed Test : Pingdom
平均値: 225ms
※内部的に複数回の計測値を平均した値が表示されるので平均値のみ。
考察
GoogleChromeデベロッパツールの値は、恐らくDNSキャッシュが効いてる状態での値なので純粋なダウンロード速度が結果として現れています。
反対にPingdomの場合は、名前解決からダウンロード完了までの時間なので、本番環境に近い値が測定されていると思われます。
どちらの場合も、前回測定した外部ホスティングサービスよりも遥かに高速なので十分実用に耐えると考えられます。
まとめ
今回の測定結果を見る限り、Bloggerで外部ファイルを無料でホスティングするならGithubでほぼ決まりという結果が出ました。
しかも、Github Pagesには、デフォルトでキャッシュヘッダ（10分間）が発行される上に、gzipまでサポートしているので至れり尽くせりとなっているのもグッドです。
みなさんも自分のテンプレートにあるCSSを外部化してみてはいかがでしょうか？最後まで読んでいただきありがとうございました。