Webアプリを創る

Google Page Speed を使ってみた

2011年7月16日

以前から、この Web サイトのレスポンスはあまり良くないと思っていましたが、Google ウェブマスター ツールの「サイトのパフォーマンス」で読み込み時間が4秒を超えるようになったので、これではいけないと思って Google Page Speed を使ってみました。Google Page Speed は、Web ページのパフォーマンスを評価して、ウェブページの読み込み時間を短縮するためのヒントを与えてくれるツールです。Page Speed には、FireFox 版と Chrome 版があります。今回は、FireFox 版を使いました。FireFox 版は、FireFox のアドインなので、インストールは簡単にできます。まず、Firebug 上で動作するので、Firebug アドインをインストールしていなければインストールしておきます。また、オンライン版の Page Speed である Page Speed Online もあるので、アドインをインストールしたくない場合は Page Speed Online を利用することもでき、Web ページの URL を入力するだけで、パフォーマンスの解析をしてくれます。

Page Speed をインストールして、Firebug を起動させると、下の図のように Firebug のツールバーに Page Speed のメニューが追加で表示されるようになります。

image

Page Speed を実行すると、下の図のように、改善の提案が表示され、「赤丸」が少ない努力で大きく改善できる可能性がある項目を、「黄色の三角」が作業量が多いか大きな効果が得られない項目を、「緑色のチェック」が大きな効果が得られない項目であることを表します。

image

この Web サイトを Page Speed でチェックしたら、多くのページで「赤丸」に該当した項目は、以下の2項目だったので、この項目を提案のように変更することにしました。

・ブラウザーのキャッシュを有効にする

キャッシュの有効期間を設定する必要がありますが、IIS 7.x では、IIS マネージャーで設定をすることができます。IIS の「HTTP 応答ヘッダー」で、「共通ヘッダーの設定」をクリックすると以下のような設定画面が表示されるので、失効までの期間を Google のアドバイスに合わせて 10 日以上にしてやります。この設定で注意しないといけないのは、このサイトでは Umbraco CMS を使っていますが、Web サイトに有効期限を設定することはできるのですが、画像を保存してあるフォルダーに有効期限を設定するとエラーが発生してしまいます。 原因については、よくわからないので時間ができたら調べようと思っています。
image

・圧縮を有効にする

IIS 7.x では、「動的なコンテンツの圧縮モジュール」は、既定ではインストールされていません。IIS には、「動的圧縮を使用すると、プロセッサーの使用が増加しサーバーの全体的なパフォーマンスが低下する可能性があります。」という警告があるので、有効にするかどうか一瞬迷うのですが、タスクマネージャーや EC2 の Monitoring でみるとコンピュータの使用率はそれほど高くないので有効にすることにしました。負荷が高くなっている場合を除いて大抵の場合は有効にした方がいいように思います。EC2 の場合は、帯域幅に課金がされるので、利用料を削減する効果もあります。「動的なコンテンツの圧縮モジュール」をインストールするには、コントロールパネルの「Windows の機能の有効化または無効化」で、下の図のように「動的コンテンツの圧縮」の機能を有効にしてやります。モジュールがインストールには、かなり時間がかかりますが、インストールが完了すれば、IIS マネージャで、設定をしたい web サイトを選択して、センターパネルで IIS の「圧縮」を選択して、「動的なコンテンツの圧縮を有効にする」にチェックをいれれば設定が完了です。
image

この設定した効果は、以下の図のようになりました。ページの読み込み時間は 2.2 秒になり、以前より約 2 秒短縮することができました。実は、この設定と併せて、サーバーを Amazon EC2 の東京リージョンに移動させたので、それによる効果が半分ぐらい入っています。しかし、階段状になっている 3 段のうち最初の2つはこの設定の効果だと思われるので、設定の方もかなりの効果があったと思っています。

image

ホームページ・ビルダーと Umbraco

2011年7月3日

ホームページ・ビルダーを最近使う機会がありました。ホームページ・ビルダーについては、HTML のソースが汚い等の批判があります。しかし、売れているだけあって、Web ページのデザインを簡単にできる便利なツールであることは間違いありません。ホームページ・ビルダーを使っていて、Umbraco を使えば、作成した Web サイトを簡単に CMS 化ができそうに思ったので、実際に Umbraco による CMS 化をしてみました。

ホームページ・ビルダー 15 に付属している「フルCSSプロフェッショナルテンプレート」のうちの1つを使用して、Umbraco で CMS 化したサイトが、こちらhttp://home2.pp22.net/ です。メニューについては、XSLT のマクロを利用して自動で表示できるようにし、アクティブなメニューについては、背景色を明るくしています。また、URL Rewrite を利用して、http://home2.pp22.net/itemlist.html とアクセスしてきた場合には、http://home2.pp22.net/itemlist/ に Redirect するようにしています。勿論、Redirect でなく Rewrite にすれば、.html の拡張子のついた URL のままでも運用することもできます。

この程度までであれば、1日もあれば作業はできてしまいます。あと、「お問い合わせフォーム」や「商品紹介」等のパッケージを作っておけば、静的 Web ページを比較的簡単に CMS 化できそうです。

WebMatrix (IIS Express)で公開サーバーの訂正について

2011年7月2日

WebMatrix (IIS Express)で公開サーバーのメモについて、管理者権限が必要になるな場合が間違っているとの指摘がありましたので訂正しました。ご指摘ありがとうございました。

この訂正作業していて、Windows XP + IIS Express で Webサーバーを構築するのもいいのかなと思うようになっています。Web サーバーは、アクセス数が少なければそれほどサーバーの能力を必要としません。Windows XP の PC であれば、どこにでもころがっていて手軽に使えます。もちろん、アクセス数が多くなれば、Windows Server を利用するようにした方がいいのですが、Windows Server を使う必要があるぐらいまでアクセス数を増加させるには、それなりの時間がかかります。自分自身でも、Windows 7 で自宅サーバーを利用して、いろいろなことを手軽にできたというのはよかったと思っています。現在でも、新しく作成している Web サイトでは自宅サーバーを利用しているし、これからも利用していく予定です。レスポンスの良さという面では自宅サーバーは非常に優れています。

このサイトは、Amazon EC2 の東京リージョンのサーバーを利用するようにしました。レスポンスが少しよくなったと思います。安定した運用をする場合には、自宅サーバーでも結構コストがかかるので、サーバーを借りて手間を省けるようにしています。

海外サーバーは遅い?表示速度を測定してみた

2011年6月27日

海外サーバーは機能面やコスト面で優れていますが、日本で利用する場合には伝送遅延の問題があります。実はこのサイト Amazon EC2 のUS East のサーバーを使っているのですが、Google ウェブマスター ツールの「サイトのパフォーマンス」の結果では、「サイト内のページの平均読み込み時間は 4.2 秒です。 全体の 67% にあたるサイトよりも遅い読み込み時間です。」となっており、読み込み時間をもう少し速くしたいと思っています。そこで、Amazon EC2 の US East リージョンと東京リージョンに、このWeb ページと同じサイトを作成して、表示速度にどれぐらいの差があるか調べてみました。

測定ツールとしては最初にローカルのパソコン用のツールである Google の Speed Tracer を使ってみました。Speed Tracer は、Google Chromeのエクステンションで Dev Channel バージョンにインストールします。Speed Tracer を使うと下の図のように、上部にはグラフで処理の重さが表示されます。また、Network を選択すると、アイコン付きのファイル名が左側に表示されて、右側にそのロードタイムが横棒で表示されます。この図を見ると、どの処理に時間がかかっているかもよくわかります。

image

測定については、/personal-site/ のページを10回測定し、その平均としました。読み取り時間の測定結果は、以下のようになりました。

  • 東京リージョン:1.2秒
  • US East リージョン:1.8秒

次に、サイトの表示スピードを測定することができる Webサイトである WebPagetest.org を利用して読み取り時間を測定してみました。WebPagetest は、もともとは AOL が開発したソフトで、なかなか優れものです。

image

Speed Tracer の場合と同じく、/personal-site/ のページを10回測定しその平均としました。測定地点については約30カ所が選択できますが、US East リージョンに近いデフォルトのダレス(Dulles, VA USA)をまず選択しました。読み取り時間の測定結果は、以下のようになり、US East リージョンが4割以上速いという結果になりました。

  • 東京リージョン:First View 4.2秒 Repeat View 3.0秒
  • US East リージョン:First View 2.5秒 Repeat View 1.7秒

WebPagetest.org では測定地点に東京を選択することができるので、次に東京を選択して測定してみました。測定結果は以下のようになり、今回は東京リージョンが2割速いという結果になりました。

  • 東京リージョン:First View 5.6秒 Repeat View 3.0秒
  • US East リージョン:First View 7.0秒 Repeat View 3.7秒

この結果からみると伝送遅延の問題は確かにあるということです。 Amazon EC2 の場合には、東京リージョンを使うとコスト的には2割ぐらい高くなりますが、レスポンスは2割以上速くなります。結局、処理が重くで表示が単純な場合であれば海外サーバーを利用するのが有利で、一方、画像、CSS、JavaScript のファイル数の多い場合には遅延が大きくなるので国内サーバーを使った方がいいということになります。結論としては、月並みな内容になってしまいました。

Umbraco と ASP.NET MVC

2011年5月31日

Umbraco の次期バージョンである Umbraco 5 では、全面的にソースが書き換えられて ASP.NET MVC 3 ベースになるということもあって、最近は ASP.NET MVC 3 を使って Web ページを作成していました。実際に使ってみて ASP.NET MVC もかなり使いやすくなっていることを実感しています。この日曜日から久しぶりに Umbraco のことを調べていると Umbraco v5 Wiki というページが公開されているのに気がついて、Umbraco 5 の公開が近づいてきたと実感できるようになりました。

安定版が出るまでには少し時間が必要だと思うので、ASP.NET MVC で作成したアプリケーションを Umbraco 4.7 に組み込むいい方法がないか探していると、MvcBridge という Razor MVC PartialViews を Umbraco に組み込むことができるパッケージを見つけました。最近公開されたばかりだが一度試してみようと思っています。

話が変わるのですが、最近、Umbraco に関する初めての本である 「Umbraco User’s Guide」 が発売されました。早速、Amazon で注文しました。後で気がついたのですが、発行元の Wrox だと PDF の E-Book も売っていました。それだとダウンロードして直ぐに見ることができました。Umbraco のマニュアルに関しては、Umbraco.tv がいいと思うのですが自分の英語力だと説明についていけないので、本も貴重だなと思っています。