完全無料でサイト高速化にも効果あり！必ず設定したいCloudflareの5項目

プロキシをオンにする

CloudflareのDNS画面で、DNSレコードの横にあるクラウド（雲）のマークが、Cloudflareのプロキシマークです。これをオンにしないとCloudflareのCDNを利用できません。CloudflareをCDNとして使う場合は、必ずオンにしましょう。

CDNがしっかりと効いているかを確認したければ、リソースのHTTPレスポンスを見ればわかります。

GUIで確認する場合は、ブラウザの開発者ツールから「ネットワーク」タブを開いて、画像などCloudflareのCDN対象ファイルのレスポンスヘッダを確認します。CloudflareのCDNが効いていて、そのファイルのロードが2回目以降であれば、

cf-cache-status:HIT

というレコードがあるはずです。

キャッシュが効いているかのチェックをしてくれるサイトもあるので、そちらを使うのも良いでしょう。

CF-Cache-Status

このサイトでチェックするの注意点は、初回は「Miss（キャッシュされてない）」となることがありますが、これはCloudflareの複数あるエッジサーバーのうち、この「CF-Cache-Status」のサーバーに近いエッジサーバーにだけないという可能性もあります。

Missと出た場合は念の為もう一度チェックしてみましょう。きちんとした設定がされていれば、2回目は「Hit」になるはずです。

ブラウザキャッシュ期間を長く（1年）する

CloudflareのCDNキャッシュ期間はデフォルトで4時間となっています。これだと、1日に数回キャッシュを更新することになってしまうので、最大値である「1年」にするのが良いでしょう。

Cloudflareのキャッシュ期間設定は、Cloudflareの上部メニューにある「Cache」ページに入って「Browser Cache Expiration」という項目から設定可能です。

注意点としては、CSSなど頻繁に更新するファイル（例：main.cssなど）で、ファイル名にハッシュ値（例：main_fBOuweRojwN82z7EY4v-sVsMwU_P_vZSaU3fmyho6Do.cssなど）をいれていないケースでは、ブラウザのキャッシュが強力に効いてしまうので、バージョン名などをつけるなど対応が必要です。

SSLタイプは「Full」にする

CloudflareのSSLには3つのモードがあります。詳しい説明はこちらのページが詳しいですが、基本的には「Full」にしておくのがベターです。

というのも、サーバー側がHTTP/2に対応している場合は、Cloudflareとサーバーの通信もSSLにすることで、HTTP/2通信になってHTTPヘッダーなどを高速かつ省エネで通信できるため、ページの高速表示に寄与してくれます。

現在は、多くのレンタルサーバーでLet's Encryptでの無料SSLが付いているため標準でSSL化されているケースも多いので、CloudflareのSSLタイプを「Full」にしておいても問題ないでしょう。

SSLに対応していないサイトをCloudflare経由でSSL化している場合は、「Full」にすると表示ができなくなることがあるので、注意が必要です。

CloudflareのSSL証明書を使う

Cloudflareは実はSSL証明書を無料で発行しています。上部メニューの「SSL」メニューから「Origin Certificates」タブを開くとSSL証明書を発行できます。

この証明書のメリットは最大で15年間有効というところです。注意点は、「Cloudflareとサーバー間でしか使えない」というところですが、Cloudflareのプロキシを使う場合は問題ないので、導入しない手はありません。

設定方法など、詳しくは下記の記事をどうぞ。

無料で15年分！Cloudflareの無料SSL証明書を使ってみる

静的コンテンツのビルド・デプロイ。・ホスティングサービスNetlifyが、ビルド時間の制限・課金を新設しました。課金は2019年12月課金サイクルからスタートとのことです。

ページルールを確認する

Cloudflareがキャッシュファイルには種類があって、どんなファイルでもキャッシュしてくれるわけではありません。

具体的には、下記のファイルがキャッシュ対象です。

bmp
tif/tiff
pict
jpg/jpeg
ps
eps
gif
svg
svgz
ico
png
webp
css
js
ejs
doc
docx
xls
xlsx
csv
ppt
pptx
pdf
ttf
woff
woff2
eot
otf
swf
pls
mid/midi
class
jar

jpgやpngなどの画像ファイル、cssやjsなどのサイト構成ファイルも対象ですが、例えば、HTMLファイルやSPAサイトなどで多用するjsonファイルなどは対象になっていません。

サイトの構成にもよりますが、HTMLファイルやjsonファイルをキャッシュできる場合は、キャッシュする方が高速化できます。

Cloudflareのキャッシュ対象にするには、Cloudflareの上部メニューの「Page Rule」から、マッチする方式を設定します。

ページルールについては公式ページで詳しい設定が確認できます。

すべてのユーザーに必須のPage Rule

注意点は、ページルールは「ドメインあたり3つまで無料」で、それ以上は5つあたり月額5ドルになります。

Cloudflareで必ず設定したい5項目をみてきました。

どれも無料で使えて高速化に寄与してくれるものなので、ぜひ試してみてください。