![Performance Improvement for Web Applications](https://img.php.cn/upload/article/000/000/000/172453876458706.jpg)
網路生命
- 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中文網其他相關文章!