こんにちは！
川口のWEB屋さんTEDASKのSeitoです。
前回「CloudflareでWordPressの表示速度を上げる対策方法」で、CloudflareとWordPressを接続してページ表示速度の改善する方法を紹介しました。
記事を見ながら設定自体は上手く行った人もいると思いますが、思った様なスピード改善ができなかったという人もひょっとしたらいるかも知れません。
CloudflareはデータをキャッシュしてCDNという仕組みでデータを送信しているのですが、キャッシュがそもそも読み込めているのかなどがCloudflareのダッシュボードだけでは分かりません。
今回は、実際にキャッシュデータが読み込まれているのかや、うまく取得できていない場合の対応方法を説明したいと思います。
Cloudflareの導入方法については以下の記事をご覧ください。
デベロッパーツールでキャッシュの状況を確認する
まず、現在Cloudflareからのデータを取得できているかを確認する必要があるので、Google Chromeのブラウザを使って状況を確認しましょう。
Cloudflareを接続しているサイトを表示して、画面上で「右クリック」→「検証」をクリックします。
もしツールバーが右に表示されてしまったら見にくいので、下の方にくるようにします。「三つ●のボタン」をクリックして、「下向きアイコン」をクリックします。
ツールバーが下に来たら今度は「Network」をクリックします。
この状態になったら、ページを更新します。
そうすると、ツールバーにページで読み込まれているデータが次々に表示されるのが分かると思います。
ページの読み込みが終わったら、「Name」のところにカーソルを合わせて一番上までスクロールします。
もしツールバーが見にくいようでしたら、上に広げても大丈夫です。
「Name」の一番上の「maycho.com」はみなさんが見ているWEBサイトのURLになっていると思いますので、それをクリックします。
すると右側に「Headers」のhttpヘッダーで読み込まれたデータが表示されます。
そして「Cf-」となっているのがCloudflareから取得したデータですので、もしCloudflareの接続が上手く行っていればこの「Cf-」の項目が出てきます。
この中で重要なのが「Cf-Cache-Status:」でもし「HIT」となっていればCloudflareでキャッシュされたデータが表示されていることになるので、そのデータに関しては問題ない、という事になります。
画像の「DYNAMIC」というのは、Cloudflareではなく元のレンタルサーバーからデータを取得しているということになります。
本来はこの「DYNAMIC」を「HIT」にしたいわけですが、厳密には設定できるものではなく、サーバーの状況や接続している環境によって変わってくるのでその時々でステータスは変わります。
しかしながらファイルによっては「MISS」ステータスもひょっとするとあるかも知れません。
もしMISSステータスが多い場合は、ある程度対策ができるので、WordPressプラグインのCloudflareを作成した方のアドバイスを元に、今回説明していきます。
CloudflareでMISSステータスがでた場合の対処方法
以下の記事はCloudflareプラグインを利用していて、「MISS」ステータスが表示されてしまう問題について質問している記事です。
今回の記事はこの部分を参考にしています。
Tired cache（階層型キャッシュ）の有効化
先ず「Tired cache（階層型キャッシュ）の有効化」を設定します。
Cloudflareのダッシュボードにログイン後、左メニューの「Caching」→「階層型キャッシュ」をクリックします。
画面が表示されたら下にスクロールすると、「階層型キャッシュ トポロジー」という項目があるので、「無効」から「階層型キャッシュ トポロジースマート階層型キャッシュ トポロジー」に切り換えます。
切り換えれば自動的に保存されます。
キャッシュページルールの確認
次にCloudflare上でキャッシュのページルールが複雑に設定されていないかを確認します。
左メニューの「ルール」→「ページルール」をクリックします。
ページルールの赤枠の部分にもし設定項目があれば、その設定が適切かを確認します。
このルールではキャッシュしないページなどを設定していることが多いので、その設定が意図しないページまで設定されていないかを確認しましょう。
ブラウザ キャッシュ TTLの設定
最後にブラウザ キャッシュ TTLの設定をします。
ブラウザ キャッシュ TTL（Time To Live）とはキャッシュしたファイルを利用する時間の間隔（キャッシュファイルを残しておく時間の間隔）です。
キャッシュする時間が短ければ、その都度元のサーバーからデータを取得するタイミングが増えるため、DYNAMICの回数が増えてしまう可能性があります。
もし時間が長ければ、そのままキャッシュを使い続けるのでHITになりやすいです。
ただし、長すぎても問題で例えばブログの記事の文字を更新したのになかなか新しいテキストに更新されなかったり、サイト全体でも新しいページが反映されないということがが起こります。（ブログを更新した際に、手動でキャッシュファイルを削除する方法ももちろんありますが）
アドバイスでは、「既存ヘッダーを優先」にすることをおすすめしているので、この設定をしていきます。
左メニューの「Caching」→「構成」をクリックします。
「ブラウザキャッシュTTL」の項目があるので「既存ヘッダーを優先」を選択します。
選択すれば保存されます。
以上で設定は完了です。
数時間、数日様子をみる
設定が完了したら直ぐに反映されるかというとそうではありません。
キャッシュはページにアクセスがあった初めてキャッシュが作成されますので、アクセスが少ないサイトではデータが溜まりにくく、DYNAMICやMISSになりやすい可能性があります。
そのため、数時間または数日おいてから状況を確認するようにしましょう。
こちらの画像は、さきほど「MISS」の例としてお見せしたJavaScriptファイルですが、2時間後に確認した際に「HIT」に切り替わりました。
このように時間をおかないとデータがキャッシュされませんので、時間をおいて確認するようにしましょう。
まとめ
今回はCloudflareと接続したにもかかわらず、あまりページ表示速度に変化が出なかったときの確認項目と対策について書いてみました。
スピード対策についてはサーバーのスペックに依存する場合が多く、ホームページの表示速度が体感として遅いなと感じる場合はレンタルサーバーの見直しもご検討ください。
以上、「Cloudflareで思った様なパフォーマンスがでないときの設定」でした！
WordPressやWEB技術、集客、ChatGPTなど最新技術に関する情報を毎週お届けする
メールマガジンを発行しています。
不定期でWordPressの脆弱性情報も配信していますので、
WEB担当者やWEBを学んでいる方などにオススメの無料メールマガジンです！
コメント