Webサイト工事中です! 閲覧できますが不具合があるかもしれません

CloudflareのCache Everythingが最強だけど、色々やばすぎた話

CDNサービスでCloudflareという有名なサービスがあります。

FRONTL1NEのサーバーでも利用していますがこの度更なる速度向上を目指し、

【WordPress対応】「Cloudflare」で構築する「ずるいキャッシュ」方法 | karelie

を参考にPage RulesでCache Everythingの設定をしてみて、最強だった反面色々やばかったのでこの記事でまとめます。

ちなみに本サイト(FRONTL1NE)はWordPressで動いてます。

 

 

目次

Cache Everything (全てをキャッシュする)設定について

記事の最初の方で紹介した記事にも色々と書いてありますが、この設定をするとどう良かったか説明します。

あ、設定はめちゃくちゃ楽でした。

 

表示速度のスコアがカンストした

設定を反映させた後、PageSpeed Insightsで計測したらスコアが100点になりました。

実際の体感速度もめちゃくちゃ早い!

 

よかったことはこの速度向上に尽きる。

 

 

Cache Everythingでやばかったこと

WordPressの管理用ツールバー表示までキャッシュされ始めた

WordPressに管理ユーザーでログインしてるとサイトに管理用ツールバーが表示されます。

なんと、これもキャッシュされてログインしていないユーザーにも表示されるようになってしまいました。

これにより自分(FL1NE)にのみ表示されるはずのツールなどまで一般閲覧者に表示されてしまったりしまいました。

 

Google Analyticsにデータが送信されなくなった (カウントされなくなった)

この画像本日のPV数なのですが、明らかにおかしい動きをしてますね。
(オレンジが先週、青が今日)

上の理由と同じだと思ってますが、管理者等はカウントされないので来場者が管理者と誤認された可能性があります。

どう考えてもおかしかったので昼あたりにキャッシュ設定を直したらいつもと同じようなグラフになりました。

 

他にもやばかったものがたくさんあった気がしますが、特にやばかったのはこの二つです。

 

 

どうしたか

FRONTL1NEのサイトではとりあえずCache Everythingの設定は無効化しました。

静的なWebサイトあれば絶大な効果を発揮すると思います。

 

WordPressでもログインUIや編集UI、検索機能等がなく管理ツールバーを、

add_filter('show_admin_bar', '__return_false');

をfunctions.phpに追加するなどして非表示にすればちゃんと使えると思います。

 

 

じゃどうすればいいか

これをうまく解決する方法は2つほど考えられていて、

  1. Cloudflareの上位プラン(200ドル/月くらい)に入る
    – Cookieの状態によってキャッシュのバイパスができるようになる
  2. ログイン時にURLがhttps://frontl1ne.net/?is_login=trueみたいな風になるようにする。
    – これにより/?*とかでバイパスの設定ができるようになる

この2番目の奴ができればCloudflareの無料プランでも正しくキャッシュできそう。

 

 

終わりに

今回は解決できてないです。

そもそもFRONTL1NEのWebサイトはある程度早いんだよなぁ…

ただ最高を目指すためにこの設定は近いうちまた再挑戦したい。

Setup WordPress with Cloudflare (English Edition)

Setup WordPress with Cloudflare (English Edition)

Silva, Joni
117円(11/21 20:44時点)
発売日: 2014/04/23
Amazonの情報を掲載しています
WEB+DB PRESS Vol.109

WEB+DB PRESS Vol.109

佐藤 歩, 加藤 賢一, 原 一成, 加藤 圭佑, 大塚 健司, 磯部 有司, 村田 賢太, 末永 恭正, 久保田 祐史, 吉川 竜太, 牧 大輔, ytnobody(わいとん), 前田 雅央, 浜田 真成, 竹馬 光太郎, 池田 拓司, はまちや2, 竹原, 原田 裕介, 西立野 翔磨, 田中 孝明
1,628円(11/21 20:44時点)
Amazonの情報を掲載しています

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

SESSIONS や Tokyo Demo Fest 等のイベントを主催してる人
各種最適化やIT・インフラ・3DCGが好き
◆YouTube: http://youtube.com/@FL1NE_
◆X(Twitter): @FL1NE

コメント

コメント一覧 (1件)

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次