〜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

👇 迷ったら、ここに戻ってきてや✨
🏰 このブログの全体像（要塞）はこちら