ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

驚くほど効果があった無料CDNサーバー「CloudFlare」の導入

      2015/02/16

CloudFlare_Setting_tittle
先日投稿させて頂いた、

wordpress初心者でも出来る、劇的に読み込みが速くなる3つの方法
の中でも紹介している、
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
について詳しく紹介させて頂きます。

スポンサーリンク

CDNとは?

CDNとは「Contents Delivery Network」の略で、ウェブコンテンツを配信するために最適化されたネットワークのことを意味する。ウェブサイトにある画像や動画などの高容量コンテ ンツをウェブサービスが提供されているサーバーとは別のサーバーにキャッシュし、代わりに配信して負荷分 散するという仕組み。ここでいう「別のサーバー」というのがCDNサーバーであり、今回紹介する「CloudFlare」である。

参考サイト gori.meさんの表示速度を劇的に向上する、無料のCDNサーバー「CloudFlare」は導入必須だ!!

それでは実際に登録してみましょう!

CloudFlareの無料プランを新規登録する。

ここからまずCloudFlareのサイトに飛んで頂き、

CloudFlare_Setting_01

真ん中下の緑色のボタン「今すぐ登録!」をクリック!

CloudFlare_Setting_02

ご自身のメールアドレス、ユーザー名、パスワード、そして利用規約に同意した後にその下の緑色ボタンの「今すぐアカウントを作成」をクリック!

スポンサーリンク

対応させたいドメイン名を入力。

CloudFlare_Setting_03

追加後、右下の緑色ボタンの「+Webサイトを追加します。」をクリック!

CloudFlare_Scaning

すると「あなたのレコードをスキャンします。」と表示され1分程おとなしく待ちます。

CloudFlare_Setting_08

終わり次第緑色のボタン「Continue setup >」を押して次の項目へ!

CloudFlare_Setting_04

右側の赤で囲んだ部分にネームサーバーが表示されます。後ほど同じネームサーバーが表示されますのでここで覚えとく必要はありません。そしてCloudFlareのDNSレコードの スキャンが終わると、DNSレコードの構成が表示されます。特に問題がなければ、右下の緑色ボタンの「私はすべての不明のレコードを追加した、継続」から 先に進みます。基本的にこのまま進んで問題ないはずです。

スポンサーリンク

利用プランを選択する。

CloudFlare_Setting_07

DNSレコードの確認が終わった後は、利用プランを選択る画面に切り替わります。有料のプランもここで選べます。必要に応じて選択した後は、赤枠の「継続」ボタンから先に進みます。

お使いのネームサーバーへ登録。

CloudFlare_Setting_09

ここの右側に表示されているネームサーバー名をご自身がお持ちのネームサーバーに登録してください!

自分が使っているのはさくらサーバーなのでここからログインして、

CloudFlare_Setting_05

ネームサーバー名は伏せ字にしちゃってますが、ここにさっきの赤で囲まれた部分のネームサーバー名を登録します!

CloudFlare_Setting_10

これでCloudFlareの設定は終わりです!お疲れさまでした。

最後に!!!

wordpress用プラグイン「W3 Total Cache」のCloudFlare設定。

CloudFlare_Setting_06

この「W3 Total Cache」関しては「ゆめぴょんの知恵」さんの【WordPress】ついに1秒台達成!ブログ高速化の最終プラグインW3TotalCache

を参考にさせて頂きました。

読み込みスピードなどを計測してくれるGTmetrixなどでBefore,Afterを計測すると良くわかるのですが、これだけでブログの読み込みがかなり改善されていると思います。先日投稿させて頂いた記事でも書いていますが、実際どのぐらい変わったかはこちらの投稿を読んでみてください!

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[TwitterCards] ツイッターに概要を表示させる方法
WordPress[TwitterCards] ツイッターに概要を表示させる方法
WordPress[Stinger3用 子テーマ] 追尾型SNSボックスを削除する方法
WordPress[Stinger3用 子テーマ]追尾型SNSボックスを削除する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPressテーマ「Stinger3」見出しから自動的に目次を作ってくれるプラグインを導入
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
wordpress初心者でも出来る、劇的に読み込みが速くなる3つの方法
wordpress初心者でも出来る、劇的に読み込みが速くなる3つの方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法