[Windows Azure Web Sites][WordPress] HTTP Expires ヘッダーを追加して高速化
Windows Azure – 技術者でつなぐ日めくりカレンダー の 3/1 の記事です。Windows Azure の国内データセンターができたようです。ちなみに、このサイトは今のところ日本でない東アジアのデータセンターにあります。
HTTP Expires ヘッダーの追加
YSlow などの Web サイトの速度を計測したときに、Azure Web Sites で設置した WordPress の場合、「Add Expires headers」とう項目のスコアが低いのでこれを改善しましょうという話です。Azure や WordPress に限らず IIS の話です。
css や js ファイルは頻繁に変更されないので有効期限を示す情報 Expires ヘッダーを付加して、Web ブラウザーでキャッシュできるようにします。WebMatrix などでサイトの web.config を次のように編集します。clientCache 要素を追加しました。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8" ?> | |
| <configuration> | |
| <system.webServer> | |
| <staticContent> | |
| <remove fileExtension=".svg" /> | |
| <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> | |
| <clientCache cacheControlMode="UseMaxAge" | |
| cacheControlMaxAge="7.00:00:00" /> | |
| </staticContent> | |
| </system.webServer> | |
| </configuration> |
こうすると css や js ファイルがキャッシュされるので、サイトのデザインの編集などが落ち着いた後に行いましょう。上記の場合、7日で期限切れです。ちなみに、以前から WordPress を設置して使っていた場合は、svg ファイルにアクセスするための上記の記述がないため一緒に追加しておきましょう。
さらに favicon.ico にも Expires ヘッダーを追加する場合、次のように追記します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8" ?> | |
| <configuration> | |
| <system.webServer> | |
| <!– 省略 –> | |
| </system.webServer> | |
| <location path="favicon.ico"> | |
| <system.webServer> | |
| <staticContent> | |
| <clientCache cacheControlMode="UseMaxAge" | |
| cacheControlMaxAge="90.00:00:00" /> | |
| </staticContent> | |
| </system.webServer> | |
| </location> | |
| </configuration> |
日本のリージョンに WordPress を設置して、このようにするとさらに Web サイトが高速化しましたね！
オマケ
Azure といえばクラウディアさんと安曇瑠璃ちゃんですよね。キャラクター利用ガイドライン に従ってクラウディアさんのイラストや音声が利用できますが……、プログラミング生放送のキャラクター プロ生ちゃん（暮井 慧）もイラストや音声を公開しています！ 利用ガイドライン を確認して、アプリなどに使ってくださいね。
さらに今春音声がどどんと増えます！（予定） これに併せて利用ガイドラインの修正を予定していますが、比較的自由に使えるのには変わりありません。プロ生ちゃんも要チェック！
