Web アプリケーションのパフォーマンスの向上

ウェブバイタル

1. FCP (ファーストコンテンツフルペイント)(レスポンスクイック)
2. LCP (最大コンテンツフルペイント)(要点をつかむ)大きな画像/記事
3. CLS (累積レイアウトシフト)(要素を移動しない)
4. 最初の入力遅延 (大量のデータをロードしないでください)バックグラウンドでブラウザが Asyc を処理しているため、遅延が発生します

注:-

累積レイアウトシフト

1. ユーザーが閲覧するドキュメントの存続期間全体において、ページ要素に影響を与える動き。
2. また、これはレイアウトが変更されるため、レイアウト、ペイント、合成を再度実行するためコストがかかります。また、破損したピクセルがある場合は再レンダリングされることも投稿してください

ベンチマーク

LCP:

良い< 2.5秒未満改善が必要

FID:

良い< 100ミリ秒未満改善が必要

CLS:-

良い< 0.1秒未満改善が必要

*ツール:- *

アプリケーションパフォーマンス監視用のフィールドデータ（実際のユーザーデータ）

1. ライトハウス (ローカルパフォーマンスモニタリングはシステム設定に応じて異なります)
2. https://developer.chrome.com/docs/crux/dashboard/
3. https://www.lightest.app/ (類似アプリと比較)
4. https://www.performancebudget.io/

FCPの改善:

1. ユーザーがサーバーから遠く離れている場合は、CDNS を使用することをお勧めします。
2. これは大きな影響です (gzip も考慮できます)

LCPの改善

1. リソースを後まで延期する (スクリプト内の延期/非同期)

リーリー

2.画像を最適化する (非常に重要)
上で述べたように、後からビットをロードしても、一部の画像のサイズは2MBなので、これは必要ありません

アプローチは2つあります

あ。画像圧縮器 (tinyPng) (imagemin npm パッケージ) を使用します
b.以下で説明するように、さまざまなレスポンシブデザインに一種の srcset を使用します

リーリー

3.リクエストのオーバーヘッドを削減します

プリロードとプリコネクト

リーリー

CLSの改善

1. 要素、つまり親指ルールを移動しないでください
2. 広告の場合、これが割り当てられたdivの最大の高さであることに言及する必要があります
3. 一番下に修正できるクッキーバナーを考えてみましょう。そうすれば、それらを上部に表示するよりも大幅に向上し、ユーザーがクリックして同意して消えても、レイアウト構造は影響を受けません
4. 0.01 (0.059) (CLS)(LightBox)を目標にできます
5. 画像タグの場合、幅と高さの属性を指定できます

FIDの改善

あ。すべてを最後まで延期しないでください。LCP が完了し、ユーザーが UI と対話しようとしているとします。しかし、すべてを行ったように、バックグラウンドでロードされるまでブラウザーを延期するため、延期することはすべての人にとって良いアイデアではありません。

すぐには必要ない js ファイルのみ、後回しにすることができます。

参照:-
https://frontendmasters.com/courses/web-perf

以上がWeb アプリケーションのパフォーマンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。