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 の話は次の機会に。