目次# 前編 準備段階:計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
![フロントエンドパフォーマンスのチェックリスト2021年版(PDF、Apple Pages、MS Word)-後編 | POSTD](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9fd4a4038519a1c0fbb2ba093467fa1c52504a3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Findysigner%2Fimage%2Ffetch%2Ff_auto%2Cq_80%2Fw_2000%2Fhttps%3A%2F%2Farchive.smashing.media%2Fassets%2F344dbf88-fdf9-42bb-adb4-46f01eedd629%2F08a226c5-5a9a-4bd2-bba7-dad7e74f69e9%2Fadaptive-media-serving-opt.png)