LCPを改善する
まずは計測してどれがLargest Contentなのか特定しておく
それが画像なのかテキストなのかによってアプローチが異なる
参考
Largest Contentful Paint (LCP)
いくつかリンクがある
Largest Contentful Paint を最適化する
https://medium.com/ne-digital/how-to-improve-lcp-and-speed-index-for-next-js-websites-f129ae776835
良い記事
#WIP
具体的な改善方法いくつか
serverの応答時間を速くする
https://web.dev/optimize-lcp/#slow-servers
CDNを使う
アセットをcacheする
HTMLをcache firstで配信する
ServiceWorkerを使う
third partyの接続を早期に確立する
SXGを使用する
renderingを妨げるJS/CSSを改善する
GoogleSEO: Reduce unused JavaScript
リソースの読み込み時間
https://web.dev/optimize-lcp/#slow-resource-load-times
画像を最適化して圧縮する
webの画像のパフォーマンス改善
重要なリソースを事前に読み込む
テキスト ファイルを圧縮する
ネットワーク接続の状況に応じて異なるアセットを配信する (アダプティブ サービング)
Service Worker を使用してアセットをキャッシュする
Client Side Renderingを避ける
JSがloadされてからじゃないとコンテンツが表示されないので
ヒーロー画像はPreloadする
など
https://web.dev/optimize-lcp/
でけえ画像ってどうやったら速く出せるんだ #??
ssgでもうまくいかないし