ホームページ > 記事 > ウェブフロントエンド > Web アプリケーションのパフォーマンスの向上
ウェブバイタル
注:-
累積レイアウトシフト
ベンチマーク
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 つのアプローチがあります
<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" />プリロードとプリ接続
を指定できます
FID の改善
a.すべてを最後まで延期しないでください。LCP が完了し、ユーザーが UI と対話しようとしているとします。ただし、すべてを行ったので、バックグラウンドでロードされるまでブラウザを延期
するため、これは良いアイデアではありません。すべて延期します。
すぐに必要でない js ファイルのみ、後回しにすることができます。
以上がWeb アプリケーションのパフォーマンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。