【Web高速化】front-end performance 2021 ~ アセッツ最適化

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

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

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

---

アセッツの最適化

• プレーンテキストの圧縮にはBrotliを使用
  • 現在IE以外のすべてのモダンブラウザでサポートされている
  • サイトがすでにGzipで最適化されている場合は、サイズの縮小とFCPのタイミングで少なくとも 1桁の改善、せいぜい2桁の改善が期待できる
  • ブラウザは、ユーザーがHTTPS経由でWebサイトにアクセスしている場合にのみ、Brotliを受け入れる
  • brotilはgzipより圧縮率が高い
  • 動的に brotli で圧縮した場合だとパフォーマンスが悪くなる
  • 静的に圧縮した場合だと平均のパフォーマンスが良くなり90パーセンタイルだと gzip とほとんど変わらない
• Adaptive media loading
  • picture タグと srcset, sizes を使う
• ClientHintsを活用する
  • ブラウザがサーバーにどのタイプのコンテンツを好むかを伝える方法を定義し、HTTPリクエストヘッダーフィールドを介してこの情報を提供すること
• ClientHints を活用することで 42% 画像転送量を抑えることができ、70パーセンタイルが1MB以上小さくなった事例がある
• image-setを使用するとレスポンシブな背景画像も提供できる

background-image: url("fallback.jpg");
background-image:
  image-set( "photo-small.jpg" 1x,
    "photo-large.jpg" 2x,
    "photo-print.jpg" 600dpi);

• WebPを使う
  • WebPはJPEG の小さい画像(200x100)の場合以外は小さくなる
• AVIFを使う
  • AVIF は AV1 の keyframe から派生したアニメーションにも対応した画像形式
  • 唯一の欠点は、現在AVIFがプログレッシブ画像のデコードをサポートしていないこと
  • デコードは高速ですが、高圧縮率のエンコードは現在非常に低速
• JPEG / PNG / SVGは適切に最適化
• ヒーロー画像がプログレッシブに読み込まれるか確認
• JPEGがプログレッシブであり、mozJPEGまたはGoogleのオープンソースであるGuetzliで圧縮されていることを確認
• PNG が Pingo, SVG の場合は SVGO, SVGOMG を使う
• ストレージを内部的に最適化するには、Dropboxの新しいLepton形式を使用して、JPEGを平均22％ロスレスで圧縮できる
• プレースホルダー画像を早く表示したい場合は、BlurHashを使用
• 画像を最適化するだけではうまくいかない場合は重要性の低い画像を遅延ロード
• 重要な画像をプリロードすることを検討
• レンダリングのパフォーマンスと帯域幅の両方に影響を与える重いアニメーションGIFをロードする代わりに、アニメーションWebP（GIFはフォールバック）に切り替えるか、ループするHTML5ビデオに完全に置き換える
• web fontはWOFF2を使う
• web fontのよい選択肢はCritical FOFTwithpreloadとTheCompromise メソッド
  • どちらも2段階のレンダリングを使用してWebフォントを段階的に配信
• preloadリソースヒントを使用してフォントをプリロードすることを推奨