1. このページの目的
CSSを2段階で読む (LCP対策)方法を試す。
1つ目は LCPの対象、2つ目は LCPの対象とならないようにしたい。
2. 結論
- いい方法はない。
- LCP の対象とならないようにCSS, JS, Image 等のリソースを読み込むには、
mouseover
やkeydown
などのイベントで読み込みを実行するしかない。- そのため、ファーストビューのまま実行させることはできない!!
- 自作してもよいが、例えば GitHub - aFarkas/lazysizes といったライブラリもある。使い方は、Use lazysizes to lazy-load images でも説明されている。同様の機能を持った WordPress プラグインもある。