網路生命
- FCP（首次內容繪製）（快速回應）
- LCP（最大內容繪畫）（進入正題）大圖/文章
- CLS（累積佈局移位）（不移動元素）
- 首次輸入延遲（不要載入太多資料）瀏覽器在背景處理 Asyc 工作，因此會造成延遲
注意：-
累積佈局移位
- 在使用者看到的文件的整個生命週期中影響頁面元素的移動。
- 而且，這是昂貴的，因為佈局會改變，然後它會再次進行佈局、繪製和合成。另請注意，如果有任何損壞的像素，它將再次重新渲染
基準標記
LCP：
好
FID：
好
CLS：-
好
*工具：- *
用於應用程式效能監控的現場資料（實際使用者資料）
- Light House（本地效能監控取決於您的系統偏好）
- https://developer.chrome.com/docs/crux/dashboard/
- https://www.lightest.app/ （與同類應用程式比較）
- https://www.performancebudget.io/
FCP 改進：
- 如果您的使用者距離伺服器較遠，最好使用CDNS。
- 影響很大（也可以考慮gzip）
改善LCP
- 將資源推遲到稍後（腳本中的 defer/async）
雷雷
2.最佳化影像（非常重要）
正如我上面提到的，即使我們稍後加載，但有些圖像大小為 2Mb，這是不需要的
有2種方法
a。使用影像壓縮器（tinyPng）（imagemin npm 套件）
b.使用 srcset 進行各種響應式設計，如下所述
雷雷
3.減少請求開銷
預先載入和預連接
雷雷
改善CLS
- 請不要移動元素，即經驗法則
- 對於廣告，我們需要提及這是分配的div的最大高度
- 假設我們可以在底部修復 cookie 橫幅。那麼與我們將它們顯示在頂部相比，將會有很大的提升，並且當用戶點擊接受並消失時，我們的佈局結構將不會受到影響
- 我們的目標是 0.01 (0.059) (CLS)(LightBox)
- 對於圖像標籤，我們可以指定寬度和高度屬性
改善FID
a。不要將所有事情推遲到最後，因為假設您的 LCP 已完成並且用戶嘗試與 UI 交互，但正如我們所做的一切推遲瀏覽器直到在後台加載這些內容一樣，所以推遲並不是一個好主意。
只有不需要立即的js檔案我們可以延後。
參考：-
https://frontendmasters.com/courses/web-perf
以上是Web 應用程式的效能改進的詳細內容。更多資訊請關注PHP中文網其他相關文章！
