タイトル案：PHPCMS v9 の静的ページでも遅い？ head整理と画像・JS読み込みで Core Web Vitals を底上げする実戦メモ
「静的HTMLにしてるのに、なぜか体感が重い」。この現象、わりと普通に起きます。静的化はサーバ側の処理を軽くしてくれますが、ユーザーが感じる速さ（首画面が出るまで、押した反応、画面の揺れ）は、結局ブラウザが何をどう読むかで決まります。
ここでは PHPCMS v9（テンプレート生成＋静的出力）で運用しているコンテンツサイトを想定して、再現性が高い改善ポイントをまとめます。具体例として、一部の確認には「一禅堂 恋みくじ」) を参照しました（これは事例として触れるだけで、宣伝目的ではありません）。
- 静的ページでも遅くなる典型パターン
静的化しても遅い原因の多くは、ブラウザ側の読み込み順と優先度にあります。よくあるのは次のようなものです。
・CSS が多く、レンダリングをブロックしている
・head の先頭に重い JS や外部スクリプトを積みすぎている
・ファーストビューの画像が重く、LCP（最大コンテンツ表示）が伸びる
・Webフォントの読み込みが遅く、レイアウトが揺れて CLS（レイアウトのずれ）が悪化する
・画像やカード部品のサイズが確定しておらず、読み込み途中で配置がズレる
静的化は「サーバの速さ」には効きますが、「描画の速さ」は別のゲームです。別のボスが出てきます。
-
目標は3つに分解すると迷わない
経験上、目的を次の3つに割ると施策がブレにくいです。
・首画面をなるべく早く“読める状態”にする（ブロック要素を減らす）
・画面を揺らさない（CLS を落とす）
・操作が引っかからない（INP を守る、JS の負荷を下げる） -
head を整理するだけで勝手に速くなることがある
PHPCMS v9 の強みはテンプレで head を共通化できることです。逆に弱点は、テンプレを継ぎ足し続けると head が「何でも置き場」になりがちなこと。
head の並びを、ざっくり次の順に整えるだけでも効果が出やすいです。
・基本宣言（文字コード、viewport）
・SEO 必須（title、description、canonical）
・最優先の表示に必要なもの（重要CSS、フォント接続、ファーストビュー画像の優先ヒント）
・後回しでいいもの（解析系、広告系、ウィジェット系、使うかわからない外部ライブラリ）
特に、解析や広告などの外部スクリプトを head の先頭に置くと、首画面が出る前に余計な通信と実行が始まります。まず“表示”を勝たせるのが基本です。
- CSS は「最初に必要な分」だけ先に届ける
コンテンツサイトは CSS が肥大化しがちです。理想はクリティカルCSS（ファーストビューに必要な最小限）を先に、残りを後にすること。
難しそうに聞こえますが、やることはシンプルで、「首画面表示までに必要な CSS を増やさない」「不要なライブラリを削る」「共通CSSを薄くする」だけでも、レンダリングブロックを減らせます。
- JS は“基本は後”で、必要なら“ユーザー操作後”
PHPCMS v9 の記事ページのように、読むのが主体のページでは、初回表示に必須の JS は少ないはずです。にもかかわらず、head で JS を同期読み込みしているケースがよくあります。
方針としては以下が安全です。
・初回表示に不要な JS は後回し（HTML が描画されてから）
・計測系、埋め込み系、装飾系は「スクロール後」「クリック後」などに遅延しても成立する
・依存関係がある JS は読み込み順が崩れないようにする
“先に読むほど正義”ではなく、“先に読ませるべきものだけ先に”が正義です。
- 画像は LCP の主犯になりやすい
速度指標の中で、LCP が悪い原因はだいたい画像です。特にファーストビューの大きな画像（ヒーロー画像やOGP兼用のヘッダー画像など）が遅いと、体感も指標も一気に落ちます。
改善の基本は次の3点です。
・ファーストビュー画像は軽くする（WebP/AVIF、適切なサイズ）
・画像やカードの表示サイズを事前に確定して CLS を抑える
・首画面以外の画像は遅延読み込みで転送量を減らす
注意点として、首画面の最大画像まで遅延読み込みにすると逆効果になり得ます。重要な画像だけは優先して届ける、という分け方が大事です。
- フォントは“見た目の宗教戦争”になりがちなので割り切る
Webフォントは雰囲気を作りますが、読み込みが遅いと文字が出なかったり、出た瞬間にガタッと動いたりします。これが CLS の原因になります。
実運用では、「まず読める」を優先して、フォント読み込みの遅延や表示戦略を決めると安定します。フォントにこだわるほど、技術的には“優先順位設計”が重要になります。
- キャッシュ戦略は“静的サイトのボーナスステージ”
静的出力の強みは、CSS/JS/画像を長期キャッシュしやすいことです。ファイル名にバージョンを付ける運用（更新時だけ新しいファイル名にする）にしておけば、ブラウザキャッシュが効いて二回目以降が劇的に速くなります。
HTML は更新があるので短めでもいいですが、アセット類は長く持たせると費用対効果が高いです。
- 計測は“同じ条件”で比較しないと幻覚を見る
最適化の怖いところは、改善した気になりやすいことです。測るなら最低限、次を守るとブレが減ります。
・同じ端末、同じネットワーク条件、同じ測定モードで比較
・Lighthouse の点数だけでなく、実ユーザー指標（Search Console / CrUX）が取れるなら確認
・テンプレ単位で効果が出ているかを見る（1ページだけ速いは偽物になりやすい）
まとめ
PHPCMS v9 の静的サイトは、テンプレで head と読み込み戦略を整えられるので、いったん型を作ると全ページがまとめて良くなります。静的化はスタート地点で、そこから「何を先に描画させるか」「何を後回しにするか」を設計すると、体感も指標も自然に底上げされます。
事例参照（ケースとしてのリンク）：一禅堂 恋みくじ
この手の改善は派手な魔法ではないけど、地味に強いです。テンプレの秩序が、ユーザー体験を救います。