Web アプリケーションのパフォーマンスの向上-jsチュートリアル-php.cn

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

王林

リリース： 2024-08-25 06:32:42

オリジナル

469 人が閲覧しました

Performance Improvement for Web Applications

ウェブバイタル

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

注:-

累積レイアウトシフト

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

ベンチマーク

LCP:

良い

2.5秒未満改善が必要 FID:

良い

100ミリ秒未満改善が必要

CLS:-

良い 0.1秒未満改善が必要

ツール:- *

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

https://www.performancebudget.io/

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

<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" />

ログイン後にコピー

プリロードとプリ接続

要素、つまり親指ルールを移動しないでください
div
0.01 (0.059) (CLS)(LightBox) を目標にできます

幅と高さの属性

を指定できます

FID の改善

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

延期

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

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

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

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