〜CLSゼロ・LCP改善・LazyLoadの罠〜
【AI暴走事件簿】
PageSpeed Insights を
気にし始めた瞬間から
このサイトは静かに壊れ始めた。
最初はただの「確認」やった。
なんとなく測ってみただけ。
すると出てきた数字が
まぁまぁ悪い。
LCP が遅い
CLS がズレてる
画像が最適化されていない
――はい、地獄の入口。
「直せば良くなる」は幻想だった
PageSpeed の指摘って
一見すると親切そうに見える。
- ここを直せ
- あそこを改善しろ
- LazyLoad を使え
言われた通りにやれば
スコアは上がる はず。
そう思って
一つずつ対応し始めた。
結果どうなったか。
- CLS は減った
- LCP も一応改善
- スコアは上がった
でも
サイトの挙動がおかしくなった。
読み込みの順番が変わり
表示が一瞬ズレ
「速くなったはずなのに、違和感が増えた」。
CLSゼロを目指した結果、失ったもの
CLS(レイアウトシフト)
をゼロにする。
これ、正解っぽく聞こえるけど
やり方を間違えると地雷。
高さ固定
余白固定
遅延読み込みの調整
確かにズレは消えた。
でも同時に
- 本来後から読み込まれるはずの要素が先に出る
- コンテンツの流れが不自然になる
- 見た目が「固い」
人間の体感は良くなってない。
数字だけが喜んでる状態。
LCP改善で踏んだ別の罠
LCP(最大コンテンツの表示時間)
も同じ。
画像を軽くする
読み込みを前倒しする
プリロードを仕込む
確かに速い。
でもその代償として
- 他の要素が後回し
- JSの実行タイミングがズレる
- 管理画面での挙動も微妙に重くなる
全体最適じゃなく、部分最適になってた。
LazyLoadという善玉菌顔の悪玉菌
一番ややこしかったのがこれ。
LazyLoad。
「使えば速くなる」
「入れとけば正解」
そう言われがちやけど
状況によっては普通に悪さする。
- ファーストビューに必要な画像まで遅延
- スクロール時にチラつく
- CLSの原因にもなる
つまり
LazyLoad は万能じゃない
使いどころを間違えると毒
ここでようやく気づいた。
数字を追った瞬間、構造を見失う
PageSpeed は
「結果」を測るツールであって
「正解」を教えてくれるわけやない。
- なぜ遅いのか
- どこが本体なのか
- 何を犠牲にしているのか
これを考えずに
「スコアを上げる」だけやると
サイトは静かに歪む。
生還できた理由
最終的にやったことは
めちゃくちゃシンプル。
- 無理に100点を目指さない
- ファーストビューを最優先
- 構造を壊す最適化はしない
- 数字より「人が読めるか」を基準に戻す
結果
- CLSはほぼゼロ
- LCPも実用レベル
- スコアは十分
そして何より
読んでて気持ち悪くないサイトに戻った。
結論:PageSpeedは目的じゃない
PageSpeed最適化は
やり出すと終わりがない。
でも忘れたらアカン。
サイトは
スコアのためにあるんちゃう
人が読むためにある
数字は指標。
判断は人間。
地獄を一周した今なら
そう言い切れる。
――もう一回測るけどなw
👇 迷ったら、ここに戻ってきてや✨
🏰 このブログの全体像(要塞)はこちら









