第９回目の講座は「Cloudflareの設定」です。
WEBサイトの高速化に役立つサービスの1つです。
設定も楽ですし、無料で使えるのでまだの方はこの機会に導入してみましょう。
解説に使用した画像は日本語に翻訳しています。
目次・読みたい所へタップできます
Cloudflareの登録方法
STEP1
「サインアップ」をクリック
STEP2
- 「Eメール」と「パスワード」を入力
- ↓
- 「チェックボックス」のチェックを外す
- ↓
- 「アカウントを作成する」をクリック
STEP3
ドメインを入力して「サイトを追加」をクリック
STEP4
「次へ」をクリック
STEP5
「無料」をクリック→「計画を確認する」をクリック
STEP6
「確認」をクリック
STEP7
「持続する」をクリック
STEP8
「2つのネームサーバーをコピー」→「持続する」をクリック
Cloudflareのページは開いたまま、別タブで現在利用しているドメイン管理サイトへアクセスします。
当WordPress講座では「mixhost」を使用しているので、そちらで解説します。
Cloudflareのネームサーバーに変更する
STEP1
「メールアドレス」と「パスワード」を入力して「ログイン」をクリック
STEP2
赤枠の「マイドメイン」をクリック
「ネームサーバーを編集」をクリック
STEP3
- 「カスタムネームサーバーを使用（下記に入力して下さい）」を選択
- ネームサーバー1と2に、先ほどコピーした「Cloudflareのネームサーバー」を貼り付ける
- 「ネームサーバーを変更」をクリック
ネームサーバー3以降にも入力されてる場合は、すべて削除してください。
「変更が正常に保存されました！」と表示されればOK
注意：ネームサーバーが切り替わるまで最大24時間ほどかかる場合がありますが、気にせず作業を進めてください。
CloudflareのAPIキーを取得
「MixHost
」にはプラグイン「LiteSpeed Cache」があるので、そちらも合わせて設定しましょう。
開いた状態の「Cloudflare」のページに戻る
STEP1
右側にある「APIキーを取得する」をクリック
STEP2
下までスクロールして「グローバルAPIキー」の「見る」をクリック
STEP3
- 「Cloudflare」に登録したパスワードを入力
- ↓
- 「チェックボックス」をクリック
- ↓
- 「見る」をクリック
「あなたのAPIキー」をコピー
Cloudflareのページは開いたまま、別タブでWordPressの管理画面を開いてください。
CloudflareのAPIキーをLiteSpeed Cacheに設定
STEP1
管理画面の「LiteSpeed Cache」にマウスを乗せ「設定」をクリック
STEP2
「CDN」をクリック
一番下の「Cloudflare API」までスクロール
- Cloudflare APIを「オン」にする
- メールアドレス：「Cloudflare」と入力
- グローバルAPIキー：先ほどコピーした「APIキー」を貼り付け
- ドメイン：自分のドメインを入力
- 「変更を保存」をクリック
Cloudflareの基本設定
最後に「Cloudflare設定」を1カ所だけ変更します。
開いた状態の「Cloudflare」のページへ戻る。
「Cloudflareアイコン」をクリックしてホーム画面へ戻る
↓
今回「設定したドメイン」を選択
真ん中らへんにある「速度」のアイコンをクリック
自動縮小の
- 「JavaScript」
- 「CSS」
- 「HTML」
にチェックする。
これでCloudflareの設定はすべて完了です。
その他にも設定できる項目はありますが、基本そのままでOKです。
ただし、次の「ブラウザキャッシュの有効期限」だけは重要なので覚えておきましょう。
Cloudflareのブラウザキャッシュの有効期限について
Cloudflare設定の「キャッシング」をクリック
下にスクロールすると「ブラウザキャッシュの有効期限」が出てくるので、この部分について解説しますね。
有効期限は「30分〜1年」の間で指定できます。デフォルトは「4時間」となっています。
このキャッシュ期限は用途に合わせて変更したいので、キャッシュの仕組みを理解しておきましょう。
上記の通り「リピーター向け」の機能です。
指定した期限内に同じページを見にきた人は、保存されたデータを閲覧する＝読み込みがなくなり、サイト表示が高速化される仕組みです。
で、ここからが重要
例えばサイトを始めたばかりの頃は、カスタマイズやデザインをちょくちょく変更しますよね。
そんな状態の時に、キャッシュの有効期限を1年とかにしてしまうと、ユーザー側にはいつまでも古いページが表示される可能性が高いのです。
もちろんキャッシュクリアすれば、最新データを読み込めるわけですが、一般ユーザーはそこまでしないので、こちらである程度コントロールしましょう。
なので最初は「1〜4時間程度」に指定して、サイトが完成したら「5日〜16日」くらいに指定するのがおすすめです。
その後は大幅に変更する時だけ「有効期限を短めに変更する→戻す」ってことだけ覚えておいてください。
以上簡単ですが「ブラウザキャッシュの有効期限」について解説しました。
その他の設定は下手にイジらない方がいいですね。もしガッツリ勉強したい方は、こちらのサイトが参考になります。「cloudflare 設定 – 高速化できる設定方法 | パソコン生活サポートPasonal」
お疲れ様でした。
次回予告
次回はWordPressの「ローカル環境」の作成方法を解説します。
本来は開発者向けのものですが、ローカル環境を構築することで、本サイトをイジらず「カスタマイズの確認」や「デザイン変更」などができるのでいろいろと便利です。
気づけばもう9回目の講座でしたね。
最初からこの講座に沿って構築している人はずいぶん楽しくなってきたのではないでしょうか。
もう十分検索に強いWordPressを構築できているので、あとはSEOを学べばバッチリですね。
