スキップしてメイン コンテンツに移動

CloudFlareでWordPressサイトの表示速度を高速化(SPDY化)!かつSSL(https)化!CloudFlareの導入方法!

CloudFlare-WordPress-XSERVER
【趣旨】

既にWordPressで構築済みのWEBサイトに、CloudFlareを導入して高速化(ついでにSSL化)する方法を解説します。



【CloudFlareの高速化の仕組み】

ざっくりですが、以下の仕組みによりWEBサイトの表示が高速化します。
CloudFlare公式サイト:https://www.cloudflare.com/


  1. CloudFlareのCDN(高速に配信するために最適化されたネットワーク)に既存コンテンツをキャッシュさせる。
  2. 当該ドメインのネームサーバー情報を変更し、上記CDNを参照させるようにする


これにより、いままでhttp://aaa.com/などとブラウザのアドレスに入力されると、ブラウザはDNS(ドメインと実際のサーバーの場所をひもづける賢い仕組み)に問い合わせて、既存サーバーにデータを取りに行っていましたが、CloudFlare導入後は、CloudFlareの高速で最適化されたCDNを見に行くようになり、表示が高速化されます。



【今回の前提環境】

以下の環境にCloudFlareを導入するものとします。
・サーバー:エックスサーバー(X10プラン)
・CMS:WordPressで構築済み
・CloudFlare Pro版を購入



【既存サイト導入に対する問題点】

問題点1

無料版の場合、SSL証明書発行にきっちり24時間かかる。
=>Pro版を購入※すれば即時発行されます。今回は既にリリース済みサイトということもあり、Pro版を購入するものとします。
※1サイト目は$20、2サイト目以降は、プラス$5

問題点2

ネームサーバーの浸透時間(ユーザーそれぞれの環境により異なる)
=>どう問題か。以下に記載します。

・ドメインのネームサーバーをCloudFlareのものに書き換える必要があるため、各ユーザーの環境次第で浸透時間に差がでます。

・浸透早いユーザー(以下、早ユーザー):CloudFlareのCDNにキャッシュされたコンテンツを見に行きます。

・浸透遅いユーザー(以下、遅ユーザー):エックスサーバーのコンテンツを見に行きます。

・WordPressの設定(<?php bloginfo('url'); ?>等の元になる変数)を、「http」のままか「https」に変更する必要がありますが、それぞれ以下の問題が生じます。

「http」のままの場合

・早ユーザー:当該ドメインで、CloudFlareのCDNを見に行きます。
 CloudFlareのCDNではSSLを有効化しているので、httpsでCloudFlareのCDNを見ようとしますが、キャッシュされている内容は、CSS等のリンクがhttp となっているものなので表示がくずれます。

・遅ユーザー:当該ドメインで、エックスサーバーを見に行きます。
 特に問題なく参照可能。
 (つまり、早ユーザー:表示くずれ, 遅ユーザー:OK)

「https」に変更した場合

・早ユーザー:当該ドメインで、CloudFlareのCDNを見に行きます。
 https でCloudFlareのCDN を見ようとし、キャッシュされている内容は CSS等のリンクがhttps となっているので問題なく表示されます。

・遅ユーザー:当該ドメインで、エックスサーバーを見に行きます。
 変数が https になっているので、エラー画面(この接続ではプライバシーが保護されません)が表示されます。
 (つまり、早ユーザー:OK, 遅ユーザー:エラー)


対策(今のところ)

・CSS等のリンクは <link href="/wp-content/themes/my-theme/css/xxx.css">, <script src="/wp-content/themes/my-theme/js/xxx.js"></script>
 みたいにドキュメントルートからの絶対パスをハードライティングしてしまいます。(<?php bloginfo('url'); ?>等は使わない)

・グローバルナビ等のリンクも<a href="/about/">About</a> みたいにドキュメントルートからの絶対パスをハードライティングしてしまいます。(<?php bloginfo('url'); ?>等は使わない)

・CSSやJSで、外部リソースを読み込む必要あるときは、<link href="//fonts.googleapis.com/css?family=...>, <script src="//maps.google.com/maps..."></script>
 みたいにプロトコルを省いて呼び出します。
(ここまでは事前にやっておき、表示に問題がないことと、Chromeデベロッパーツール等でエラーが表示されていないことを確認しておきます。)

・上記実施しても、プラグインの読み込みなど、WordPressが動的にソースを生成する部分は、WordPressの変数を参照するので http か https にしておく必要があります。
 => 既にネームサーバーも書き換えていることですし、浸透が早いことを正義として、早ユーザーに最適化します。ですので、しばらく待って(数時間)エイヤで https に変えてしまいます!(結局最後はエイヤ!か~い。汗;

※なお、CloudFlareの無料版を導入する場合は、どのみちSSL証明書の発行にきっちり24時間かかりますので、以下の導入フローを悠々と最後まで進め、一晩寝て起きて、24時間後にhttpsで表示されるか確認すればよいのである意味気が楽です。ただし設定完了後からhttpsで表示されるまでの間はブラウザーはエラー画面(この接続ではプライバシーが保護されません)が継続されます。(工事中です画面を表示しようにも、すでにネームサーバーを切り替えているのでエックスサーバーのコンテンツを表示することもできません。)(<=この辺要確認。どなたか情報をお持ちでしたら教えてください。)


【導入フロー】

上記前提での導入フローを以下に記載します。

事前準備

・[必要に応じ]http通信を減らすために、Gruntなどを用いて複数のCSS(JS)を一つのCSS(JS)にまとめていた場合はほどきます。SPDYでは平行読み込み数が実質無制限なので、大きい1ファイルを読み込むよりも、小さい複数ファイルをぐわっと並行に読み込む方が高速化されます。

・[ブラウザー]Beforeの速度チェックを行い、スクリーンショットをとっておきます。(後でどれだけ早くなったか確認するため。また改善項目も提示されますので、Beforeでの情報を取得しておきます。)
 http://gtmetrix.com/
 https://developers.google.com/speed/pagespeed/insights/
(シークレットブラウザーでキャッシュクリア後に実施)


実施

・[DB]phpMyAdminに予めログインしておきます。(理由:WordPressのサイトURLとWordPress URLはMySQLのwp_optionsのsiteurlとhomeから変更可能。WordPressの設定変更後に管理画面にログインできなくなってしまったら、DBを直接修正して最悪管理画面にはログインできるようにできます。)

・[エックスサーバー]Basic認証かけてる場合は解除します。

・[CloudFlare]アカウント作成して[Add website]
https://www.cloudflare.com/my-websites

・[CloudFlare]のウィザードに従い手順を進めます。

・[ドメイン管理しているサーバー](ムームードメインやお名前.comなど)
ネームサーバーの情報をCloudFlareに提示されたものに変更します。
ns1.xserver.jp => xxx.ns.cloudflare.com
ns2.xserver.jp => xxx.ns.cloudflare.com
ns3.xserver.jp => Delete this name server
ns4.xserver.jp => Delete this name server
ns5.xserver.jp => Delete this name server

・[CloudFlare]設定を見直します。(以下、変えたところ)
Advanced security (Web Application Firewall) => ON
Polish: image optimization => Basic + JPEG

・[エックスサーバー]WP管理画面へのアクセスが海外からとなるため、エックスサーバーの管理画面への海外からのアクセス制限を解除します!
(・.htaccessのsslリダイレクトはCloudFlare側で実施するので設定不要)

・[WordPress]プラグイン ”CloudFlare Flexible SSL” を入れて有効化(これを入れないとリダイレクトループが発生してしまいます。)
(参考:https://www.rougebleu.net/cloudflare-flexible-ssl/
  ,http://www.svaha.jp/toki/2014/10/14/wordpress%E3%81%A7cloudflare-flexible-ssl%EF%BC%88%E7%84%A1%E6%96%99ssl%EF%BC%89%E3%82%92%E5%B0%8E%E5%85%A5/)

・[ブラウザー] nslookup/dig で変更したネームサーバーが浸透したか確認
http://www.cman.jp/network/support/nslookup.html(こっちで浸透してても、自分のネットワークで浸透してるとは限らず)

・ターミナルで $ traceroute aaa.com を定期的にチェックします。
(winの場合コマンドプロンプトで > tracert aaa.com)

・[WordPress]プラグイン W3 Total Cache 入れて、CloudFlare を有効化します。(キャッシュの設定競合を避ける)
 (参考:http://bazubu.com/cloudflare-23857.html)


・・・ここで待つ・・・



・デザリングに切り替えたりして、異なるネットワークで確認します!
(確認内容:https://aaa.com でサイト表示されたか)
(もし異なるネットワークで確認できたら作業をすべてそちらに移行し、以下作業を続ける)

・[CloudFlare]CloudFlareのpage ruleで「*aaa.com*」を always ssl on にします。
(浸透していない人は、httpでエックスサーバーを見に行き、浸透した人は、上記設定で以降、httpsになる)

(作業PCのtracerouteで浸透したら)

・[WordPress]管理画面の一般設定からサイトアドレス(下)をhttpsに変更して更新します。(bloginfo('url')等がhttp => httpsになる)

(問題なくhttps見れたら)

・[WordPress]サイトを確認して問題なければWordPressアドレス(上)もhttpsに修正して更新します。
 (※注意 WordPressアドレスも同時に修正してしまうと、もし設定に不具合があった場合管理画面にアクセスできなくなってしまいます。)
 (参考:https://www.icontrolwp.com/2014/10/enabling-cloudflares-universal-flexible-ssl-wordpress-without-infinite-redirect-loops/)

 (css等のパスがhttpのままで表示くずれしていたら)

・必要に応じ=>(・[WordPress]「wordpressのサイトをまるごとSSL化する」(以下url)を実行する(プラグイン:WordPress HTTPS)
 https://blog.euonymus.info/tag/universal-ssl/)
こんな方法もある=>(・https://www.softel.co.jp/blogs/tech/archives/2017)

(ひと通り設定後)

・[Google Analytics]google analytics(タグマネージャのコンバージョンURL等、ウェブマスターツールの設定等)見直します。

・[ブラウザー]エラー出てないか(Mixed Contentのワーニング?出てないか)全ページチェックします。

・<?php bloginfo('template_url') ?>等がhttpのままで、Mixed Contentになってしまう場合は、[WP]のパーマリンク設定の空更新、[CF]の全キャッシュクリア、を試してみます!!!

・.htaccess見直し(変なリダイレクトの設定等ないか)

・[ブラウザー]Afterの速度チェックを行い、スクリーンショットをとっておきます。
 http://gtmetrix.com/
 https://developers.google.com/speed/pagespeed/insights/
(シークレットブラウザーでキャッシュクリア後に実施)



【結果】

あるサイトの結果ですが以下のとおり、ページ表示速度が、6.72秒から、2.88秒に短縮されました。Total page sizeもずいぶんと縮小(圧縮)されていますね。

(CloudFlare導入前)



(CloudFlare導入後)



【運用】

・img,css,js等の静的ファイルをいじったときは [CloudFlare] Cache Purge > Purge single file でキャッシュをクリアします。(これやらないといつもの要領でCSS等を修正しても一向に表示に反映されませんのでご注意!)

・ある程度まとまった規模の修正で、いちいち上記するのが面倒なときは、[CloudFlare] Development Mode を ON(=>CloudFlareのCDNをトンネルし、エックスサーバーを見に行きます)(3時間で自動でOFFに戻る)
(重要)改修OK後、結果を反映させるため、上記キャッシュクリア(シングル or 全体)する。



以上です。
わかりにくい記述になってしまい申し訳ないです。
今後もっと理解度が高まったらリライトしたいと思います。

コメント

このブログの人気の投稿

iframeに異なるドメイン(クロスドメイン)のコンテンツを読み込んで高さを自動調節する方法

趣旨 iframe(親)に異なるドメインのページ(子)を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する


方法 普通にやると、
「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com".  Protocols, domains, and ports must match. 」
などと怒られてしまいますのでこちらを参考に
http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside

http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript


コード hoge.com(親)
<html> <head>     <title>親</title>     <script src="js/jquery.js"></script>     <script>         window.addEventListener('message', function(e) {         var iframe = $("#fugapage");         var eventName = e.data[0];         var data = e.data[1];         switch(eventName) {             case '…

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス(class="active"など)を設定する方法を記載します。
また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。

【通常の書き方】 <WordPress>ーテンプレート
<p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul>
とすると

<HTML><p>月別アーカイブ</p> <ul>     <li><a href="http://hoge.com/2013/12/">2013年12月</a></li>     <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul>
などと生成されます。

これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。

【カスタマイズ方法】 <WordPress>ーテンプレート
<p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> (変更なし)

ーfunctions.php
functions.phpに以下を追加
<?php ・・・ function my_archives_link($link_html){   $my_month = '/' . get_query_var('year') . &#…

PhotoSwipeでテキストリンクから特定の画像のPhotoSwipeギャラリーを起動する方法

【PhotoSwipeとは】 スマホサイトで写真ギャラリーを設置したいときに使えるライブラリ
スワイプで画像がめくれて便利!
レスポンシブサイトの画像ギャラリーにオススメ。
(optionに、imageScaleMethod: "fitNoUpscale" とすれば画像が最大100%で表示されるのでPCサイトでも使えます。)
https://github.com/codecomputerlove/PhotoSwipe


【実現したいこと】 通常は画像サムネイルのクリック(or タップ)でPhotoswipeギャラリーを起動します。
それとは別に、新着情報などのテキストリンクから特定の画像のPhotoSwipeギャラリーを起動したい。


【方針】var instance = $("#Gallery a").photoSwipe(options); instance.show(0); で、最初のPhotoSwipeギャラリーを起動できることから、テキストリンクに任意の要素(data-swipeとする)と、クラス(.swipe-targetとする)を設置し、.swipe-targetの上から順番にdata-swipeに番号を振ってゆき、.swipe-targetがクリックされたら、data-swipeから番号xを取得し、instance.show(x)で目的のPhotoSwipeギャラリーを起動する。


【HTML】 ヘッダー(もしくはフッター)部分(jQueryバージョンを使用)<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.2.min.js"><\/script>')</script> <script src="/js/vendor/klass.min.js"></script> <scri…