お知らせ:お問い合わせにZendesk Support を導入しました

簡単無料:MixhostサーバーならCloudflareでWordPress高速最適化【5分でCDN入門】

この記事は 7 分で読めます

WordPress で1番最速かつ簡単に運用ができる、初心者にも上級者にもオススメのサーバーMixhostでCDNを設定しようという記事です。

CDNという仕組みを使って、そのままでも早いサーバーをさらに高速化する中級者向けの記事ですが、慣れれば5分もかからないため、初心者の方が次のチャレンジに取り組むのにはちょうど良いレベルのWordPress高速化の取り組みです。

この記事の流れ

  • LiteSpeed Cache プラグインから5分で設定できる
  • Cloudflareというサービスで無料でCDNを利用できる
  • 実は初心者でも簡単
  • 効果絶大なのでやるべき

CDNって何?っていう方のために、超ざっくりでCDNの仕組みをまずお伝えします。
続いて、今回利用するCDNサービスCloudflareの登録方法を説明。
最後にLiteSpeed Cache プラグイン側の設定を説明します。

まず:CDNってどういう仕組み?

CDNというのは「Content Delivery Network」の略らしいです。

ざっくりいうと

Webサーバーに格納されている画像やcssなど他のサーバーに預けておいて、色々なサーバーからデータを配信できちゃう仕組みです。

キャッシュ(cache)という仕組みを使っています。

うーん、、、説明するほどややこしくなるので、超簡単にわかりやすく図で説明します。

CDNを図解で説明

CDNを図解で説明

通常のホームページでは、利用しているサーバーからアクセスする人に直接データを配信しています。これでも問題ないのですが、サーバーから直接配信しているので、サーバーの中の人はちょっと大変。

サーバーからのデータ配信を手助けしてくれるのがCDNの存在。
はい、こちらが今回の主役。

無料CDNサービスのCloudflareのクラウドフレアくんです

じゃじゃーん!無料CDNサービスのCloudflareのクラウドフレアくんです

クラウドフレアくん

はーい、ぼくがクラウドフレアくんだよ。

Mixhost のサーバーは充分早いのでその実力はぼくも知っているよ。

でも、WordPressって、テーマによって表示速度がイマイチだったりするよね?

そういうとき、ぼくがサクっと表示速度を早くするお手伝いしてるってわけ。

どうやってるかは画像を見てもらえればわかるよ。

Cloudflareくんの役割

こっちからこうして

こっちからこうして、こう!

世界中のネットワークからコンテンツを配信してくれる凄いやつ!

世界中のネットワークからコンテンツを配信してくれる凄いやつ!

これがCDNサービスのCloudflareくんの役割です。

しかも、無料で使えるのが凄いところ。

LiteSpeed Cache プラグインを使えば、Cloudflareサービスの連携も簡単。

参考 Webパフォーマンスとセキュリティを追求する企業Cloudflare クラウドフレア

クラウドフレアくん

そうそう、こんな感じ!
そっちのサーバーから、世界中のサーバーにぼくがこうやってこう!って感じでいろんな所に置いていって、そっちのサーバーとこっちのサーバーと分散して届けてるってわけ。

LiteSpeed Cache プラグイン じゃなくても、クラウドフレア専用のWordPressプラグインもあるよ。
ま、LiteSpeed Cache が使えるMixhostがいっちゃん相性がいいよ!

なんてったって世界中でみんな使ってくれてるからね!
日本だけだよ、使ってくれないの。
この記事を読んでくれる君は、もちろん使ってくれるよね?

CDNというと、ちょっと前まではクソややっこしい専門知識が必要だったのですが、クラウドフレアくんとMixhost サーバーのおかげで簡単に扱えるようになりました。ようやく日本でも少しずつ広まってきたかな?という感じですね。

では、さっそく登録から設定まで、全キャプチャ付きで解説しますね。

サービス登録から、設定方法まで全ステップを図解で解説

サービス登録から実際の設定完了まで、5分で終わりますので全ステップを画像でご紹介しますが、その前に。

クラウドフレアくん

うちの公式ホームページにも、登録ステップの動画作ってるのあるから、それ先に見といてもらうと、イメージしやすいから紹介するね!

そんなに難しくないから最後までやってみてね!ガンバだよ!
You Can Do It !だよ!


https://www.cloudflare.com/ja-jp/ より引用


はーい、では準備はよろしいでしょうか?

1.Cloudflareのサービス登録ステップ

作業の前に
今回の記事はMixhostサーバーLiteSpeedCacheプラグインSANGOテーマを利用しています。機能が重複するプラグインを適用されている場合や、ご利用のサーバーの種類、テーマなどご利用の環境が違う場合は同じ結果が得られるとは限らないことにご注意ください。キャッシュ機能は一時的なデータを保存することで高速表示を可能にする機能です。そのため、設定中や設定反映直後はキャッシュ機能によって設定結果が即反映されないといったケースもありますので、その場合はWordPress側のキャッシュをクリアする、Cloudflare側のキャッシュをパージするなどの作業が必要です。
不具合が生じた場合もすぐに元に戻せるように注意しながら作業してください。

TOPページからサービス登録(サインアップ)

TOPページからサービス登録(サインアップ)

まずは、TOPページからサービス登録(サインアップ)しましょう。

  • メールアドレス
  • パスワード

これで登録完了です。

ホームページのURL登録

利用する WordPress のホームページのURLを入力します。ホームページのURL登録

Nextボタンをクリック

ホームページURLが問題なければ自動で画面が変わります。以下のような画面になるのでそのままNextボタンをクリック。Nextボタンをクリック

プラン選択

FREEをチェックしてConfirm Plan ボタンをクリック。プラン選択

プラン確認画面

これでOK?みたいな画面なので、Confirmボタンで次に進みます。プラン確認画面

サーバーのDNSレコード確認画面

ちょっとややこしそうな画面に変わるのですが、安心してください。何も変更しなくてOK。そのままContinueボタンで次へ。サーバーのDNSレコード確認画面

ドメインのネームサーバーが表示される画面

ドメインのネームサーバーが表示される画面

ここ重要です

この画面に表示されている赤枠の情報を、ドメインのネームサーバー設定で書き換えてねという画面です。

この二つのネームサーバーをコピーして、取得しているドメイン管理会社の管理画面でこのネームサーバーに書き換えてる必要があります。

この画面まで来たら、一旦この画面は置いておいて次のステップへ。

ドメインのネームサーバーの設定方法を解説していきますね。

2.ドメイン側のネームサーバーを書き換える

クラウドフレアくん

はーい、ここまで来たら、次は一旦ドメイン側の設定になるよ。

だいじょうぶかな?ついてきてくれてる?

ドメインのネームサーバーの設定も簡単だから、ガンバだよ!

You Can Do It !だよ!

当サイトはドメインをバリュードメインで管理しているので、バリュードメイン側の設定を参考に紹介します。

お使いのドメイン会社によって画面は違うと思いますが、設定する項目は同じ。

ドメイン側の設定
ドメインのネームサーバーをCloudflareの指定するネームサーバーに変更するだけなので、そんなに難しいものではないです。

では、バリュードメインでのCloudflareが指定するネームサーバーに変更する方法をご紹介しましょう。

バリュードメインでネームサーバーを変更する

バリュードメインのコントロールパネルにログインしたら。

  1. ドメイン > ドメイン設定の変更 と進んで、該当のドメインを選択
  2. ネームサーバーをクリック

バリュードメインでネームサーバーを変更する

ネームサーバーをCloudflare 指定のものに書き換える

ネームサーバーをCloudflare 指定のものに書き換える

保存したら、ふたたびCloudflareの画面へ戻りましょう。

ふたたびCloudflare画面へ戻り

ふたたびCloudflare画面へ戻り

ふたたびCloudflare の画面に戻り、Continueボタンをクリック。

これで一旦登録は完了

この画面になれば、一旦セットアップは完了です。

続いて、WordPress側の設定を続けてしていきます。

3.Cloudflare Global API 取得

続いてWordPress側へCloudflareの設定に必要なCloudflare Global APIを取得していきます。

必要なステップは以下の通り。

  1. Cloudflare Global API 取得のためのメールアドレス認証
  2. Cloudflare Global APIをコピー
  3. LiteSpeed Cache プラグインへ 設定入力

ここまできたら、あと2分程度で設定完了です。

Cloudflare Global API 取得のためのメールアドレス認証

Cloudflare Global API 取得のためのメールアドレス認証さきほどの画面の下の方にGet your API key というリンクがあるのでクリック。

メールアドレスでの認証

次の画面ではメールアドレスの認証をしてねみたいな画面に変わるのですが、今回の説明では既に登録が終わっているためその画面のキャプチャは飛ばします。
メールでの認証をされていない方は、登録したメールアドレス宛にCloudflare からメールが届いていますので、Verify(承認)リンクをクリックしてください。

メールアドレスの承認が完了したら、以下のページから下の方にあるGlobal API key の欄のVewボタンをクリック。メールアドレスの承認が完了したら、以下のページから下の方にあるGlobal API key の欄のVewボタンをクリック。

ログイン画面が表示される

こんな画面になるので、ログインメールアドレスとパスワードを入れてください
私はロボットじゃありませんも忘れずチェック。
ログイン画面が表示される

Global API keyが表示

されるんで、コピーしましょう。Global API keyが表示

4.LiteSpeed Cache プラグインへ設定

ここまできたら、WordPress側のLiteSpeed Cache プラグインの設定になります。

クラウドフレアくん

このステップで完了だよ!あとすこしだからガンバだよ!

You Can Do it! だよ!

WordPressの管理画面にから、LiteSpeed Cache プラグイン > 設定 > [8] CDN の下の方にあるCloudflare API に以下を入力。

  1. Cloudflareのログインメールアドレス
  2. Cloudflare Global API key
  3. ドメイン
4.LiteSpeed Cache プラグインへ設定

うまく設定ができれば、ドメインの枠が緑色に変わります

こうなってればOK。

クラウドフレアくん

はーい、これで設定はおわりー。頑張ったね!エライ!

あとね、最後にこれだけやっとくとさらにイイ感じになるから、もうちょっとガンバだよ!

You Can Do IT!!!!!だよ!

最後に:ここだけ変えておこう!

Cloudflare の Speed

Cloudflare に戻って、Speed の 画面を見ましょう。以下の二つの項目については、AdSenseなどの外部JavaScriptを利用しない場合と、外部JavaScriptを利用する場合での設定方法をそれぞれ参考にしてください。

  • Auto Minify のJavaScript CSS HTML にチェック
  • Rocket Loader™ をON

Cloudflare の Speed

この場合は、Auto Minify の チェックRocket Loader™ をONにすると正常に外部JavaScriptを読み込んでくれない場合がます。当方の場合も AdSense と Zendesk のお問い合わせウィジェットが表示されないタイミングがあり、この二つの項目は外しました。

また、HTMLについてもLiteSpeed Cacheプラグイン側で設定できるため、現在はCloudflare側の設定ははずしています。

Caching のBrowser Cache Expiration

Browser Cache Expirationという項目でキャッシュの更新時間を設定できるんですが、WordPressのカスタマイズなどの作業途中であれば短めにしておくと良いかも

あまり触ることが無い状態だったら、4時間くらいにしましょう。

Caching のBrowser Cache Expiration

これで終わり 慣れたら5分もかかりません

クラウドフレアくん

おめでとう!ここまできたら完了だよ!

えらいねー!よくできたよー!ガンバったね!

最初から I Know You Can Make it!だと思ってたからね!

という感じで、MixhostとCloudflareでWordPress高速最適化する設定のすべてを解説しました。

慣れれば5分もかからず設定できますのでぜひお試しください。

Cloudflare の設定が完了してから、1日くらいで効果がどんどん出てくるようです。

Cloudflare の設定が完了してから、1日くらいで効果がどんどん出てくるようです。

こんな感じで、Cloudflare 側のアナリティクスも確認できますが、適用すると半分以上Cloudflare側のcacheが活躍してくれているのがわかりますね。

当サイトで利用させてもらっているSANGOテーマの速度最適化にもかなり活躍してくれています。

クラウドフレアくん

ここまでやってくれれば、あとはぼくの仕事さ!

そっちからこっちに、こうやってこう!ってどんどん世界中のネットワークに君の素敵なコンテンツを知らせておくからね!

これからもSANGOテーマの高速化のネタやMixhostサーバーやLiteSpeed Cache プラグインなどを活用したWordPress高速化の新しいネタがあればどんどん更新していきますね。

記事に使用している各企業のロゴやサービスのロゴ等の著作権は所有企業に属します。

参考リンク

Mixhost ミックスホスト

Cloudflare

バリュードメイン

最後に:Cloudflareを使うとメールの送受信が上手くいかない!というケースがあるようです。Mixhostでの事例ですが解決する方法をこちらで解説しています。
Cloudflare を利用するとメールの送受信ができない場合の対処法Cloudflare を利用するとメールの送受信ができない場合の対処法

クラウドフレアくん

はーい、メール送受信できない場合も簡単に解決できるから、うまくいかない時はその記事も見ておいてね!

 

最後に関連記事を改めてまとめます

Cloudflare で訪問者IPを簡単に取得する方法|AdSense対策Cloudflare で訪問者IPを簡単に取得する方法|WordPress高速化とAdSense対策Cloudflare を利用するとメールの送受信ができない場合の対処法Cloudflare を利用するとメールの送受信ができない場合の対処法WordPress高速化2019年版:たった1つのプラグインとCDNで最速WordPress高速化2019年版:たった1つのプラグインとCDNで簡単最速化簡単無料:MixhostサーバーならCloudflareでWordPress高速最適化【5分でCDN入門】SANGOテーマ + Mixhost で最速表示の最適解を見つけましたMixhost + LiteSpeed Cache + CloudflareCDNで最速の設定を全画像付で解説【SANGO爆速】爆速街道:WordPress + Mixhostで表示速度を高速化簡単チューニングワードプレスオススメ爆速サーバーを紹介しますWordPress高速化:Web制作者がクライアントに教えたがらない最速サーバーを教えます

コメントを残す

メールアドレスが公開されることはありません。