技術

当サイトで利用しているCloudflareをProプランにしてみました

Sakashita Yasunobu

Sakashita Yasunobu

— 5 min read
当サイトで利用しているCloudflareをProプランにしてみました
Photo by Max Böhme / Unsplash

当サイトではDNS/CDNにCloudflareを利用してます。このドメインsakashita.pageでオンラインショップも立ち上げたこともありウェブページの読み込みや画像に関してお手軽に最適化したいなあと考えたのがきっかけです。

CloudflareのProプランは個人向けのプランだと思うのですが、調べてみても使っている人が見つからないんですよね。海外ではRedditなんかにそこそこいるようですが、日本で使っているユーザーさんのブログ記事なんかを見つけられませんでした。あるんでしょうが、参考にしようと検索しても引っ掛かりませんでした。せっかくなので、人柱といいますか、誰かの参考になればと思い、利用した記録を残しておきます。

環境について

当サイトはGhost(Pro)を利用しています。Ghost(Pro)はfastlyのCDNを利用していますし、そこにCloudflareのCDNも二重にかかっている状態です（たぶん）。そもそもGhostが速いこともあり、速度的な不満は特にありませんでした。画像の読み込みもテーマのほうで遅延読み込みをかけていますし、Ghostが自動的にオリジナル画像のほかにリサイズしたものを生成しています。

問題は今回作成したECショップです。こちらはShopifyのサービスであり、バックではWordPressが動いています。ShopifyはCloudflareと提携しているのでCDNは自動的に利用されている状況だと思われます。問題はキャッシュがされていないページの読み込み、つまり（Cloudflareのいうところの）オリジンへのアクセスがまあまあ遅いということです。ECショップでは画像が多く使われるうえに、カートなど管理でまあまあリソースが多いです。そもそもおっそいWordPressの上に成り立っているシステムなので仕方ないといえば仕方ないのですが、かといってテーマをちまちま最適化するほど暇じゃありません。CloudflareのProプランではHTTP/2の並列読み込みが利用可能になります。これによって見た目上の速度が向上するという算段です。HTTP/3という規格もありますが、Firefoxがデフォルトでは対応していないなどまだまだ発展途上という感じでした。

Proプランについて

Cloudflareにはfreeプランがあります。Proプランでは何が使えるのかというと、実はたいしたことは使えるようになりません。

Proプラン概要 | 機能と料金設定
CloudflareのProプランは、基本的なセキュリティ機能とパフォーマンス機能を必要とするWebサイト、ブログ、スタートアップ企業向けです。Proプランの機能と料金設定の詳細をご確認ください。
Cloudflare

Proプランでできること（公式サイトから引用）

  1. 可逆圧縮と非可逆圧縮による画像最適化
    1. Polishを使って、メタデータを取り除き、可逆または非可逆の圧縮により画像から冗長バイトを削除して、画像サイズを縮小しましょう。
  3. モバイルへの画像配信を高速化
    1. Mirageを使って、Web訪問者のデバイスに応じて画像配信を加速しましょう。Mirageは、画面サイズと接続速度を自動検出し、画像配信を最適化します。
  5. 主要なサイトアセットを優先的に読み込み
    1. Enhanced HTTP/2 Prioritizationを使って、サイトリソース読み込みの優先順位を、Web訪問者のブラウザでなくお客様のサーバーで決定できるようにしましょう。
  7. CDNキャッシングの分析と改善
    1. 紛失、期限切れ、キャッシュ対象外といった理由でCloudflare CDNが使えないサイトアセットを把握しましょう。このデータを基に変更を行い、キャッシュされたリソースの数を増やしてサイト速度を上げましょう。
  9. WordPressプラグイン
    1. CDN、インテリジェントキャッシングなどに自動プラットフォーム最適化（APO）プラグインを使って、WordPressサイトを最適化しましょう。有効化すればすぐに使えます（最大300%の高速化を実現します）。
  11. Google検索のためのコンテンツプリフェッチ
    1. Largest Contentful Paint（LCP）など、有機的検索ランキング（SEO）の主要要因であるコアWebバイタルを改善しましょう。Automatic Signed Exchangeを使うと、Chromiumベースのブラウザを有効にして、Googleの検索結果ページでWebサイトをプリフェッチし、Webサイトを高速化することができます。

基本的には画像と通信の最適化を行うことでWebサイトが速く読み込めるようになり、おまけ程度にWordPressやGoogleの面白機能をつかえるよ～という感じです。

オプションについて

ネットワークの輻輳を避け、サイトの応答速度を爆速にするArgoと、大量のアクセスを複数のサーバーで裁くときに使うLoad Balancerをオプションにつけることができますが、大したサイトではありませんので、オプションはつけません。こういった特殊ユーザーのオプションは別に用意されているあたりがCloudflareのいいところだと思います。

さて、Proプランの魅力ですが、Freeプランで提供されるよりも高度なCDN機能が必要な方向けと分かります。

プランをアップグレードする

プランのアップグレードは超がつくほど簡単です。Proプランを購入するボタンをクリックするだけです。あっけないですね。一つ気を付けなければいけないのは、Cloudflareではドメインごとにプランが適用されています。Proプランにアップグレードしたいドメインを選択した状態でプランのアップグレードを行いましょう。どうでもいいドメインのプランをアップグレードしてしまわないようにしましょう。

機能をいろいろ変更していく

さて、Proプランで使えるようになった機能で私がいじった項目は以下の部分です。

  • SSL/TLS
    • エッジ証明書
      • Encrypted Client Hello（有効化）
  • セキュリティ
    • 設定（テンプレートから好きなようにルールを設定する）
  • Speed
    • 最適化
      • サイトの推奨事項（全有効化）

ほんとこれだけなので、拍子抜けするほど簡単です。今の時点ではあまりうまみが感られませんが、詳細なアナリティクスにアクセスできるようになります。わかりやすく地図にプロットされるので、眺めてふーんとなる程度には面白いです。

効果について

セキュリティの向上という効果のほうが大きな気もしますが、そもそもはページの読み込みを早くする目的でした。開発者ツールを開き、キャッシュを無効化した状態で読み込みをしてもまるでキャッシュから読み込まれたかのような速度でページが表示されますね。実際には通信が完全に終わったわけじゃないので、Lighthouseなどのインサイトツールを使えば体感しているほどの高速化の恩恵は感じませんね。現在のスコアが気になる人はこのページやトップページのLighthouseスコアを調べてください。

参考までに記事執筆時点でのサイトトップページのスコアおよびCNAMEレコードで飛ばしているECサイトのトップページのスコアをPro機能で利用可能になった機能を切り替えて比較をします。オンオフを切り替える機能は次にあげるものです。

  • Polish
  • Mirage
  • Enhanced HTTP/2 Prioritization

測定の仕方

Google Chromeのシークレットタブでwww.sakashita.pageを開き、開発者ツールにあるLighthouseから測定を行います。測定は以下のような環境設定で行いました。

Dev ToolsでLighthouseを開き、設定を済ませたところ
全機能オフ（このブログ）
全機能オン（このブログ）

遅延読み込みをすることによっておそらく通信が完全に終わるまでの時間が伸びてしまい、評価が下がってしまいましたね。というかたぶん誤差ですね。アイコン画像などがプログレッシブ画像になったのでしょうか。大きな画像のあるショップのほうでは1だけ評価が上がりましたね。ほんとうはCDN読み込むキャッシュがパージされてないので、Proプランに上がる前にLighthouseスコアを測定しておくべきだったのですが、やり忘れました。そのせいでLighthouseスコア的には意味のない検証になってしまっていますが、実際には体感できるほど速くなりました。ウェブページがちまちま部分ごとに読み込まれるのと、一瞬で全体が表示されるのでは快適度が大きく変わります。

じつはProプランを契約してからShopifyではCloudflareのプロキシ機能を利用できないことを知りました。プロキシをしないのであれば、CloudflareのDNS機能以外はすべてスルーです。意味がありません。

おわりに

ちょっとした便利機能が使えるCloudflareのProプランですが、皆さんの目にはどう見えましたか？へたくそな比較のせいで意味がないサービスに見えてしまっていたらすみません。使ってみた感想としては無茶苦茶いいなと思ったのですが、数値として表せなくなっているのが無念です。

人柱になれれば幸いです。

Read more

Capture Oneに待望のネガフィルム変換機能が来た

2026年4月3日、Capture One 16.7.4 がリリースされた。目玉はなんといっても Negative Film Conversion（ネガフィルム変換） の搭載だ。これまで Cultural Heritage エディション限定だったネガ反転処理が、ついに通常の Capture One Pro / Studio でも使えるようになった。 何が変わったのか 従来、Capture One でネガフィルムをポジに変換するには、Cultural Heritage（CH）エディションを使う必要があった。CH は文化財デジタル化向けの専用製品で、Base Characteristics ツールに Film Negative / Film Positive モードが用意されていた。しかし一般の写真愛好家がフィルムスキャンのためだけに CH を導入するのは現実的ではなく、多くのユーザーは Lightroom とそのプラグイン（Negative Lab

By Sakashita Yasunobu

雨の中、歩くべきか走るべきか

傘を忘れた日の永遠の問い、歩くか、走るか、いやいっそ雨宿りをするのか。物理で決着をつける。 モデル 人体を直方体で近似。上面積 $A_{\text{top}}$（頭・肩）、前面積 $A_{\text{front}}$（胸・顔）。雨は鉛直一様（落下速度 $v_r$、数密度 $n$）、距離 $d$ を速度 $v$ で直線移動する。 人体の直方体モデルは、上から見た水平断面が $A_{\text{top}}$、正面から見た鉛直断面が $A_{\text{front}}$ の二面で構成される。移動方向は水平、雨は鉛直に降る。 受ける雨滴数は、上面が $n v_r A_{\text{top}

By Sakashita Yasunobu

T-GRAIN・Core-Shell・旧式乳剤の定量比較

Kodak T-GRAIN、Ilford Core-Shell、旧式立方晶乳剤。写真フィルムの性能を左右する三つの乳剤技術を、特許文献と数式に基づいて比較する。 1. 出発点: 旧式乳剤の構造と限界 T-MAXやDeltaが何を改良したのかを理解するには、まず従来の乳剤がどのようなものだったかを押さえておく必要がある。 1980年代以前、標準的なハロゲン化銀乳剤はAgBrやAgBr(I)の結晶が立方体(cubic)か不定形(irregular)の形をしていた。Tri-XやHP5の祖先にあたるこれらの乳剤では、結晶のアスペクト比(直径対厚さの比)はおおむね1:1から2:1。三次元的にほぼ等方的な粒子が乳剤層にランダムに散らばっていた。 この形態が感度と粒状性のトレードオフに直結する。立方晶粒子を一辺 $a$ の立方体として近似すると、表面積と体積、そしてその比は次のとおりである。 $$ S_{\text{cubic}} = 6a^2, \quad V_{\text{cubic}} = a^3, \quad \frac{S}{V} = \frac{6}

By Sakashita Yasunobu

クジラはなぜがんにならないのか

体が大きい動物ほど細胞の数が多い。細胞が多ければ、そのうちどれかががん化する確率も高くなるはずだ。ところが現実には、クジラやゾウのがん発生率はヒトよりも低い。1977年、疫学者リチャード・ピートがこの矛盾を指摘した。以来この問いは「ピートのパラドックス」と呼ばれ、比較腫瘍学における最大の謎のひとつであり続けている。 種の中では予測通り、種の間では崩れる 同じ種の中では、直感どおりの傾向が確認されている。身長の高いヒトはそうでないヒトよりがんの発生率がやや高く、年齢を重ねるほどがんは増える。細胞の数が多いほど、細胞分裂の回数が多いほど、がん化の確率は上がる。 しかし種を超えて比較すると、この関係が崩壊する。シロナガスクジラの細胞数はヒトの約1000倍にのぼるが、がんの発生率がヒトの1000倍になるわけではない。哺乳類全体を見渡しても、体サイズとがんリスクの間に明確な正の相関は長い間見つかっていなかった。がんの発生率は種が異なっても約2倍の範囲にしか収まらないとされてきた。体サイズの差は100万倍を超えるにもかかわらず。 ゾウが持つ余分ながん抑制遺伝子 最もよく知られた説明は

By Sakashita Yasunobu