目指せ！サイトの高速化3 cloudflareの導入

今回はwebpagetest.orgでも指摘されているCDNの導入に踏み切ってみました。

CDNとは

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。 コンテンツ配信網とも。

との事で、僕の理解としては、CDNサーバーにキャッシュを保持しておくことで高速化が図れるがデメリットとして、一旦CDNサーバーを通すためfirst byteが遅くなると理解しました。

で、まずは結果から言うと

３Gの読み込みで4秒！！！

ロードタイム2秒台、フルロードでも3秒台！！！でも、first byteは確かに遅くなってますね。

GTmetrixでも中々いいスコアが出ました！

高速化を目指したときに挙げた目標3秒台をあっさり達成出来たのには、正直驚きです。

CDN導入でこんなに効果があるとは思っていなかったので、デメリット以上に効果が大きいと思います。あとは、ブラウザのキャッシュ問題なんですが、一応.htaccessに制御するよう書き込んでるんだけど、一向に評価が上がらないのが謎です・・・

cloudflareの導入方法

TOPページの画像ですが、メールアドレスとパスワードを入れてサインアップを押します。

ドメインを入力します。httpは抜いちゃってsairsariblog.comって感じですね。

入力したらスキャンDNSを押すと

DNSのスキャンが終わるまで映像が流れるので、見ながら待機しますｗ

スキャンが終わったらコンティニューボタンを押します。

この画面で追加のDNSがあれば追加できますが、何もせずそのままコンティニューでOK

プランの選択画面です。無料のFreeプランを選びました。

ここでネームサーバーの変更方法が表示されます。左側が現在の設定で、右側のように変更するので、上２つのアドレスを変更して、残りは削除する事になります。

コンティニューを押すと

この状態で一旦cloudflareでの作業は終了なんですが、まだ画面は閉じずに別タブを開きネームサーバーの変更を行います。僕の場合はエックスサーバーなので、エックスサーバーの管理画面に入り、変更作業を行います。

ちなみに、SSLの設定はデフォルトでfullが選択されていました。

エックスサーバーのドメインパネルのボタンを押し

ネームサーバーの変更ボタンを押します。

ちなみにこのドメイン、キャンペーンで貰ったので、サーバー契約している間はずっと管理費無料ですｗ

先ほどのアドレスを入力します。下3個は削除。で、確定したら先ほどのcloudflareに戻ります。

ネームサーバーの変更が終わったら、Reチェックネームサーバーボタンを押します。

一瞬ですが、画像のように画面下にsuccessが表示されればOKです。

通常だとこれで完了なんですが、僕の場合SSLの設定がfullだとエラーを起こしてブラウザがエラーの表示になっちゃいました。

Cryptoボタンを押すとSSLの設定を変更できる画面になるので、full(strict)に変更したらエラーが無くなり、無事導入完了です。

効果は冒頭で述べた通り、びっくりするほどでした。

 



ブログ運営エックスサーバー, 高速化, cloudflare, CDN

Posted by DS