FVに写真を置いてる時読み込まれないと困りますね。
写真のサイズが大きいとどうしても読み込むのが遅くなってしまいます、、
どうにかして早く読み込ませる方法を確認しましょう！
方法1.rel=”preload”を使った画像の先行読み込み
rel=”preload” を使い、画像を先行読み込みします
See the Pen Untitled by mtrad_ingu (@mtrad_ingu) on CodePen.
方法2.下部画像を遅延読み込み
imgタグにloading=”lazy”属性をつけることによって読み込みを遅くします
早く読み込ませたい画像以外に付けることによって、読み込ませたい画像の優先度を上げます
See the Pen Untitled by mtrad_ingu (@mtrad_ingu) on CodePen.
方法3.webpにする
画像をwebpにする。
下記のようなサイトでwebpに変換
https://saruwakakun.com/tools/png-jpeg-to-webp/
※フォトショで「コピーを保存」でwebp保存できますが、アセットなどは対応していないので、一旦そとのツールを使うことになる
またIEでは対応されてないので、別途コード書く必要があります！
方法4.画像を軽量化
軽量化します。多少画質が劣化するので、それでもいいという場合。
https://tinypng.com/
まとめ
私としては「方法1.rel=”preload”を使った画像の先行読み込み」が一番効果があったなと思いました
またwebpはいくつか注意点はあるものの、IEのサポート終了と共に、今後はもっと使われていくことが予想されます。
フォトショップも公式でwebpが簡単に書き出しできるようになるでしょう！（という期待）
