人力不可と言われた「スーパーマリオワールド 強制エンディングバグ」をRTAで達成、大幅な更新で世界最速記録に人力不可と言われた「スーパーマリオワールド 強制エンディングバグ」をRTAで達成、大幅な更新で世界最速記録に

Media-Pickup



  • ウェブサイトの表示を超高速化! SSLも無料で使える効果絶大のCDN「CloudFlare(クラウドフレア)」

    

    ウェブサイトの表示を超高速化! SSLも無料で使える効果絶大のCDN「CloudFlare(クラウドフレア)」

    ウェブサイトを運用する際によく壁となるのが「ウェブサイトの表示速度」です。

    実際にウェブサイトの表示に3秒以上かかるとユーザーのおよそ半分が表示を諦めるという研究結果が報告されています。

    それに加えて、表示速度の増減によってPV数が変化するとの報告があります。

    つまり、ウェブサイトの表示速度を上げるだけで損失機会を少なくすることが出来ます(コンテンツ内容やサイト構造によっては効果大)。

    しかし、ウェブサイトの高速化作業を行うには手間と時間がどうしてもかかります。

    時間のない人にとっては試行錯誤の繰り返しで苦痛な作業となるでしょう。

    そこで登場するのが、コンテンツデリバリネットワーク(Contents Delivery Network - CDN)です。

    これは、Webコンテンツをインターネット経由で配信するために最適化されたネットワークのことを表し、簡単に言うと「最適化されたデータを別サーバーから訪問者へ送信してくれる」ということです。

    自分が使用しているサーバーに大量のアクセスが来た場合、サーバー能力が足りないと読み込みが遅くなってしまい、最悪の場合はサイトを閲覧出来なくなってしまいます。

    CDNはそれを防止するため、訪問者が対象サイトにやってくると直接対象サイトからファイルを送信せずに、CDNサーバーから最適化されたファイル(gzip、キャッシュ等)を送ります。

    サイズの大きいファイル(画像、スクリプトなど)はCDNが代わりに訪問者へ送信してくれるので、結果、自サイトへの負荷が少なくなるのです。

    その魅力的なCDNの内、今回はすべてのプランにSSL対応したと話題の「CloudFlare」を使ってみましたので、各プランの説明に加えて導入手順(使い方)もご説明したいと思います。



    CloudFlare | The web performance & security company
    https://www.cloudflare.com/
    2014-12-15-2


    プラン

    Compare Plan」を見ると、各プラン詳細を見ることが出来ます(英語)。

    各プランには「Free(無料)」「Pro(個人用)」「Business(小規模企業用)」「EnterPrise(企業用)」があります。

    Free以外は全て有料となっており、Proは月額20ドル(約2000円)、Businessは月額200ドル(約2万円)、EnterPriseは月額平均5000ドル(約60万円)です。

    CloudFlareの各種機能はhttps://www.cloudflare.com/overviewにて説明されています(英語)。


    Free(無料)


    無料版はファイルの最適化によるウェブサイト高速化が最初から使えるのに加え、コメントスパムの防止やコンテンツの盗用防止などの標準セキュリティが備わっています。

    そのため、お金を支払わずとも非常に快適に使用することが出来ます。

    更に、帯域制限はありません(対象サイトが本来使用しているサーバーは別)。

    しかも今年10月からは全てのプランにSecure Sockets Layer(SSL)の導入を開始しており、無料でサイトをSSL化(完全なSSLではない)することが出来ます(FreeならSSL適用に時間が掛かる+Freeは最近のブラウザのみSSL対応)。

    CloudFlareは全プランがSPDYに対応しているので、SSL化するだけでも高速化が望めます。

    また、CloudFlare専用アプリがあり、これを使うことで簡単にコンテンツ管理を行うことが出来ます。

    というようにFreeプランだけでも非常に優秀な効果を発揮しますので、お試しでCloudFlareを使ってみるorコストはできるだけ抑えたいなら、まずはFreeプランの使用をお勧めします。


    Pro(個人用)


    こちらは月20ドル(約2000円)支払うことで使えるお手軽なプランです。

    Freeプランよりも少し便利機能が増えており、「画像の最適化」「モバイル表示の最適化」「ウェブアプリケーションファイアウォールの適用」「SSLの即時有効+全てのブラウザに対応」「トラフィック解析時間が15分ごと」「キャッシュ更新時間が1時間に短縮」「OWASP ModSecurity Core Rule Setによる保護」などが追加されています。

    Proプランは無料版とそこまで変化はありませんが、「画像の最適化」と「モバイル表示の最適化」はモバイルユーザーの快適度に大きくプラスの効果を与えるため、自身でモバイルの最適化を行う自信が無ければProプランに移行する価値は十分あります。


    Business(小規模企業用)


    Businessプランになると、月200ドル(約2万円)と少々高めの金額が必要になります。

    しかし、その分有益な機能が提供されています。

    CloudFlareにはAlways Online技術が用いられており、対象サイトがダウンしてもCloudFlareで保存されたキャッシュを利用して閲覧が可能になっています。

    各プランでAlways Online技術をは使用出来ますが、Freeプランでは1週間ごとにキャッシュ更新、Proプランでは3日ごとにキャッシュ更新なのに対し、Businessプラン以上では毎日更新されているため、サイトがダウンしても最新の情報のまま閲覧することが出来ます。

    更にBusiness版以上ではRailgunという素晴らしいネットワーク技術が使用されています。

    CloudFlareのRailgun技術に関しては数年前、「とある科学の超電磁砲」がCloudFlare公式サイトに出現という少々茶化すような話題がありました。

    しかし、実際のRailgun技術は茶化すようなものではない相当なもので、以前までキャッシュ不可能だったウェブオブジェクトに対して脅威の99.6%の圧縮率を達成し、これによって平均200%以上のパフォーマンス増加をもたらすとのことです。

    SSLに関しても、Businessプラン以上ではカスタム証明書を使うことができます。

    更に高度なセキュリティも数件追加されており、「WAFルールを最大25件まで追加」出来たり、DDoS攻撃による影響を防止するために「複数層の防御壁を展開」しています。

    また、キャッシュ時間が更に短縮されて「30分更新」になり、他にもDNSネームもカスタマイズ可能です。

    訪問者への送信速度も100Mから200Mへと上昇しています。

    まさに至れり尽くせりといった感じですが、アクセスが多いサイトを持った個人事業主や企業などがこのプランを使えば、まさに十分すぎる機能を提供してくれるでしょう。


    EnterPrise(企業用)


    EnterPriseプランはCloudFlareのプランの中で最上位となるプランです。

    必要となる金額も他のプランとは大きく異なり、金額は固定されておらず、組織ごとに調整されています。

    月額平均では5000ドル(約60万円)が必要になっているようです。

    他のプランはウェブ登録のみで使用することが出来ましたが、EnterPriseプランはCloudFlareに連絡を取らなくては使用できません

    EnterPriseプランで追加された機能は数件あり、まず訪問者への送信速度はBusinessでは200Mまででしたが、EnterPriseになると一気に500Mまで上昇しています。

    そしてWebSocketという双方向通信を行う技術規格が適用され、一つのコネクションで全てのデータ送受信が行えるために通信ロスが減ります。

    SSLに関してはKeyless SSL技術が導入されており、ユーザーがキーの制御を保持することができます。

    他にもBorder Gateway Protocol(BGP)からの保護も追加されています。

    サポートは365日メールと電話対応に加え、質問などがある場合は専属アカウントマネージャーが担当してくれます。

    Service Level Agreement(SLA)は2500%稼働率保証を謳っていることから、頼りになる存在となるでしょう。

    とはいえ、このプランを使うのは月に数億ページビュー以上という余程のメガサイトではないと使うことはないかもしれません。

    なお、EnterPriseプランは専用の紹介ページ(英語)があり、各機能が説明されています。


    各プラン比較


    Compare Plan」に書かれた各プラン比較の日本語訳です。

    少々長くなっています。

    以下の比較は「2014/12/17」現在での比較です。

    FreeProBusinessEnterPrise
    パフォーマンス
    CDNの有効化OOOO
    静的コンテンツの自動キャッシュOOOO
    IPv6の互換性とゲートウェイOOOO
    Always Online技術による対象サイトダウン時の臨時復旧1週間前にキャッシュしたコンテンツを表示3日前にキャッシュしたコンテンツを表示当日キャッシュしたコンテンツを表示当日キャッシュしたコンテンツを表示
    Rocket Loader技術によるJavaScript最適化OOOO
    グローバルDNSエニーキャストOOOO
    SPDYのサポートXOOO
    画像の最適化XOOO
    モバイル表示の最適化XOOO
    Railgun技術によるネットワーク最適化XXOO
    WebSocketsの有効化XXXO
    訪問者への最大アップロードサイズ100M100M200M500M
    標準セキュリティ
    レピュテーション技術による保護OOOO
    コメントスパムからの保護OOOO
    ウェブスクレイピングから保護OOOO
    IPや国別によるブロック機能OOOO
    新たな脅威への即時対応OOOO
    サイトがウィルスに感染時、訪問者へ対策を通知OOOO
    通常のDDoS攻撃からの保護OOOO
    Secure Sockets Layer(SSL)
    SSLによる暗号化OOOO
    SSLサーバ証明書の種類CloudFlareが発行CloudFlareが発行CloudFlareあるいはカスタムCloudFlareあるいはカスタム
    SSLの最適化OOOO
    SSLが有効になるまでの時間最大24時間(予定)10~15分10~15分10~15分
    SSLが有効になるブラウザ一部ブラウザ全て全て全て
    Keyless SSL技術による拡張性の高いキー制御XXXO
    高度なセキュリティ
    CloudFlareルール内蔵のWebアプリケーションファイアウォール(WAF)XOOO
    OWASP ModSecurity Core Rule Setによる保護XOOO
    専門家によるWAFルール追加(別料金発生あり)XOOO
    カスタムWAFルール追加XX最大25件最大1000件
    DDoS攻撃からの強力な保護(3~4層)XXOO
    DDoS攻撃からの強力な保護(7層)XXOO
    Border Gateway Protocol(BGP)からの保護XXXO
    分析と保護
    サイトのトラフィック分析24時間ごとにアップデート15分ごとにアップデート15分ごとにアップデート15分ごとにアップデート
    簡単なDNS管理OOOO
    キャッシュ開放即時即時即時即時
    DNSワイルドカードDNSのみDNSのみDNSのみDNSとフルプロキシ
    ページごとの設定3ページのみ20ページのみ50ページのみ自由
    キャッシュ更新時間2時間1時間30分30秒
    DNS管理インタフェースの提供OOOO
    インタフェースのカスタマイズXXOO
    カスタムDNSネームの使用XXOO
    生ログファイルへのアクセスXXXO
    アプリマーケット
    アプリへの簡単アクセスOOOO
    CloudFlare専用アプリの使用OOOO
    サポート
    EメールサポートOO優先的に回答365日優先回答
    電話サポートXXXO
    専属アカウントマネージャーXXXO
    Service Level Agreement(SLA)XX稼働率100%を保証稼働率2500%を保証
    価格無料月額20ドル(約2000円)+Proプランのサイト1つ追加ごとに5ドル増加月額200ドル(約2万円)+Businnessプランのサイト1つ追加ごとに200ドル追加月額平均5000ドル(約60万円)+CloudFlareへの連絡が必要


    導入手順


    今回はFreeプランでの導入手順をお教えします。

    アカウント登録


    まずはCloudFlareトップページに移動し、「Sign up now!」を選択します。
    2014-12-16-2


    アカウント作成ページに移動するので、各種必要項目を記入して「Create account now」を選択します。
    2014-12-17-1


    CDNを使うウェブサイトのスキャン


    CloudFlareを使うサイトのURLを入力します(http抜きでもOK)。
    2014-12-17-2


    ウェブサイトのスキャンが完了するまで数十秒間待機します。
    2014-12-17-3


    しばらくするとスキャンが終了するので、「Continue」を選択します。
    2014-12-17-4


    DNSレコードの追加


    登録したサイトのDNSレコードの構成が表示されます。レコード内容が正しい+足りない分を追加したならば「I've added all missing records, continue」を選択します。

    レンタルサーバーならば管理画面にDNSレコードの設定が備わっています。
    なお、雲の画像をクリックすると、そのホストに関してCDNの有無を選択出来ます(オレンジ色=CDN有り=CloudFlareのサーバーを経由する、灰色=CDN無し=CloudFlareのサーバーを経由しない)。
    2014-12-17-5


    プランの種類選択


    プランやパフォーマンス等の選択ページに移動します。
    2014-12-17-8


    プランは最初にProプランが選択されているため、タブから「Free」を選択します。
    2014-12-17-6


    FreeプランのSSLに関する注意画面が表示されます。FreeプランではSSLの適用に最大24時間(場合によってはそれ以上)かかります。
    今回使用するのはFreeプランですので、そのまま「OK」を選びます。
    2014-12-17-7


    パフォーマンスの種類選択


    パフォーマンスの種類には「CDN only (safest)」「CDN + basic optimizations (faster)」「CDN + full optimizations(bleeding edge speed)」の3つがあります。

    「CDN only (safest)」は主にコンテンツをgzip化して配信するだけになります。
    「CDN + basic optimizations (faster)」はsafest設定に加えて、html、CSS、JavaScriptの縮小化を行い、キャッシュ設定もより強力になります。

    「CDN + full optimizations(bleeding edge speed)」は最も高い高速化設定を行いますが、bleeding edgeという名の通り、試作なために更新が反映されないなどの不具合が出る場合があります。
    2014-12-17-9


    セキュリティの種類選択


    パフォーマンスを選んだ後は、セキュリティの種類を選びます。
    セキュリティの種類は「Essentially off(基本的にオフ)」「Low」「Midium」「High」の4パターンがあります。

    セキュリティ設定は高い程スパムやハッキング、DoS攻撃などに対して高い保護を発揮しますが、その分訪問者に対しても障壁(captcha等)が発生します。

    安全第一を考えるなら高いセキュリティ設定を勧めますが、CloudFlareはデフォルトのMidiumを勧めています。
    2014-12-17-32


    IPv6の有無


    次にIPv6の有無を選択します。

    IPv6はIPv4の枯渇対策として使用されており、IPv4は「192.0.2.1」というようにお馴染みのIPアドレスとして使われていますが、IPv6は「2001:0db8:bd05:01d2:288a:1fc0:0001:10ee」などと、かなりの数を使用しています。

    現在使用しているサーバーがIPv6に対応しているならばONにしておきましょう。
    2014-12-17-10


    SmartErrorの有無


    最後はSmartErrorの種類を選びます。

    SmartErrorとは、存在しないコンテンツ(404)に訪問者がアクセスした際、ウェブサイト内の関連コンテンツを表示させる機能です。

    種類には「Full」「Partial(一部)」「Off」の3つがあります。
    「Full」は全ての404ページに関連コンテンツを表示させ、「Partial」はカスタマイズされていない404ページのみに限り関連コンテンツを表示させます。

    直帰率を減らすには良い機能ですが、これはどの設定でも構いません。
    2014-12-17-11


    全ての設定が終われば「Continue」を選択します。
    2014-12-17-12


    ネームサーバーの更新


    今度はネームサーバーをCloudFlareのものに更新して下さいとの指示が出ます。
    2014-12-17-13


    対象サイトのドメインを管理しているサイトでネームサーバーを入れ替えます。
    ネームサーバーの更新には1日以上かかる場合があります。
    2014-12-17-15


    先ほどのページに戻り、「I've updated my nameservers, continue」を選択します。
    2014-12-17-13


    CDNの反映を待つ


    これでサイトのCDN設定は完了です。なお、完了するにはネームサーバーの更新が終了する必要があります。プランの横に緑色のチェックアイコンが表示されていればOKです。

    後はCDNの反映待ちですが、世界中のキャッシュサーバーに対象サイトのコンテンツが送信されるため、反映には24時間以上かかる場合があります。
    2014-12-17-16


    次はCloudFlareの設定について説明します。


    CloudFlareの設定


    CloudFlareの各種設定は、ログイン後の「My websites」というページにて行えます。

    DNS Settings」「CloudFlare Settings」「Page rules」が主な設定ページとなります。


    DNSレコード再設定


    DNSレコードを再編集したい場合はこちらを選択します。
    サイト追加時に行ったページと同じです。
    2014-12-17-18


    簡易設定


    こちらがメインの設定画面です。
    「Settings overview(設定概要)」「Security Settings」「Performance Settings」の3つを設定出来ます。
    2014-12-17-19


    Settings overview


    こちらでは重要な設定のみ一覧に表示されています。


    Security profile

    セキュリティ強度を「Essentially off」から「High」の間で選びます。


    Performance profile

    パフォーマンスレベルを「ODN only」から「CDN + Full Optimizations」の間で選びます。


    Cache Purge

    CloudFlareに蓄えられたキャッシュを開放します。
    すぐにウェブサイトの更新を反映したい場合に有効ですが、全てが開放されてしまうために負荷が大きくなります。

    更新ファイルが少ないならば「Purge single file」が特に有効です。

    How do I purge my cache?
    https://support.cloudflare.com/hc/en-us/articles/200169246


    Development Mode

    一時的にキャッシュ及び縮小化を無効化します。
    ウェブサイトの更新を行っている間は特に便利です。

    使用するならば「ON」を選びましょう。

    なお、ONにしてから3時間経つと自動的にOFFに戻ります。

    What does CloudFlare Development mode mean?
    https://support.cloudflare.com/hc/en-us/articles/200168246


    Automatic IPv6

    IPv6の有無を選びます。

    対応しているならば有効化しましょう。

    What does the FULL IPv6 option mean?
    https://support.cloudflare.com/hc/en-us/articles/200168586


    Pseudo IPv4

    古いハードウェアソフトウェアを使用している場合、IPv6のアドレスで不具合が起きる時があります。

    その対策のために、IPv6のアドレスを疑似的にアドレスをIPv4に変更します。

    項目は「Off」「Add header(ヘッダーに追加)」「Overwrite headers(上書き追加)」があります。

    Pseudo IPv4 - Supporting IPv6 addresses in legacy IPv4 applications
    https://support.cloudflare.com/hc/en-us/articles/202494830


    SPDY

    SPDYはGoogleが提唱した次世代の通信プロトコルの一つです。

    HTTPSでありながら高速通信が可能となります。

    Freeプラン以上ならば使用できます。


    Always Online

    CloudFlareにはAlways Online技術が用いられており、対象サイトがダウンしてもCloudFlareで保存されたキャッシュを利用して閲覧が可能になっています。

    不要ならばOffにしておきます。

    What does Always Online do?
    https://support.cloudflare.com/hc/en-us/articles/200168006


    IP Geolocation

    ウェブサイトに「CF-IPCountry」というコードを追加します。

    これにより、訪問者のIP地理位置情報を取得できます。

    不要ならばOffにします。

    What does CloudFlare IP Geolocation do?
    https://support.cloudflare.com/hc/en-us/articles/200168236


    Google Analytics

    Google Analyticsをウェブサイトに設置します。

    既に設置しているなら必要ありません。

    Google Analytics
    https://www.cloudflare.com/apps/google_analytics


    SSL

    Secure Sockets Layer(SSL)の設定を行えます。

    自身の証明書を持っていないならば、「Flexible SSL」を選択して下さい。

    この時はCloudFlareによる「Universal SSL」が適用されます(一部ブラウザはSSL無効)。

    Flexible SSLは「サーバー→CloudFlare→訪問者」で送信される際、「サーバー→CloudFlare」は暗号化されず「CloudFlare→訪問者」のルートのみ暗号化されます。

    一部のみ暗号化という仕様によって不具合が発生する場合が多く、快適に運用できない場合があります。

    証明書を持っているならば「Full SSL」にして下さい。

    「Full SSL(strict)」では「Full SSL」よりも強固な設定で、信頼できる認証局から署名されたものではないと使用出来ません。

    なお、FreeプランではSSLの有効化に24時間以上かかる場合があります。

    Business以上のプランでは、証明書をカスタム設定することが可能です。

    What do the SSL options (Off, Flexible SSL, Full SSL, Full SSL Strict) mean?
    https://support.cloudflare.com/hc/en-us/articles/200170416

    CloudFlare one-click SSL
    https://www.cloudflare.com/ssl

    Wordpress等でSSLを有効にした場合、表示に乱れが生じたり、管理画面の一般設定からURLを変更してしまうとリダイレクトループが発生する時があります。

    その時は「WordPress HTTPS」というプラグインを入れて各種設定を行って下さい。

    How do I fix the infinite redirect loop error after enabling Flexible SSL with WordPress?
    https://support.cloudflare.com/hc/en-us/articles/203487280--How-do-I-fix-the-infinite-redirect-loop-error-after-enabling-Flexible-SSL-with-WordPress-


    Mobile Redirect

    モバイルデバイスの訪問者を自動的に最適化されたサブドメインのモバイルサイトにリダイレクトする機能です。

    Drop path」及び「Keep path」の設定が可能です。

    Drop path: http://example.com/page.html → http://m.example.com/
    Keep path: http://example.com/page.html → http://m.example.com/page.html

    Freeプランでは使用出来ません。

    CloudFlare mobile redirect service details
    https://support.cloudflare.com/hc/en-us/articles/200168336


    Client Maximum Upload Size

    訪問者への最大送信スピードを選択出来ます。

    Businessプラン(100M~200M)とEnterPriseプラン(100M~500M)のみが選択可能です。


    セキュリティ設定


    ここではCloudFlareのセキュリティ面を設定できます。
    2014-12-17-20


    Security profile

    セキュリティ強度を「Essentially off」から「High」の間で選びます。


    Advanced DDoS protection

    高度なDDoS攻撃からの保護を選択します。

    この項目はBusiness及びEnterPriseプランでしか使用できません。


    Basic protection level

    防御レベルを選びます。デフォルトはMidiumです。

    レベルが高ければ高いほど強固なセキュリティが望めますが、訪問者に障壁(captcha等)が発生します。

    I'm under attack!」は今まさに攻撃を受けている時に使用すると効果的です。

    What is CloudFlare's Basic Security Level?
    https://support.cloudflare.com/hc/en-us/articles/200170056


    Challenge passage TTL

    訪問者が障壁を突破した際に許可する滞在時間を設定します。

    What will changing the Challenge Passage TTL do?
    https://support.cloudflare.com/hc/en-us/articles/200170136


    E-mail address obfuscation

    Eメールアドレスを難読化することにより、人間のみに読めるようにします(スパムメールの防止)。

    What is Email Address Obfuscation?
    https://support.cloudflare.com/hc/en-us/articles/200170016


    Server side exclude (SSE)

    CloudFlareが不審と設定している訪問者にはコンテンツを表示しません。

    What does Server Side Excludes (SSE) do?
    https://support.cloudflare.com/hc/en-us/articles/200170036


    Browser integrity check

    訪問者のブラウザの整合性をチェックし、スパムボット等を排除します。

    What does the Browser Integrity Check do?
    https://support.cloudflare.com/hc/en-us/articles/200170086


    Hotlink protection

    他サイトによる画像の盗用(imgタグで直リンク等)を防ぐために、ホットリンク保護を加えます。

    What does enabling CloudFlare Hotlink Protection do?
    https://support.cloudflare.com/hc/en-us/articles/200170026


    Advanced security (Web Application Firewall)

    ウェブアプリケーションファイアウォールを有効化します。

    Freeプランでは使用できません。

    What does the Web Application Firewall (WAF) do?
    https://support.cloudflare.com/hc/en-us/articles/200172016


    パフォーマンス設定


    ここではCloudFlareのパフォーマンスに関する設定を行えます。
    2014-12-17-21


    Performance profile

    CDN only」から「CDN + full optimizations」の中でパフォーマンスを選びます。

    「CDN only」が一番安定していますが、速度重視ならば他のほうが効果が高いです。


    Caching level

    キャッシュの適用範囲を「Aggressive」「Simplified」「Basic」から選びます。

    「Aggressive」ならばファイル末尾にクエリ(バージョンの数値等)があってもキャッシュします。
    「Simplified」はクエリが付いている文字は無視します。
    「Bacic」は殆ど全ての静的コンテンツ(キャッシュファイル一覧)をキャッシュします。

    What are CloudFlare's caching levels?
    https://support.cloudflare.com/hc/en-us/articles/200168256


    Minimum expire TTL

    訪問者のブラウザに残る静的コンテンツのキャッシュ保持時間を設定します。

    What does the cache minimum expire TTL do?
    https://support.cloudflare.com/hc/en-us/articles/200168276


    Auto Minify (Web optimization)

    CSS、JavaScript、HTMLの縮小化を行います。

    項目が緑色になっていると有効化されています。

    縮小化による不具合があった場合は、該当するファイルを選択して無効化して下さい。

    すぐに反映させるにはキャッシュ開放を行う必要があります。

    How do I minify HTML, CSS and JavaScript to optimize my site?
    https://support.cloudflare.com/hc/en-us/articles/200168196


    Rocket Loader™ (Web optimization)

    Rocket Loader技術によるJavaScriptの最適化を行い、全てのJavaScriptを非同期化します。

    Automatic」はCloudFlareが自動的に最適化を行います。

    Manual」はdata-cfasync='true'を付けたスクリプトのみ非同期化されます。(例:<script data-cfasync='true' src="〜">)

    srcの前につけるのがポイントです。

    Automaticを使っている場合はdata-cfasync='false'スクリプトに加えると非同期化させません。

    Rocket Loaderはソーシャルボタンや広告を多用しているサイトならば大きな効果をもたらします。

    ただし、非同期による不具合が発生する場合があります。

    また、Twitterウィジェット(またはTwitterに関連するスクリプト)を使用している場合に正常に読み込みが行えないという不具合があるため、これらを多用している場合は使用しないことをおすすめします。

    What does Rocket Loader™ do?
    https://support.cloudflare.com/hc/en-us/articles/200168056

    How can I have Rocket Loader ignore my script(s) in Automatic Mode?
    https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-my-script-s-in-Automatic-Mode-


    ページルールの設定


    CloudFlareでページごとに最適化を行うかどうかの個別設定が行えます。
    Freeプランでは最大3ページ、Proプランでは最大20ページ、Businessプランでは最大50ページ、EnterPriseプランでは制限がありません。
    2014-12-17-25


    アプリの設定


    CloudFlareを使用しているユーザーのみに限り、提携アプリをウェブサイトに適用出来ます。
    My websites」にて「Apps」を選択することで、アプリページへ移動します。
    2014-12-17-22


    提携しているアプリは20以上あります。
    2014-12-17-23


    解析


    CloudFlareによる解析を使用できます。
    My websites」にて「Analytics」を選択することで、解析ページへ移動します。
    2014-12-17-24

    訪問者数や、ページビュー数、巡回ボットの数などを閲覧出来ます。
    2014-12-17-27


    脅威の調査


    CloudFlareは脅威となるIPを検出し、CAPTCHA等で阻止しています。「Threat control」では、そのログを表示しています。
    My websites」にて「Threat control」を選択することで、解析ページへ移動します。
    2014-12-17-26


    CDNによってGTMetrixの評価が極限まで増加


    サイトのパフォーマンスを調査するサイトにGTMetrixというサイトがあります。

    CDN使用後は以下のようになりました。

    「トップページ(http://media-pickup.com)」
    2014-12-17-34

    昨年人気が高かった当サイトの記事
    米国内で最も年間給与が高い「プログラミング言語 」トップ12
    2014-12-17-31

    トップページ、記事ページ共に「ダブルA」を獲得しました。

    以上のように、CDNを使用するだけで凄まじい効果を発揮しています。


    CloudFlare使用時の注意


    これ程の凄い効果を生み出してくれるCDNですが、一つ注意点があります。

    Wordpress等のCMSにはキャッシュ機能のあるプラグインがあります。

    もしそのプラグインを使用している場合、CloudFlareのキャッシュ機能と干渉を起こして不具合が起きる可能性があります。

    そのため、CloudFlareを使用する場合はキャッシュプラグインとの競合をチェックしておきましょう。


    まとめ


    今回CloudFlareの適用によって大幅な高速化を実現しました。

    この記事ではFreeプランでの使用でしたが、Freeプランではモバイルユーザーのための最適化が行われないので、物足りない方はPro版の移行をおすすめします。

    現在CloudFlareはPaypalの使用は出来ませんが、運営は近い将来にPaypalの導入を考えているため、その際には当サイトもPro版に移行しようと考えています。

    サイトの速度に懸念を抱いているユーザーは、是非ともCloudFlareの適用を一つの手段として考えてみてはいかがでしょうか。

    SHARE!

    各アイコンをクリックするとポップアップします(Feedlyは別窓)。

    ・この記事を「


    | | |


    【おすすめ記事】ミミズに腐卵にゲ○味…、USJハリーポッター「百味ビーンズ」試食レポート

    ←前の記事
    一度でもミスすれば無事では済まない、超危険な雪山をスキーで下る 「命知らずのスキーヤー」
    次の記事→
    ウェブサイトの表示速度を一瞬で解析してくれる「便利なブックマークレット」
    

    この記事を見た人はこんな記事も見ています

    関西の二郎系インスパイアの一つ「自家製太麺 ドカ盛マッチョ」で野菜マシマシを食べてきました

    関西の二郎系インスパイアの一つ「自家製太麺 ドカ盛マッチョ」で野菜マシマシを食べてきました

    ファイルをすぐに見つけたい方にオススメ! シンプルかつ超高速な検索ツール「Everything」

    ファイルをすぐに見つけたい方にオススメ! シンプルかつ超高速な検索ツール「Everything」

    簡単にウェブサイトの速度を計測してくれるサービス「Pingdom」

    簡単にウェブサイトの速度を計測してくれるサービス「Pingdom」

    耳コピやリスニングに便利! 高機能なメディアプレイヤー「聞々ハヤえもん」

    耳コピやリスニングに便利! 高機能なメディアプレイヤー「聞々ハヤえもん」

    ビックカメラのBIC SIMカウンターで「BIC SIM(IIJ みおふぉん)」をMNPで即日発行してきました

    ビックカメラのBIC SIMカウンターで「BIC SIM(IIJ みおふぉん)」をMNPで即日発行してきました

    ミミズに腐卵にゲ○味…、USJハリーポッター「百味ビーンズ」試食レポート

    ミミズに腐卵にゲ○味…、USJハリーポッター「百味ビーンズ」試食レポート

    気さくなおば様と大盛りで有名な喫茶店「喫茶Y」でY定食を食べてきました

    気さくなおば様と大盛りで有名な喫茶店「喫茶Y」でY定食を食べてきました

    「クラウドワークス」で依頼していたロゴデザインが完成しました

    「クラウドワークス」で依頼していたロゴデザインが完成しました

    ウェブサイトの表示速度を一瞬で解析してくれる「便利なブックマークレット」

    ウェブサイトの表示速度を一瞬で解析してくれる「便利なブックマークレット」

    クラウドソーシングで有名な「クラウドワークス」に登録して仕事依頼してみた

    クラウドソーシングで有名な「クラウドワークス」に登録して仕事依頼してみた


    レビュー」カテゴリーに関連する最新記事

    関西の二郎系インスパイアの一つ「自家製太麺 ドカ盛マッチョ」で野菜マシマシを食べてきました

    関西の二郎系インスパイアの一つ「自家製太麺 ドカ盛マッチョ」で野菜マシマシを食べてきました

    「クラウドワークス」で依頼していたロゴデザインが完成しました

    「クラウドワークス」で依頼していたロゴデザインが完成しました

    クラウドソーシングで有名な「クラウドワークス」に登録して仕事依頼してみた

    クラウドソーシングで有名な「クラウドワークス」に登録して仕事依頼してみた

    気さくなおば様と大盛りで有名な喫茶店「喫茶Y」でY定食を食べてきました

    気さくなおば様と大盛りで有名な喫茶店「喫茶Y」でY定食を食べてきました

    ビックカメラのBIC SIMカウンターで「BIC SIM(IIJ みおふぉん)」をMNPで即日発行してきました

    ビックカメラのBIC SIMカウンターで「BIC SIM(IIJ みおふぉん)」をMNPで即日発行してきました

    SIMフリーで格安「EXPANSYS(エクスパンシス)」でスマートフォンを購入してみました

    SIMフリーで格安「EXPANSYS(エクスパンシス)」でスマートフォンを購入してみました

    簡単にウェブサイトの速度を計測してくれるサービス「Pingdom」

    簡単にウェブサイトの速度を計測してくれるサービス「Pingdom」

    ウェブサイトの表示速度を一瞬で解析してくれる「便利なブックマークレット」

    ウェブサイトの表示速度を一瞬で解析してくれる「便利なブックマークレット」

    耳コピやリスニングに便利! 高機能なメディアプレイヤー「聞々ハヤえもん」

    耳コピやリスニングに便利! 高機能なメディアプレイヤー「聞々ハヤえもん」

    ファイルをすぐに見つけたい方にオススメ! シンプルかつ超高速な検索ツール「Everything」

    ファイルをすぐに見つけたい方にオススメ! シンプルかつ超高速な検索ツール「Everything」


    新着記事 - 10件

    FF7を「ファミコンで再現」する企画が完了、あらゆる要素がFC仕様に

    FF7を「ファミコンで再現」する企画が完了、あらゆる要素がFC仕様に

    脳を電極で刺激すると「創造性」をより生み出せるという実験結果

    脳を電極で刺激すると「創造性」をより生み出せるという実験結果

    「メープルシロップ」は抗生物質の能力を向上させる事が判明

    「メープルシロップ」は抗生物質の能力を向上させる事が判明

    アド街司会者でお馴染みの「愛川欽也」氏が死去、原因は肺ガン

    アド街司会者でお馴染みの「愛川欽也」氏が死去、原因は肺ガン

    地球上の生物の90%以上が死滅した「ペルム紀大絶滅」が再び発生する可能性

    地球上の生物の90%以上が死滅した「ペルム紀大絶滅」が再び発生する可能性

    スウェーデンの兄弟が世界初「ドーナツを宇宙に飛ばす」挑戦を行う

    スウェーデンの兄弟が世界初「ドーナツを宇宙に飛ばす」挑戦を行う

    宇宙飛行士の父親に向けて娘が「世界最大の自動車文字」でメッセージを贈る

    宇宙飛行士の父親に向けて娘が「世界最大の自動車文字」でメッセージを贈る

    「多用途四輪車(ホンダパイオニア700)でのウィリー走行」での世界記録

    「多用途四輪車(ホンダパイオニア700)でのウィリー走行」での世界記録

    イタリアの外科医がロシア人男性に「初の人間頭部移植(HEAVEN)」を計画

    イタリアの外科医がロシア人男性に「初の人間頭部移植(HEAVEN)」を計画

    TwitterがNTTやDataSiftを含む「全てのデータリセラーとの契約を解除」か

    TwitterがNTTやDataSiftを含む「全てのデータリセラーとの契約を解除」か


    ←前の記事
    一度でもミスすれば無事では済まない、超危険な雪山をスキーで下る 「命知らずのスキーヤー」
    次の記事→
    ウェブサイトの表示速度を一瞬で解析してくれる「便利なブックマークレット」