Azure Web Sites で WordPress を使い倒す CDN 編
プロ生のサイトを、WordPress.com から Azure Web Sites に移行しました。なぜ Azure Web Sites かは、知ってたからだけなんですが。以下、プロ生勉強会 第22回＠松山で少し話したネタのまとめ。
Azure Web Sites は、無償で使えるとか、WordPress の設置が簡単とかってありますが、実際は、使い物になりません。
Azure Web Sites は無償で使えますが、いろいろ制限があります。料金の詳細 によると……。
- AzureWebSites.net ドメインのサブ地域* あたり 10 個の無料 Web サイト
- 送信データ転送はサブ地域あたり 165 MB/日 (最大 5 GB/地域)**。受信データ転送は無制限
- サブ地域あたり 1 GB のストレージ (すべての Web サイトで共有)
- サブ地域あたり 20 MG のサードパーティ製 MySQL データベース (最初の 1 年間。それ以降は料金が発生)
送信データサイズが、165MB/日って、1回のアクセスで512KBぐらいダウンロードが発生すると仮定すると
165MB ÷ 500KB = 330回
330アクセスあるとサービスが停止します（あ、でもそんなにアクセス数 1日になかった）。
※ Azure Web Sites は gzip 圧縮されるので HTML や CSS や JS ファイルなどの転送サイズは実際のサイズより小さいです。Yahoo! YSlow などの評価ツールで gzip のサイズも知ることができます。
Jetpack で、画像を WordPress.com の CDN から配信
CPU やメモリやストレージにも制限があるけど、WordPress 使ってて一番厳しそうなのがこの送信データサイズじゃないかと思います。165MB のデータ送るのにそんなパワー使わないからね。
というわけで、Azure Web Sites からファイルのダウンロードサイズを減らします。超絶便利なのが、WordPress.com が提供している Jetpack プラグインです。WordPress.com で利用できるサービスがいろいろ自前の WordPress で利用できるようになるので、移行でも超便利。
Jetpack の機能のひとつ Photon というのを有効にすれば、記事中の画像がすべて WordPress.com の CDN から配信できるようになり、Azure Web Sites からの画像送信がほとんどなくなります。
※ テーマや CSS で指定している画像は Azure Web Sites からダウンロードのままなので、最適化するなら、うまく外部から持ってこれるように頑張ろう。
WordPress.com のアカウントと連携する必要があるんですが、うまくいかなかったので検索すると Error Activating Jetpack Plugin | Reboot, Tim’s IT Stumblings の方法で解決。Core Control プラグインをインストールして、一時的に cURL 転送が無効になるよう設定し、連携します。
Script や CSS の送信データサイズを減らす
基本、外部サイトから持ってこれるものはそっちを参照して、Azure Web Sites からダウンロードする必要があるものはサイズを小さくします。
Jetpack を有効にすると jQuery を使うよになります。これも CDN を参照するように変更しましょう。実現できるプラグインをさがしたら jsDelivr でできました。「jQuery CDN WordPress」でぐぐってもいろいろでます。
jsDeliver は、いろいろな script や CSS を CDN 提供しているようで、Jetpack の script もありました。プラグイン自体は、サイトで使用している script と CSS を CDN に置き換えのほか、script の読み込み順序を変更できます（js ファイルはコンテンツ最後で参照した方が、ページの表示速度が上がる）。
WordPress の高速化の情報は Web にたくさんあって、ここらへんはいろいろ検索すれば出てきます（Jetpack もだけどね）。その他、一般的な高速化手法でも、送信データサイズを減らせます。
Script や CSS をまとめる
複数の <script> で参照している js ファイルをひとつにまとめましょう（結構めんどいのでできる範囲で）。Closure Compiler Service が便利。
実は Jetpack が結構 <script> をいくつも追加して、元のテーマよりも送信データサイズが少し増えています。不要な Jetpack の機能はオフにしましょう。
CSS ファイルが複数にわかれていたら、これもまとめられる範囲でまとめちゃおう。WP Minify プラグインや、Web サービスの Online YUI Compressor が使える。
（4/14 追記： Minify は変換後のテキストに文字化けがまれに発生するので、日本語が含まれない CSS や JS にとどめておくのが良いかも）
高速化の話は、表示が速過ぎても、誰も文句は言いません ─ ＠IT が、セミナーのまとめだけど参考になりました。PageSpeed Insights — Google Developers の評価も便利。
DB 編
実は、Azure Web Site で MySQL データーベースも超使えない。WordPress.com では絶対に見ることなかった、データベースの接続確立ミスが結構多発します……。ここらへんの MySQL の話は次の機会に。