fbpx

メニュー

SSLありのWordPressだけど高速化したいからCloudFlareのCDNを無料で使う

高橋文樹 高橋文樹

この投稿は 12年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

最近WordPress界隈では高速化の話題が多いですが、僕もちょくちょく試しています。静的キャッシュのプラグインとかYahooの人が提唱している14の秘訣は昔から有名ですが、最近のホットトピックは以下の2つじゃないでしょうか。

  1. nginx(特にproxy cache)による高速化
  2. CDNの導入

nginxのproxy cacheはdogmap.jpさくらたんどっとび〜ずを見れば設定できると思います。今回は2番目のCDN導入ですね。

CDNとは?

CDNとはコンテンツ・デリバリー・ネットワークの略でして、社長秘書みたいなものですね。普通WebサイトというのはHTML・JS・CSS・画像・その他(Flashとか)から構成されています。WordPressのようなPHPアプリケーションは最終的にHTMLを吐き出すので、ネットワーク的にはHTMLと同質になりますが、吐き出される内容は都度変わります。Amazonの「こんにちは、◯◯さん」の部分などがそうです。

PHPはサーバがごちゃごちゃ計算して返す必要がありますが、画像ファイルやCSSなどは単に求められているものをそのまま返せば済むので、大してリソースはいりません。

CDNの仕組み
CDNの仕組みはこんな感じ

社長「大事なお客さんだったら俺に教えて、どうでもいい情報だったら適当に返事しておいて」

秘書「御意」

という状況ですね。

で、このCDNというのは高価だったのでGoogleやAdobeという膨大なアクセスを誇るサイトしか導入できなかったのですが、最近はCloudFlareという無料でもオッケーなCDNが誕生してしまったのでかなり敷居が低くなってきました。設定も簡単です。百式さんのサイトに導入方法が書いてあります。

CloudFlareはSSLありだと有料

さて、問題はこのCloudFlare無料版がSSLに対応していないということですね。SSLの場合はPro版(月額$20)利用者のみCloudFlareから証明書が代理で発行されるという仕様です。

Facebookみたいにサイト全体がSSLの場合はそれでもいいかもしれませんが、僕のサイトみたいに部分的にSSLという場合、そのためだけに年額$240払うのは嫌だなーという気分になってしまいます。まあ、ある程度収益を上げているサイトであれば、年額$240なんてタダみたいなものですが、僕のサイトはまだそうなっていないので……

対応方法

さて、ではどうやって対応するかです。基本的な理念は以下の通りです。

  1. SSLの場合はCDNを経由しない
  2. SSLを利用しない通常のページにおいて、画像・JS・CSSはサブドメイン(ex. s.example.jp)経由で読み込む
  3. CloudFlareはs.example.jpのみキャッシュする

1. サブドメインを作成する

まず静的ファイルを読み込むサブドメインを作成します。example.jpであれば、s.example.jpとかでいいと思います。サブドメインの作成方法は環境によって異なるので、がんばってください。今回は下記のようなケースを想定します。

/var/www/example.jp #http://example.jpのドキュメントルート
/var/www/s.example.jp #http://s.example.jpのドキュメントルート

で、この静的ファイル用サブドメインからメインドメインへシンボリックリンクを張ります。「シンボリックリンクってなあに?」という方はググってください。SSH(黒い画面)が使えないサーバではこの方法は使えません。

cd /var/www/s.example.jp
#シンボリックリンク作成
ln -s /var/www/example.jp/wp-admin ./wp-admin
ln -s /var/www/example.jp/wp-includes ./wp-includes
ln -s /var/www/example.jp/wp-content ./wp-content

Apacheの場合は Options FollowSymLinks とかが必要ですが、よくわからない人はググってみてください。

さて、サーバの設定がきちんとしていれば、これでexample.jpとs.example.jpの静的ファイルは同じファイルを参照することになります。WordPressはデフォルトだと/wp-content/uploads/2011/12/photo.jpgといった具合に画像を保存しますが、下記のURLはまったく同じファイルを参照することになります。以下の2つのURLで同じ画像が表示されれば、上手く設定できているということになります。

  1. http://example.jp/wp-content/uploads/2011/12/photo.jpg
  2. http://s.example.jp/wp-content/uploads/2011/12/photo.jpg

これでとりあえずオーケーです。

2. URLを書き換える

さて、続いてURLの書き換えです。ここが一番めんどくさいんですが、がんばりましょう。

WordPressにおいて静的URLを読み込む方法は沢山ありますが、今回はAPIに準拠しているものみ読み込むという男前なルールで行きたいと思います。以前bloginfo削るメソッド意味ないということを書きましたが、なんかよくわからないURLの書き方をすると対応できないので、そういうのは切り捨てます。ob_startでなんとかするというのもありますが、やりたい人はやってみてください。

WordPressで静的ファイルを読み込まれるケースはだいたい以下の通りですね。

  • テーマにbloginfo(‘template_directory’)とか書いてる
  • 投稿内に画像等の静的ファイルが記載される(メディアップローダでimgタグが書き込まれる場合)
  • プラグインなどによってJSやCSSがwp_headおよびwp_footerで出力される

これらのURLをSSLでない限りにおいてhttp://s.example.jpに書き換えてしまえばいいんですね。テーマのfunctions.phpにこんなのを書き込みます。

/**
 * 投稿内のsrc属性をCDN対応にする
 * @param string $content
 * @return string
 */
function _my_cdn_content($content){
     if(!is_ssl()){
          $upload_dir = wp_upload_dir();
          $upload_dir_url = $upload_dir['baseurl'];
          $upload_dir_cdn_url = str_replace('http://', 'http://s.', $upload_dir_url);
          $content = str_replace($upload_dir_url, $upload_dir_cdn_url, $content);
     }
     return $content;
}
add_filter('the_content', '_my_cdn_content');

/**
 * テーマディレクトリのURLをCDN対応にする
 * @param string $url
 * @return string
 */
function _my_static_url($url){
     if(!is_ssl()){
          //SSLじゃなかったらCDN用URLに変える
          $root_uri = home_url();
          $static_uri = str_replace('http://', 'http://s.', $root_uri);
          $url = str_replace($root_uri, $static_uri, $url);
     }
     return $url;
}
add_filter('template_directory_uri', '_my_static_url');

/**
 * wp_enqueue_scriptで読み込まれたJavascriptのSRC属性をCDN対応
 * @param type $src
 * @return type
 */
function _my_script_loader_src($src){
     $home_url = home_url();
     if(!is_ssl() && false !== strpos($src, $home_url)){
          $src = str_replace('http://', 'http://s.', $src);
     }
     return $src;
}
add_filter('script_loader_src', '_my_script_loader_src');

/**
 * CSSのURLを書き換える
 * @param string $tag
 * @return string
 */
function _my_style_loader_tag($tag){
     $home_url = home_url();
     if(!is_ssl() && false !== strpos('href="'.$home_url, $tag)){
          $tag = str_replace('href="http://', 'href="http://s.', $tag);
     }
     return $tag;
}
add_filter('style_loader_tag', '_my_style_loader_tag');

これでサイトを確認してみて、CSSやJSのURLがhttp://s.example.jpになっていれば問題ありません。

なお、プラグインによってはwp_enqueue_scriptなどのAPIを使っていないことがあるので、その場合はCDNの恩恵を受けられないことになります。

3. CloudFlareの設定を行う

CloudFlareのDNS設定
CloudFlareのDNS設定

これで問題がなければCloudFlareの設定を行います。基本的には百式さんが紹介されている方法で問題ありませんが、DNSレコードの設定だけが異なります。

僕のサイトの場合で紹介しますが、https://takahashifumiki.comはCDNを使いません。雲マークをクリックして、曇り空にしておきます。

http://s.takahashifumiki.comだけはCDNを使いたいので、これだけ晴れにしておきます。これで設定完了です。お疲れさまでした。

CDNを導入してみて

Stocker.jpさんに「CDNお勧めですよ」と言われてはじめたのですが、当のCloudFlareに「SSL有料だよ!」と言われて一度は絶望しかけました。でも、やればなんとかなりますね。

一番いいのは「月額$20なんて無料と同じやでガハハ!」というぐらいこのサイトがアクセスを稼ぐことなんですが、ぜんぜんそうなっていないので、こういう地味な工夫をせざるを得ないという事実。貧乏暇less(古館伊知郎)とはよくいったものですよ。

他にできそうなWordPressの高速化

このサイトはnginxなんですが、ログインがあったりするので、Proxy Cacheを導入していません。ただ、クッキー見れば「ログインしているユーザーにはキャッシュを提供しない」ということも可能ですので、がんばって設定したいと思います。できたらまたブログ書きます。

そういえば、dogmap.jpのをかもとさんとこもりまさあきさんがWordPress高速化の本を近々に上梓されるそうなので、この記事読んで意味わからんという人はそれを読んでみるといいかもしれません。

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。