網路生命
注意:-
累積版面變化
基準
LCP:
好
FID:
好
CLS:-
好
*工具:- *
用於應用程式效能監控的欄位資料(實際使用者資料)
FCP 改良:
改善 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 大小,這是不需要的
有兩種方法
a.使用影像壓縮器(tinyPng)(imagemin npm 套件)
b.使用 srcset 進行各種響應式設計,如下所述
<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" />
3。減少請求開銷
預先載入與預先連線
<link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preload" href="/assets/css/index.css" />
改善 CLS
改善 FID
a.不要將所有事情推遲到最後,因為假設您的LCP 已完成並且用戶嘗試與UI 交互,但正如我們所做的一切推遲瀏覽器直到將它們加載到後台一樣,所以這不是一個好主意一切都推遲。
只有不需要立即的js文件,我們可以延後。
參考:-
https://frontendmasters.com/courses/web-perf
以上是Web 應用程式的效能改進的詳細內容。更多資訊請關注PHP中文網其他相關文章!