preload
具体的にどうするか
リソースの種類によって異なる
next/legacy/image
なら
priority
を指定すればいい
画像
<link rel="preload">
を使用する
font
https://web.dev/preload-critical-assets/#css
CSS file
<link rel="preload">
を使用する
https://web.dev/preload-critical-assets/#css-2
JS file
<link rel="preload">
を使用する
https://web.dev/preload-critical-assets/#javascript
参考
重要なアセットをプリロードして、読み込み速度を向上させる
#WIP
prefetch
と異なり、ページ読み込み後の話
<img>
などのリソースに対し、指定できる
現状の理解(合っているのか
#??
)
Webページが表示されるまでの流れ
上、imgなどの読み込みは後の方になるので、リソースの取得とrenderingの問題で
Largest Contentful Paint(LCP)
に影響が起きる
そこでpreload指定をしておくことで、早めにそのリソースを取得しておくことができる
https://blog.jxck.io/entries/2016-03-04/preload.html
https://web.dev/preload-responsive-images/
レスポンシブ画像
のpreload
これ
<head>
内に各の？
https://medium.com/ne-digital/how-to-improve-lcp-and-speed-index-for-next-js-websites-f129ae776835#:~:text=Preload%20LCP%20image
https://web.dev/optimize-lcp/#-5
https://developer.mozilla.org/ja/docs/Web/HTML/Link_types/preload#what_types_of_content_can_be_preloaded
https://web.dev/uses-rel-preload/