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

ウェブバイタル

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

注:-

累積レイアウトシフト

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

ベンチマーク

LCP:

良い

2.5秒未満改善が必要 FID:

良い

100ミリ秒未満改善が必要

CLS:-

良い 0.1秒未満改善が必要

*

ツール:- *

1. アプリケーションパフォーマンス監視用のフィールドデータ (実際のユーザーデータ)
ライトハウス (ローカルパフォーマンスモニタリングはシステム設定によって異なります)
https://developer.chrome.com/docs/crux/dashboard/
https://www.lightest.app/ (同様のアプリケーションと比較)

https://www.performancebudget.io/

FCP の改善:
ユーザーがサーバーから遠く離れている場合は、CDNS を使用することをお勧めします。

これは大きな影響です (gzip も考慮できます)

LCP の改善

<script src="/assets/js/abc.js" defer></script>
// For Other image tags / video links from I frame we can use intersection Observer to handle when the view port intersect with the element.

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

2.画像の最適化 (非常に重要)

上で述べたように、後者のビットでもロードしますが、一部の画像はサイズが 2MB なので、これは必要ありません

2 つのアプローチがあります

a.画像圧縮器 (tinyPng) (imagemin npm パッケージ) を使用します

<img
data-src="pic-1200.min.png"
src="" 
data-srcset=""
data-srcset="pic-600.png 600w, pic-900.png 900w, pic-1200.png 1200w"
sizes="(max-width: 600px) 600px, (max-width: 900px) 900px, 1200px"
/>

b.以下で説明するように、さまざまなレスポンシブデザインに一種の srcset を使用します

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

<link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preload" href="/assets/css/index.css" />

プリロードとプリ接続

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

幅と高さの属性

を指​​定できます

FID の改善

a.すべてを最後まで延期しないでください。LCP が完了し、ユーザーが UI と対話しようとしているとします。ただし、すべてを行ったので、バックグラウンドでロードされるまでブラウザを

延期

するため、これは良いアイデアではありません。すべて延期します。

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

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

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