CDNを使って独自ドメインで運用しているワードプレスを高速化する方法

1.CDNの設定が難しい理由

少し前からGoogleサーチコンソールが「速度(試験運用版)」と言う項目を表示するようになりました。本サイトはAMP対応しているのでモバイル表示は高速評価なのですが、PC表示が低速評価で、サマリページでは「エラー」扱いされるようになってしまいました。

さすがにエラー扱いはショックだったのですが、PageSpeedInsightsで計測する限り、一番時間がかかっているのはサーバ本体の応答速度であり、現在のレンタルサーバではこれ以上の改善が難しそうでした。しかし、サーバを乗り換えるなり、クラウド化するなりしても、どの程度速度が向上するかはやってみないとわかりません。かなりの手間とお金をかけて理想の構成にしたとしても、思ったより速度が上がらなかったら悲しい事になります。

そのため、前々から気になっていたCDN(コンテンツデリバリネットワーク)と言うキャッシュの仕組みを使って高速化できないか試してみる事にしました。最近はかなりお安いサービスも出てきているようで、1GB辺りの転送量が5円などという破格のサービスも存在します。

しかし、大変苦戦しました。ネット上に資料は豊富に存在しているのですがCDN以外にも様々な設定を変更する必要があるため、最終的な構成、及びどこで何をする必要があるのかわかりにくいのがその原因なのではないかと思います。おそらく、同様に苦戦している方もいるのではないかと思い、ここにメモ書きをアップしておく事にします。

以下が、当初構成と最終構成の比較の図です。

どうでしょうか?ドメインの付け替え、https設定、CDN設定、httpd設定、Wordpressプラグイン設定、.htaccess、などなど。思った以上に工程が多く、様々な知識が必要になりました。DNSやhttps設定はインフラ系のお仕事をしているのでなければ、そんなに頻繁に設定するようなものではありませんし、逆にWordpressはインフラ系の方にはプラグインレベルまで問題の切り分けが出来る人は多くはないかと思います。

更に(1)~(7)、どれも設定をミスるとWebサイトにアクセスできなくなったり、Wordpressが動かなくなったり、オオゴトになります。

以下、CDN化時に考えた方針メモです。

独自ドメイン形式で完全キャッシュする事にしました。サブドメイン形式ですと画像などの一部コンテンツしかキャッシュできませんし、置き換えたコンテンツのアドレス変更が必要になります。更に、遅い原因がページ本体(phpファイル)なので、それを改善する事ができません。

しかし、ここで独自ドメイン形式で問題になったのが、本サイトが少しでもユーザの利便性を考えてアドレスからwwwを取ったURLを正式名にしている事です。「webbigdata.jp」そう、こういった「www」等が何もついていない素のドメインを「Zone Apex」と言うのですが、独自ドメイン形式でCDNを導入しようとして検索すると色々な所で目に付く呪いの言葉

「 Zone Apex (ネイキッドドメイン)では独自ドメイン形式でCDNを使う事はできません」

え~、待ってよ、そうしたら今更webbigdata.jpからwww.webbigdata.jpにリダイレクトしないといけないの?これってサイト名変更になるの?サイト移転になるの?どういう感じでサーチコンソールに登録すれば良いの?などなど凄い泥沼にはまりそうになったのですが、非常にありがたい事に、

「2019年11月現在Zone Apexでも独自ドメイン形式でCDNを使う事はできます!」

ありがたいです、はい、涙がでます。DNSのAliasと言う仕組みを使えば、Zone Apexでも独自ドメイン形式でCDN導入ができます。

ただし、まだ新しい仕組みであるため、DNS設定時にエラーチェックの仕組みが誤チェックして消さずに残しておきたいレコードを消す必要に迫られたりします。

しかし、出来る事は出来るのです。

具体的な手順を書いても、お使いの環境によって画面等が全く違うのであまり役に立たない事が予想されます。そのため、どこで、何を、何故やらなければならないのかがわかるように下記に書いておきます。これが理解できていれば、個々の作業はサポートセンターに問い合わせるなり、検索エンジンで調べるなり、一つ一つ解決していけば自分で設定が出来ると思うので。

まずは、Webサーバーを設定します。

(1)は、付け替え用のドメイン(今回の事例ではcdn-webbigdata.jp)をDNSに登録する作業です。
具体的にはDNSサーバに新しいドメインを追加登録します。

(2)は、付け替え用のドメインにSSL設定を行う作業です。
具体的にはWebサーバに証明書、中間証明書などを登録します。

(3)は、WebサーバにVirtual Hostの設定をする作業です。
具体的にはhttpd.confや.htaccess等に設定を追加します。

(4)は、Wordpressのプラグインなどを停止したりキャッシュの設定をする作業です。
具体的にはキャッシュ系やリダイレクト系などのプラグイン、
特に.htaccessに変更を加える系のプラグインを見定めて場合によっては停止します

ここまでの設定が成功すれば、https://webbigdata.jp/でアクセスしても
https://cdn-webbigdata.jp/でアクセスしても同じ内容が見れるようになります。

さて、次からはCDNの設定です。

(5)は、具体的にはCDNの設定をする作業です。
具体的には、CDNのアドレスにアクセスされたらhttps://cdn-webbigdata.jp/を取りに行くように設定します

(6)は、CDNのアドレスにSSL設定を行う作業です。
具体的にはCDNに証明書、中間証明書などを登録します。

ここまでの設定が成功すれば、CDNのアドレスにアクセスすると、https://webbigdata.jp/の内容が
表示されるようになります。

最後にドメインの付け替えです。

(7)は、webbigdata.jpのDNSのレコードを変更する作業です。
具体的にはDNSにwebbigdata.jpのアドレスを聞かれたらCDNのアドレスを答えるように設定します。

ここまでの作業が終わると、下記のようにCDNが動作する事になります
1)ブラウザがhttps://webbigdata.jp/にアクセスするとDNSはCDNのアドレスを返す
2)ブラウザがCDNのアドレスにアクセスするとCDNはキャッシュを返す。
もしはキャッシュがない場合はhttps://cdn-webbigdata.jp/にデータを取りに行ってその結果を返す
3)https://cdn-webbigdata.jp/はアクセスされると従来のhttps://webbigdata.jp/の内容を返す

 

「CDNの導入方法を教えてください」とCDNサービスを提供する会社のサポートセンターに聞いても(5)~(7)の部分しか、おそらく答えてくれない(答えられない)と思うのですが、(1)と(2)はドメイン登録作業なので、「ドメイン登録に関して教えてください」と聞けば、お使いのドメイン登録会社のサポートセンターにサポートして貰えると思います。(3)はネットを検索すれば色々と事例が出て来ると思います。(4)は厳しいかもしれませんが、最悪、全部止めて、CDN設定が完了した後に一つずつ動かしていけば切り分けはできると思います。

どうしても設定できなかった場合は、弊社でも有料で設定代行は行っておりますのでお問い合わせください