ドキュメントサイトやリリースノートのように HTML 単体が巨大なケースでは、画面外の DOM までスタイルとレイアウトのコストが乗ります。2026 年も content-visibility: auto と contain-intrinsic-size の組み合わせは、フレームワークを増やさず描画負荷を抑える現実的な手段です。本稿では対象セクションの選び方、LCP への副作用、WebKit/Safari でのスクロールや # アンカーの注意点を整理します。Lighthouse と実機の差については Core Web Vitals と Safari の記事、スクロールバー槽の CLS 対策は scrollbar-gutter の記事 と併読してください。
想定読者は静的 HTML を配信するフロントエンドと、Safari を含むブラウザ行列を管理するパフォーマンス担当です。プリント用スタイルが別途ある場合は、メディアクエリごとに高さを再測定してください。
長い静的 HTML がまだ重い理由
静的生成でもブラウザはツリー全体にアクセスします。180KB 超の単一 HTML に数千の <li> があると、メインスレッドのレイアウト時間が数百ミリ秒に伸びることがあります。会議中に CPU がスロットリングしているノート PC では体感がさらに悪化します。
マーケティングが全ページに巨大フッターを埋め込むパターンも典型です。CV に直結しない領域まで初期レイアウトに参加させないことが重要です。
さらに、多言語ページで lang 属性がブロックごとに切り替わる場合、フォントメトリクスの差分で intrinsic 推定が外れやすいので、ロケール別に高さ表を分けて管理すると運用が楽です。
仕組みとコード例
content-visibility: auto はビューポートから離れたサブツリーの描画を省略可能にします。省略中に高さが不明だとスクロールバーの長さが跳ねるため、contain-intrinsic-size: 720px 2400px のように近い値を置きます。実測ではデスクトップで高さ誤差 ±16px 以内に抑えるとクラッシュが少ないという経験則があります。
.appendix {
content-visibility: auto;
contain-intrinsic-size: 720px 2400px;
}判断表
| 領域 | auto | コメント |
|---|---|---|
| ヒーロー | × | LCP リスク |
| 画面下 FAQ | ○ | ノード数が多い |
| sticky ナビ | 慎重 | 祖先のスキップと干渉 |
Safari での検証観点
Chrome のタイムラインだけでは足りません。Safari Technology Preview でスクロールの追従性とハッシュジャンプを確認してください。position: sticky を併用する場合、省略された祖先配下にあると一瞬ズレることがあるため、誤差を詰めるか対象外にします。
ダークモード切替でボーダー色が変わり、フッタ高さが 20〜40px 変動する例があります。ライト/ダーク両方で intrinsic 値を測り直してください。
測定と運用
RUM でブランド別に LCP/CLS を追跡し、改修前後の 75 パーセンタイルを比較します。悪化が 120ms を超える場合はヒーロー境界の見直しが必要です。INP については省略後に開いたアコーディオンのタップが 200ms 以内に収まるかを中価格帯端末で確認します。
フィールドではホテル Wi‑Fi のような高遅延リンクでスクロール速度が速いユーザーほど、省略ブロックの昇格タイミングが尾を引きます。セッションリプレイを個人情報保護ポリシーに沿ってマスクしたうえで、少なくとも 50 件の長尺セッションを手作業レビューすると、中央値だけでは見逃すカクつきが見つかります。
社内 CMS からエクスポートした HTML に埋め込まれたインライン SVG が膨大な場合、content-visibility だけではベクタ描画コストが残るため、SVG スプライトの分割や外部参照への移行とセットで検討してください。
アクセシビリティ監査ツールが全ノードを列挙するためにページ全体を強制スクロールする場合、省略が一度に解除され CPU が跳ねるのは正常挙動です。ユーザー計測と混同しないようラベルを分けます。
CPU スロットリングは再現性が低いため、クラウド Mac mini（MacHTML では概ね 1 日 16.9 ドル）で Apple Silicon の熱挙動に近い環境を借りると、経営陣が使うマシンに近い結果が得られます。SSH でトレース取得、VNC で視覚確認が同時に行えます。
FAQ
画像の lazy との関係は？
併用可能です。ネットワークとレイアウトの両方を削れます。
表は？
補助的でセル結合が少ない表なら試せます。複雑な財務表は慎重に。
パフォーマンス改善は「測れる場所」が成果を決めます。Mac mini は静音で 24 時間ベンチマークに向き、macOS なら WebKit の挙動が本番に近いです。MacHTML のレンタルならハード購入を待たずに検証専用ホストを用意でき、リリース週にだけ台数を増やすといった弾力的な運用が可能です。