SWELLで特化サイト作ってみた

mixhostのCloudflare設定【簡単・無料・高速化】の3拍子

WordPressのCloudflare設定

第9回目の講座は「Cloudflareの設定」です。

Cloudflareとは?

WEBサイトの高速化に役立つサービスの1つです。

設定も楽ですし、無料で使えるのでまだの方はこの機会に導入してみましょう。

補足

解説に使用した画像は日本語に翻訳しています。

Cloudflareの登録方法

Cloudflare登録ページへ

STEP1

クラウドフレアトップページ

サインアップ」をクリック


STEP2

クラウドフレアアカウント作成
  • Eメール」と「パスワード」を入力
  • チェックボックス」のチェックを外す
  • アカウントを作成する」をクリック

STEP3

クラウドフレアにサイトを追加

ドメインを入力して「サイトを追加」をクリック


STEP4

クラウドフレアDNSレコード照会

次へ」をクリック


STEP5

クラウドフレアプランを選択

無料」をクリック→「計画を確認する」をクリック


STEP6

クラウドフレア計画の確認

確認」をクリック


STEP7

クラウドフレアDNSクエリ結果

持続する」をクリック


STEP8

クラウドフレアネームサーバーをコピー

2つのネームサーバーをコピー」→「持続する」をクリック

Cloudflareのページは開いたまま、別タブで現在利用しているドメイン管理サイトへアクセスします。

補足

当WordPress講座では「mixhost」を使用しているので、そちらで解説します。

Cloudflareのネームサーバーに変更する

STEP1

mixhostログイン画面へ

ミックスホストログインページ

メールアドレス」と「パスワード」を入力して「ログイン」をクリック


STEP2

ミックスホストマイドメイン

赤枠の「マイドメイン」をクリック

ミックスホストネームサーバー編集

ネームサーバーを編集」をクリック


STEP3

ミックスホストネームサーバー変更

手順
  1. カスタムネームサーバーを使用(下記に入力して下さい)」を選択
  2. ネームサーバー1と2に、先ほどコピーした「Cloudflareのネームサーバー」を貼り付ける
  3. ネームサーバーを変更」をクリック
補足

ネームサーバー3以降にも入力されてる場合は、すべて削除してください。

ミックスホストネームサーバー変更完了

変更が正常に保存されました!」と表示されればOK

注意:ネームサーバーが切り替わるまで最大24時間ほどかかる場合がありますが、気にせず作業を進めてください。

CloudflareのAPIキーを取得

MixHost
」にはプラグイン「LiteSpeed Cache」があるので、そちらも合わせて設定しましょう。

開いた状態の「Cloudflare」のページに戻る

STEP1

クラウドフレアAPIキーを取得

右側にある「APIキーを取得する」をクリック


STEP2

クラウドフレアグローバルAPIキーを見る

下までスクロールして「グローバルAPIキー」の「見る」をクリック


STEP3

クラウドフレアAPIキー取得のパスワード
  • Cloudflare」に登録したパスワードを入力
  • チェックボックス」をクリック
  • 見る」をクリック
クラウドフレアAPIキー確認

あなたのAPIキー」をコピー

Cloudflareのページは開いたまま、別タブでWordPressの管理画面を開いてください。

CloudflareのAPIキーをLiteSpeed Cacheに設定

STEP1

LiteSpeed Cache設定

管理画面の「LiteSpeed Cache」にマウスを乗せ「設定」をクリック

STEP2

LiteSpeed Cache CDN設定

CDN」をクリック

一番下の「Cloudflare API」までスクロール

LiteSpeed Cache CloudflareAPI設定

手順
  1. Cloudflare APIを「オン」にする
  2. メールアドレス:「Cloudflare」と入力
  3. グローバルAPIキー:先ほどコピーした「APIキー」を貼り付け
  4. ドメイン:自分のドメインを入力
  5. 変更を保存」をクリック

Cloudflareの基本設定

最後に「Cloudflare設定」を1カ所だけ変更します。

開いた状態の「Cloudflare」のページへ戻る。

クラウドフレアトップへ戻る

Cloudflareアイコン」をクリックしてホーム画面へ戻る

今回「設定したドメイン」を選択

クラウドフレア速度設定

真ん中らへんにある「速度」のアイコンをクリック

自動縮小の

  • 「JavaScript」
  • 「CSS」
  • 「HTML」

にチェックする。

これでCloudflareの設定はすべて完了です。

その他にも設定できる項目はありますが、基本そのままでOKです。

ただし、次の「ブラウザキャッシュの有効期限」だけは重要なので覚えておきましょう。

Cloudflareのブラウザキャッシュの有効期限について

クラウドフレアキャッシング設定

Cloudflare設定の「キャッシング」をクリック

下にスクロールすると「ブラウザキャッシュの有効期限」が出てくるので、この部分について解説しますね。

Cloudflareブラウザキャッシュの有効期限

有効期限は「30分〜1年」の間で指定できます。デフォルトは「4時間」となっています。

このキャッシュ期限は用途に合わせて変更したいので、キャッシュの仕組みを理解しておきましょう。

ブラウザキャッシュの仕組み

上記の通り「リピーター向け」の機能です。

指定した期限内に同じページを見にきた人は、保存されたデータを閲覧する=読み込みがなくなり、サイト表示が高速化される仕組みです。

で、ここからが重要

例えばサイトを始めたばかりの頃は、カスタマイズやデザインをちょくちょく変更しますよね。

そんな状態の時に、キャッシュの有効期限を1年とかにしてしまうと、ユーザー側にはいつまでも古いページが表示される可能性が高いのです。

もちろんキャッシュクリアすれば、最新データを読み込めるわけですが、一般ユーザーはそこまでしないので、こちらである程度コントロールしましょう。

なので最初は「1〜4時間程度」に指定して、サイトが完成したら「5日〜16日」くらいに指定するのがおすすめです。

その後は大幅に変更する時だけ「有効期限を短めに変更する→戻す」ってことだけ覚えておいてください。

以上簡単ですが「ブラウザキャッシュの有効期限」について解説しました。

その他の設定は下手にイジらない方がいいですね。もしガッツリ勉強したい方は、こちらのサイトが参考になります。cloudflare 設定 – 高速化できる設定方法 | パソコン生活サポートPasonal

お疲れ様でした。

次回予告

次回はWordPressの「ローカル環境」の作成方法を解説します。

本来は開発者向けのものですが、ローカル環境を構築することで、本サイトをイジらず「カスタマイズの確認」や「デザイン変更」などができるのでいろいろと便利です。

カゲサイーカゲオ

気づけばもう9回目の講座でしたね。

最初からこの講座に沿って構築している人はずいぶん楽しくなってきたのではないでしょうか。

もう十分検索に強いWordPressを構築できているので、あとはSEOを学べばバッチリですね。

コメントはお気軽にどうぞ

\最強のSEO対策ツール・Rank Trackerを解説/