Web 應用程式的效能改進

網路生命

1. FCP（首次內容繪製）（快速回應）
2. LCP（最大內容油漆）（進入正題） 大圖/文章
3. CLS（累積佈局移位）（不移動元素）
4. 首次輸入延遲（不要載入太多資料） 瀏覽器在背景處理非同步工作，因此會造成延遲

注意：-

累積版面變化

1. 在使用者看到的文件的整個生命週期中影響頁面元素的移動。
2. 而且，這是昂貴的，因為佈局會改變，然後它會再次進行佈局、繪製和合成。另請注意，如果有任何損壞的像素，它將再次重新渲染

基準

LCP：

好

FID：

好

CLS：-

好

*工具：- *

用於應用程式效能監控的欄位資料（實際使用者資料）

1. Light House（本地效能監控取決於您的系統偏好）
2. https://developer.chrome.com/docs/crux/dashboard/
3. https://www.lightest.app/ （與同類應用程式比較）
4. https://www.performancebudget.io/

FCP 改良：

1. 如果您的使用者距離伺服器較遠，最好使用 CDNS。
2. 影響很大（也可以考慮gzip）

改善 LCP

1. 將資源延後到稍後（腳本中的 defer/async）

<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

1. 請不要移動元素，即經驗法則
2. 對於廣告，我們需要提及這是分配的 div 的最大高度
3. 假設我們可以在底部修復 cookie 橫幅。然後，與我們將它們顯示在頂部相比，將會有很大的提升，並且當用戶單擊“接受”並消失時，我們的佈局結構將不會受到影響
4. 我們的目標是 0.01 (0.059) (CLS)(LightBox)
5. 對於圖像標籤，我們可以指定寬度和高度屬性

改善 FID

a.不要將所有事情推遲到最後，因為假設您的LCP 已完成並且用戶嘗試與UI 交互，但正如我們所做的一切推遲瀏覽器直到將它們加載到後台一樣，所以這不是一個好主意一切都推遲。

只有不需要立即的js文件，我們可以延後。

參考：-
https://frontendmasters.com/courses/web-perf

以上是Web 應用程式的效能改進的詳細內容。更多資訊請關注PHP中文網其他相關文章！