Webパフォーマンス最適化ガイド

1）Web性能決定要因

1.パフォーマンスのロード

🔱 リソースのロードのパフォーマンス(HTML、CSS、JS)

24791721π画像サイズの最適化
-画面で実際に使用されている画像の2倍のサイズを使用します.
-実際の画像を減らすことができない場合は、画像CDNを使用します.画像処理CDNとは?
CDN+ユーザに転送する前に画像処理を行う技術.
寸法、フォーマット変更等
ex) https://cdn.image.com?src=\[img src]&width=200&height=200
コンテンツ配信ネットワーク(CDN)とは?
物理的な距離の制限を克服するために、コンテンツ・サーバを消費者(ユーザー)に近い場所に配置する技術
24791722πコードsplitting
-余分なコードや重複したコードを必要とせずに、適切な時間に適切なサイズのコードをロードしてください.
- Route-based code splitting 24791723｣テキスト圧縮

2.レンダリングパフォーマンス

🔱 上記のリソースのパフォーマンスを表示

24791721ボトルネックコード最適化

2）分析ツール

クロムネットワークラベル

クロムゲージ
-ページのロード時に実行されるタスクは、タイムラインとチャドとみなされます.
-Minor GCが関数を実行している場合、タスクが大量のメモリを消費していると判断される可能性があります.

クロムハウスタブ
-Opportunity(リソース)のロードに関連するパフォーマンスの最適化
-Diagnosticsレンダリングに関連するパフォーマンスの最適化

webpack-bundle-analyzer

cra-bundle-analyzer

npm i -D cra-bundle-analyzer
npx cra-bundle-analyzer