陽だまりの中で

~香川フリーランスのぼやき~

赤ちゃんでもできる!?CDNサービス「CloudFlare」で高速化!

f:id:hidamarinonakade:20150319210330j:plain

はじめに

こんばんわかなたです。
本日はCDNサービスの「CloudFlar」についての記事です。
これを使うことでウェブサイトの高速化が簡単に図れます!
この機会に皆さんも利用してみてはいかがでしょうか?


CDNってなんじゃろほい?

簡単に言えばサーバーダウンを防ぐもの

CDNとは「Contents Delivery Network」の略で、ファイルサイズが大きいデジタルコンテンツをより快適に配信できるように最適化されたネットワークのことです。
通常ウェブサイトを閲覧されるユーザーの方々は直接ウェブサイト運営側のサーバーにアクセスします。
その時、事前に想定しているよりも多くの閲覧する方がいらっしゃるとネットワーク回線が混線し、サーバーへの負荷が増大することとなります。
そうすると、最悪の場合サーバーがダウンしてウェブサイトを閲覧できないという事態に陥ってしまいます。
それを回避するために利用するのがCDNです。

レスポンス向上の効果も!

なぜこれを回避できるのか。
それを知るにはCDNの構造を理解するのが早そうです。
CDNはウェブサイトのコンテンツと動機を取っている(キャッシュを取っている)サーバーを複数台用意することでウェブサイトを閲覧される方々のアクセスを分散化します。
その際最初からキャッシュサーバーに接続されるわけではないので誤解のないようにしてください。
まず最初にアクセスされるのは従来のウェブサイトです。
ウェブサイト側でアクセスが確認されたら、閲覧者に最も近いキャッシュサーバーに自動的に飛ばすことでコンテンツのやり取りはキャッシュサーバーと行うことになります。
そうすると従来のウェブサイトの負荷が大幅に軽減されレスポンスも向上するのです。

CDNのメリット

ウェブサイトへのアクセスをキャッシュサーバーに分散させることで、ウェブサイトへの負荷を軽減させてレスポンスの向上効果を得られる!
それだけでなく、もし万が一キャッシュサーバーがダウンしても他のキャッシュサーバーに自動的にリンクすることでサイトダウンを防ぐことができる。

CDNのデメリット

CDN設定後から反映されるまでに24~48時間の時間を有することがある。
ほとんどのCDNサービスが有料であり、従量課金制であるためアクセス多いウェブサイトは高額の出費となり運用に多額の金銭が必要となる。
独自ドメインを持っている方しか利用ができない。


CloudFlareのススメ

一般ユーザーにはCloudFlare!

f:id:hidamarinonakade:20150319213347j:plain
上で説明した通りCDNは素晴らしいサービスなのはご理解いただけたことでしょう、それとともにサービスを受けるには多額の出費となることも・・・。
その出費を抑える・・・というよりもタダのCDNサービスが存在するのでご紹介します。
そのサービスの名前は「CloudFlare」です。

CloudFlareの設定方法

それではCloudFlareの設定をしましょう。
まずは以下からサイトに飛びます。
www.cloudflare.com

f:id:hidamarinonakade:20150319213420j:plain
サイトに飛んだら右上のサインアップをクリックしましょう。

f:id:hidamarinonakade:20150319213433j:plain
それぞれ必要な情報を入力したのち、間違いがなければチェックリストにチェックを入れ、次に進みます。

f:id:hidamarinonakade:20150319213527j:plain
あなたのウェブサイトのURLを入力したら先に進みます。
この際、あなたの独自ドメインである必要があります。
独自ドメインを持たれていない方は残念ながらCDNサービスは受けることができません。
これを機に独自ドメインを取得される方はこちらを参考にどうぞ。
www.hinakana.net

f:id:hidamarinonakade:20150319213858j:plain
次にCNAMEなどの情報を入力します。
最初から自動で読み取られている方は結構ですが、読み込めてない方は手動で入力する必要があります。
あなたのドメインを取得されたサイトから情報を確認しつつ入力してください。
無事入力が済んだら右側に雲の絵が表示されている部分があるはずです。
そこをクリックしてオレンジ色に変えた後、次に進みましょう。

f:id:hidamarinonakade:20150319214124j:plain
次にフリープランを選択します。

f:id:hidamarinonakade:20150319214151j:plain
「フリープランだと24時間待たせることになるけどそれでも良いの?」的なことを聞かれますが、迷いなく先に進みます。

f:id:hidamarinonakade:20150319214255j:plain
次にCDNの設定を選びます。
ここはご自分のお好みで選んでください。
後で設定変更ですのでそんなに悩まなくても結構です。
選択できたら先に進みます。

f:id:hidamarinonakade:20150319214422j:plain
次にネームサーバーの設定を行います。
ここに表示されている二つのアドレスをお使いのドメインサービスにて登録します。
1と2を間違えないように注意してください。

f:id:hidamarinonakade:20150319214542j:plain
「お名前.com」の場合の画面です。
ネームサーバーの設定を選択し、自分の設定したいドメインのところにチェックを入れましょう。
その後、ほかのネームサーバーを利用をクリックし、先ほどのアドレス二つを入力したら設定します。

f:id:hidamarinonakade:20150319214731j:plain
設定が終わったら「CloudFlare」に戻ってきましょう。
次に進みます。

f:id:hidamarinonakade:20150319214759j:plain
「設定が完了したよ!おめでとう!」ってな画面が出ますので先に進みます。
これで無事「CloudFlare」の設定は完了です!!
所要時間30分もかからなかったのではないでしょうか??
この後24~48時間後くらいには確実にCDNサービスが稼働しているはずです。
お疲れ様でした!!


おわりに

「CloudFlare」の実力のほどは?

設定前の評価

f:id:hidamarinonakade:20150319215040j:plainf:id:hidamarinonakade:20150319215045j:plainf:id:hidamarinonakade:20150319215051j:plain

正直言って最低なスコアですね・・・。
モバイル表示に関しては、まだはてなブログの中ではましな部類だと思いますが、PCサイトに関しては本当に遅すぎます。
読み込み時間が30秒近いです。
私がはてなブログを放置していた1年近くの間にいろいろ仕様が変更され、コードがスパゲッティコード化しております・・・。
モバイル表示に関しては整備している最中ですのでまだ快適な方ではありますが、PCサイトをご覧の方はストレスを感じさせてしまっていることでしょう・・・。
申し訳ありません。
モバイルの方が落ち着き次第修正していく予定です。

設定直後の評価

f:id:hidamarinonakade:20150319215550j:plainf:id:hidamarinonakade:20150319215557j:plainf:id:hidamarinonakade:20150319215602j:plain

まだ適用されていないためただ単にリクエスト回数が増える結果になった分悪化しております・・・。
どれも1~2評価が下がった結果となりました。
しかし、PCサイトに関しては表示速度が約5秒縮まるという結果に。
これは結構でかいのではないでしょうか?
明後日あたりに再度評価をチェックしてみることにしたいと思います。

大変お疲れ様でした

設定自体は簡単な「CloudFlare」
ただ適用されるまでに時間がかかるのがネックな気もしますね^^;
それでも、早さと安定を求める独自ドメインをお持ちのあなたは是非この機会に設定されてみてはいかがでしょうか!?
2日連続でSEO関連になりましたが、果たして明日は何を書くのでしょう。
それはわたしにもわかりません(笑)


追記

CDN適用から15時間ほど経過したので試しに再度速度を計測してみました。
結果はこちら↓
f:id:hidamarinonakade:20150320135436j:plainf:id:hidamarinonakade:20150320135439j:plainf:id:hidamarinonakade:20150320135444j:plain

どうでしょうか??
向上しているのがわかりますでしょうか。
PC版の方は最初に比べて10秒も縮まっていることが確認できると思います。
CDN恐るべし!ですね。
しかし読み込み完了まで未だに15秒とか・・・。
やっぱりスクリプトを整理しないとだめですね。