塚原 藍子ブログの表示速度が遅いのをどうにかしたいな。
CloudflareっていうCDNってので早くなるみたい。
導入方法とか詳しく知りたいな。
このような悩みに答えます。
サイトの表示速度は永遠の課題とも言えます。
今回はその1つの施策としてCDNの導入方法について解説していきます。
当記事では、表示速度を向上させるCDNの中で唯一無料で使えるCloudflareの導入方法から設定方法について解説していきます。
また、Cloudflareを導入してしまうとGoogleアドセンスの収益が下がる問題の解決方法も記事内で網羅しているので安心してください！
ちなみに、収益が下がる理由としては、
ipアドレスがCloudflareのipアドレスになってしまい、訪問した人のipアドレスではない為、Google AdSenseの広告などが訪問した人の関心のないものが表示されるです。
そりゃ、興味が無い広告が表示されているとクリックなんてしないですよね。
話はそれましたが、
Cloudflareの導入方法から解説していきますね。
※この記事は5分で読み終わります。
【さーづかのアトリエ】を作りました！
お絵描きは【孤独なもの】です。サボらないついでに交流の輪も広げていきましょう！
是非ご参加ください！
参加はこちら
※ディープなイラストの作現場が見れるかも！？
絵描きの方でもお絵描きをしていてサボリ気味な方は是非サボリ防止用としてご参加ください！
参加はこちら⇒参加する
Cloudflareの導入方法を解説！サイトを高速化にできる無料CDN！
CloudflareとはCDNと呼ばれるWebページを高速化できるサービスになります。
Cloudflare以外は有料なので無料で利用することができるのがありがたいですよね。
設定はとても簡単ですが、自身のサイトをSSLだと少しコツが必要になるのでご注意ください。
ですが、分かりやすく書いていくように頑張りますのでご安心ください。
導入する際のポイントはこちら
Cloudflareの導入方法を解説
それでは順番に説明していきます。
①ユーザー＆自身のサイトを登録
まずは、ホームページからユーザー登録をします。
右上の「Sign up」からユーザー登録をしてください。
メールアドレスは後から変更できます。
また、１アカウントで複数サイトを管理できますので、代表アドレスでいいと思います。
引き続き、サイトを登録します。
もし、サブドメイン（sub.main.com）でサイトを運用している場合は、メインのドメイン（main.com）で登録することになると思います。
画面の指示どおりに進めていきます。
「Free Plan」を選びます。
Cloudflare側の設定が動き、ドメインが登録されたことを確認します。
②ネームサーバーを変更する
引き続き、画面の指示に従って、
現在使っているネームサーバーを、Cloudflareのものに変更します。
画面に表示された新しいネームサーバーをコピーしておいてください。
「お名前.com」や「ムームードメイン」などのドメイン管理サイトで、ネームサーバーを変更します。
以下は、お名前.comというドメイン管理サイトの画面になります。
以下のように、CloudFlareで指示されたネームサーバーに変更します。
ネームサーバーの変更がうまくいくと、以下のようにアクティブになります。
もし、G Suiteなどを利用しているなど、DNSに各種設定をしている場合は、併せてCloud Flareに移植してください。
③SSLの設定を変える
もし、httpsから始まるSSLサイトを運営している場合は、もう少しだけ作業が必要です。
以下のような画面が出て、ホームページが表示されない可能性があるからです。
上記のような画面が出てしまう場合は、以下のようにCryptoを選んでください。
そして、SSLの設定を「Full(Strict)」に変更します。
一旦、ネームサーバーを以前の状態に戻してください。
そして、改めて「Full(Strict)」の設定をし、改めてCloudflareのネームサーバーに変更してみてください。
何度か作業しているとSSLが正しく読み込まれてうまくいきます。
最後に、Whois情報を確認できるサイトで、ネームサーバーが切り替わっているか確認します。
これで、ひとまず導入は完了です。
Cloudflareの設定方法
導入が終わりましたら続いて設定方法を説明していきます。
主にして頂きたい事は以下の３点になります。
①Cloudflareプラグインのインストール
CloudFlareを使っている場合、WordPressにはこのプラグインが必須です。
このプラグインを入れないと、WordPressに通知されるIPアドレスにCloudFlareの物が使われてしまい、CloudFlareのIPアドレスがスパムとして認識されてしまう危険性があります。
プラグインのデフォルト設定は、WoedPressとCloudFlareを組み合わせて使う時に、なるべく問題が起きない様な、最低限の設定になっています。これを見直して、高速な設定にしていきます。
「Optimize Cloudflare for WordPress」のApplyを押します。
②Rocket LoaderがONにする
Cloudflareサイトに入って頂いて「Speed」の項目を選択して頂きます。
最初の設定ではRocket LoaderがOffになっているので、ONにします。JavaScriptの読み込みが、劇的に改善されます。
この設定をした後、
サイトの表示が崩れた場合はすぐにOFFに戻すようにしましょう！
③Page Rulesを設定する
これも同じくCloudflareサイトから「Page Rules」を選んで頂きます。
するとページのキャッシュをしないページをフリープランだと３つまで選択できるので
の３種類を設定します。
設定が出来た画面がこちらです。
一つ目のサイト管理画面の設定は「*ドメイン名/wp-admin/*」を入力して画像の設定項目を選んで保存してください。
２つ目のプレビュー画面の設定は「*ドメイン名/*preview=true*」を入力して画像の設定項目を選んで保存してください。
最後はサイトのメインページの設定で「*ドメイン名/*」を入力して画像の設定項目を選んで保存してください。
これで管理画面とプレビュー画面とサイトメインのキャッシュは保存されなくなりました。
④キャッシュ削除方法
ページの削除方法とプラグインやテーマの削除方法で異なります。
ページのキャッシュ削除方法
ワードプレスのCloudflareプラグイン画面に移動して頂き、ページキャッシュの項目を選択して頂きます。
するとプルダウンメニューが開くので下の方を選びます。
少し見えにくいのですが、キャッシュを削除したいURLを２種類はります。
https版とhttp版の２種類です。この状態でしたの項目を選ぶとキャッシュが削除できます。
プラグインやテーマのキャッシュ削除方法
ページと同様にワードプレスのCloudflareプラグイン画面に移動して頂き、ページキャッシュの項目を選択して頂きます。
次は上の項目を選択します。
すると削除の確認ポップアップがでるので選択すればプラグインとテーマのキャッシュは削除されます。
以上で設定方法は完了です。
Google AdSense用のIPアドレス対策
少し長くなってしまいましたが、あと少しです。
ですが、IPアドレス対策をしないとサイトに来た人はCloudflareを経由してサイトにアクセスするので、来た人のIPアドレスではなく、CloudflareのIPアドレスしかサイト側に届かなくなるので、来た人の関心のある広告が表示されなくなってしまいます。
興味のない広告なんて誰も押さないですよね。なので、当然ですが収益も半減な訳です。
Google AdSenseを導入している方は必須項目になりますので是非対策をしてください。
対策といってもプラグインを導入して設定するだけなので非常に簡単です。
IP GEO BLOCK プラグインを導入
このIPアドレスが届かない原因としては、Cloudflareの「リバースプロキシ」という機能が原因だそうで、このIP GEO BLOCKプラグインで無効可できるようです。
それでは、そのプラグインをインストールしていきましょう。
WordPressプラグインURLはこちら
https://downloads.wordpress.org/plugin/ip-geo-block.3.0.17.zip
※最新バージョンだとバグがあるようなので、古いバージョンのURLになります。
プラグインの新規追加でダウンロードしたzipファイルを選択したらインストールできます。
※注意 このプラグインを最新バージョンはバグが発生しているので更新しないでください。
IP GEO BLOCKの基本的な設定
インストール後、必要な項目を設定していきます。変更箇所は一か所しかないので簡単です。
IPの追加抽出を設定する
番号1：IPアドレスを追加抽出する の項目に以下の文字を入力しましょう。
[HTTP_X_FORWARDED_FOR]↑[]を省いた文字を入力
この記述が訪問者IPを取得するための記述です。この設定ができれば訪問者のＩＰアドレスを取得してくれるようになります。
以上で設定は完了になります。あとは、爆速の速さを体感してください。
まとめ：Cloudflareを導入して早いブログにしよう！
この記事では、Cloudflareを導入手順やアドセンス収益の減少を抑える対策などについて解説していきました。
長い解説で大変だったと思いますが、お疲れさまでした。
これで、サイトは早くなるし、Google AdSenseは収益は下がらないしでいい事だらけですね。
時間はかかるとは思いますが、是非導入をお試しください。
Cloudflareと一緒にこちらのプラグインも導入するともっとブログが早くなるのでお試しください。
