いろいろプラグインを入れたがやはりどうもWordPressが遅い.
画像のlazyload等もやったがやはり負荷が高すぎるみたいだ…
なのでAWSのCloudFrontを入れた CDNを構築して対応することとした.
今回の全体の流れとか
W3-Total-CacheプラグインはWordPressのキャッシュ関連による高速化で使われるメジャープラグインの一つ. 他にもWordPress Fast Cacheなどもあるが、今回はこのプレミアムなしでも対応範囲が広いプラグインを使用.
特にそのプラグインのCDNの設定が今回のメイントピック.
全体像
CloudFrontが画像やほとんど変わらないリソースを持っていてくれて、
ユーザに最も近いところからデータを送ってくれます.
通常のWordPressでは自分が持っている画像やリソースを自分から送っていますが、これをW3-Total-CacheプラグインでCloudFrontから送ってもらうように変更します.
この作業が終わった後には、ページを開いたときに出ている画像がCloudFrontの画像をさしている状態になります.
作業全体像
- W3-Total-Cacheプラグインをインストール
- W3-Total-CacheでCDNを「Amazon CloudFront」に設定
- Amazon IAMでCloudFrontの設定を触れるユーザを準備
- Amazon IAMで準備できたユーザをW3-Total-Cacheに設定
- W3-Total-CacheがCloudFrontの設定してくれます
- 開始!
という感じ.
W3-Total-Cacheプラグインの設定とか
W3-Total-Cacheプラグインをインストールすると、「Performance」タブが追加されます.「Performance」> 「General Setting」を開き、そこで、CDNのゾーンがあるので下記設定を行います.
- CDN を Enabled
- CDN TypeをAmazon CloudFront
- 他は特に設定不要(てかできない)
そしたら、次はIAMの設定
IAMでCloudFrontをいじれるユーザを作る
CloudFrontの設定をW3-Total-Cacheに設定してもらえるようにするため、CloudFrontの設定を変更できるユーザを作り、そのユーザ情報をW3-Total-Cacheに設定します.
このユーザはCloudFrontの設定しかできないようにしておきます.(念の為)
IAMでは、
「CloudFrontFullAccess」のポリシーを持ったグループを作成して、
新しく作ったユーザをそのグループに割り付けてください.
IAMのページにてユーザを追加します.
適当なユーザ名を設定して、「プログラムによるアクセス」のチェックをつけて、次に進みます.
ここでCloudFrontFullAcessのポリシーを持ったグループを割り当てます.
もしそのグループがない場合は、「グループの作成」からポリシーを当てて、ユーザに結びつけてください.
ユーザ作成の完了画面で、
Access KeyとSecret Keyが作られます.
どこかにそれらをコピーしてなくさないようにしてください.
CSVファイルも念の為ダウンロードしておきます.
IAMのユーザ情報をW3-Total-Cacheに設定する
ユーザの情報でアクセスキーとシークレットキーを上記の箇所に入力してます. そしたらCreate Distributionを押します.
勝手にW3-Total-Cacheで必要なCloudFrontの設定してくれるので、
あとはそのCloudFrontが立ち上がるのを待ちます.(50分くらい時間がかかる時もあるみたいです)
AWSのCloudFrontの設定を確認していればタイミングがわかるので、
確認しに行きましょう. 状態がInProgressならまだ.
InProgressのままでももうDeployedになっていたとしても上の画像の「Test CloudFront distribution」でいつでもCloudFrontが通るかどうかを確認できます.ダメだった場合は上記のようにエラー文が表示されます.
testがパスしてしまえば、あとは設定を保存して、対応完了です.
確認する
自分のサイトのページを開いて、画像のアドレスをみてみてください.
おそらくドメイン名がCloudFrontのものに差し代わっているかと思います.
