【Web高速化】front-end performance 2021 ~ デリバリー最適化

こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com

かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる

そんな中で、個人的に覚えておきたいと思ったものをメモしておく

---

デリバリー最適化

• HTMLのscriptに対してdeferとasync属性を使用して、ブラウザに待機せずにページのレンダリングを開始するように明示的に指示する
  • <script async defer>はアンチパターン（一応asyncが優先される）
  • https://html.spec.whatwg.org/multipage/scripting.html#the-script-element
• 重いコンポーネントはlazy laodすべき
  • iframeとimgは<img loading=lazy>が使える
  • AndroidでChromeを使用して実施された実験によると、4Gでは遅延読み込みされた画像の97.5％が、表示されてから10ミリ秒以内に完全に読み込まれたので安心
• 少し洗練された遅延読み込みを行う最もパフォーマンスの高い方法はIntersection Observer API
  • Intersection Observer API Makes Lazy Loading a Snap
  • 読み込みタイミングがチューニングができる
• 段階的な画像読み込みをする
  • 最初にぼやけた画像を読み込む
  • BlurHash, LQIPでほやけた画像をつくる
  • SQIPで画像から低品質svgをつくるやりかたもある
• content-visibilityでレンダリングを遅延させる
  • content-visibiliy: autoでビューポート外のコンテナのリンダリングをブラウザにスキップするよう求めることができる
  • CSS Containmentを使うと詳細なチューニングができる
• decoding="async"でデコーディングを遅延する
  • loading属性は画像の取得タイミングを制御するが、decoding属性は取得タイミングではなくデコードタイミングを制御する（でかい画像とか）