UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Web高速化】画像の遅延ローディング - Intersection Observer API とネイティブ の棲み分け

Web高速化方法の一つに「画像の遅延ローディング」がある

最近の動向としてはloading=lazy で実装するLazyload がWeb標準になったので、今後Chrome 以外のブラウザでもサポートされることが期待されるが、いまの時点(2020/4/9)では Firefox, Chrome, Edge は実装されたがSafariがまだ

f:id:uggds:20200412183608p:plain Can I use... Support tables for HTML5, CSS3, etc

同時実装(棲み分け)について

ChromeFirefoxではloading=lazy で利用しつつ、Safariでは例えば lazysizes.js を使うみたいな実装はやれなくはないと思うがかなり面倒だしメンテナス性が悪いのでやらない

そのため、

  1. Safariは今後対応するまで待つとして、ライブラリを使わずネイティブで実装する(IEは捨てる)
  2. loading="lazy"は書いておいて、lazysizes.jsで遅延ローディングさせる

のどちらかになるのかなと思う