首頁  >  文章  >  web前端  >  Web 應用程式的效能改進

Web 應用程式的效能改進

王林
王林原創
2024-08-25 06:32:42470瀏覽

Performance Improvement for Web Applications

網路生命

  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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn