wordpressの画像をAmazonS3+CloudFrontから配信

2016/09/28Amazon, WordPress, クラウド

wordpressの画像をAmazonS3から配信」を公開したところ、「Amazon CloudFrontを使ってもそれほど料金変わらないよ」という感想をいただいた。

CloudFrontが提供開始された直後に一度試したことがあるけど※1、そこまでアクセス速度を稼ぐ必要性も感じなかったので実験しただけで放置していた。
今回はS3配信までは完了していて、CDNを試す良い機会なので再チャレンジしてみた。

※1 Amazon CloudFrontでflvを配信してみる

目次

CDNから配る

AmazonS3まで配送が終わっていれば、そのBucketをCDNから配送するように設定するだけ。細かい設定はググってください。
Nephila clavataの設定でS3/CFのどちらから配送するか変更できるのは便利。

このサイトは右側サイドバーに人気・新着コンテンツ画像が含まれていて、1ページ表示するだけで画像転送が20回以上発生する。
CloudFrontの料金は画像のGETとTransferが大半を占めるので、なるべく転送数を抑える必要がある。下記の対策を行った。

  • 人気・新着・お勧めなどサムネールを表示している部分の画像サイズ・ファイル名を合わせる
  • 画像にはExpiresヘッダを付ける(一見さんが多いので効果は限定的)
  • srcsetで大きな画像を渡すのを止める(少し画質が悪くなる)

それでもS3単体の時に比べるとAmazonに払う料金は倍になっている。

アクセス数がそれほど多く無い場末のサイトなので倍といっても高が知れているが、万一アクセス数が10倍ぐらいになったら無視できない金額になりそう。
(それぐらいアクセス数が稼げる記事を書きたいものだ……)

高速化してみる

画像転送が早くなるとそれ以外の部分の遅さが気になります。このサイトには Googleのmod_pagespeedを入れてあるので、その設定を微妙に変更。

  1. 画像圧縮・リサイズはしない (EWWW Image Optimizerに任せる)
  2. 画像のインライン化もなるべく行わない
  3. CSS,Javascriptファイルは できる限り HTMLに含めて転送回数を減らす
  4. pagespeedが使用するキャッシュ領域を増やす

3が結構効きますね。サーバー応答は若干遅くなりますが、別々にCSS/JSを転送するよりは高速になりますし最終的な表示速度も上がります。CPUは余ってるので今の所は負荷は大丈夫。

CSS/JSもCDNから配送できれば良いのですが、大掛かりな作業になりそうなので諦め。

結果

表示速度はそこそこ速くなったと思う。これ以上を求めるならVPSサーバーの高速化が必要だけど、そこまで投資する必要性が今は無いんだよなあ。
律速になっているのは広告なので広告削るのが一番速くなるのだけど、それはさすがに……

20160917-cloudfront-1

蛇足

このブログを動かしているさくらインターネットも「ウェブアクセラレータ」※1というCDNサービスを提供している。2016年9月末までは無料なので試しに使ってみたけど、本ブログの高速化には使えなかった。さくらの「ウェブアクセラレータ」は配信元のサーバーのIPアドレスを指定するようになっていて、本ブログのようにVirtual HostになっているWebサーバーでは使えなかった。残念。

20160926-sakura-1

※1 さくらのクラウドの新オプションサービス 国内向けウェブコンテンツ配信ができる「ウェブアクセラレータ」のオープンβテスト実施のお知らせ | さくらインターネット

リンク


Amazon, WordPress, クラウド

Posted by ず@沖縄