核心網絡重要工具

Google 推出的核心網頁指標(Core Web Vitals) 非常實用。最初關注性能時，我們關注的是：減少請求！緩存內容！縮小文件大小！雖然這些都與網頁性能密切相關，但它們是抽象相關的。對用戶而言，實際的網頁性能體現在：看到頁面內容需要等待多久？能夠實際與頁面交互（例如，在表單中輸入內容或點擊鏈接）需要多久？在我嘗試執行操作時，頁面內容是否會煩人地跳動？這就是核心網頁指標的巧妙之處：它們衡量這些方面。

Chrome DevTools 的Lighthouse 選項卡現在包含了這些指標：

密切關注這些指標非常重要，因為記住，除了這些數字一旦用戶訪問您的網站後會直接惠及用戶之外，它們還可能影響用戶是否會訪問您的網站。核心網頁指標正被納入SEO 和之前僅為AMP 頁面保留的新輪播要求中。

對一次性審核進行這些指標的跟踪很有用，但更重要的是隨著時間的推移觀察它們，以防止性能下降。 Calibre 等性能工具涵蓋了這些指標。 New Relic 也包含了這些指標。 SpeedCurve 跟踪這些指標。

累積佈局偏移(CLS) 是一個棘手的問題。例如，網站在文章頂部有一個廣告。對該廣告的請求是異步的，因此廣告很可能延遲出現並向下推文章內容。這不僅令人討厭，而且還會嚴重影響性能指標，最終影響SEO。

Nic Jansma 的“實際應用中的累積佈局偏移”提供了深入的探討。

CLS 不僅僅是“頁面是否執行此操作？”。如上圖所示，它有一個分數。我認為0 是一個好的目標，因為沒有任何版本的CLS 對任何人都有好處。這其中有很多細微之處，例如“綜合地”（例如，在無頭瀏覽器中，尤其是在性能工具中）以及在您實際網站上的真實用戶（稱為RUM 或真實用戶指標）進行跟踪。兩者都有用。

如果您需要解決CLS 問題，這可能很棘手。 SpeedCurve 有些新的工具可以提供幫助：

對於每次佈局偏移，我們都會顯示偏移前後兩幀的膠片。然後，我們圍繞移動的元素繪製一個紅色方框，突出顯示導致偏移的確切元素。每次偏移的佈局偏移分數也有助於您了解該偏移的影響以及它如何添加到累積分數。

我希望這將使根除和修復問題變得非常容易。特別是那些棘手的問題。我以前不知道這一點，但CLS 可能是由更細微的問題引起的，Mark Zeman 在文章中指出了這一點。例如：

• 僅水平移動的圖片輪播會觸發CLS。這感覺很糟糕，因為這正是它們應該做的，但顯然，您可以通過僅使用CSS transform 移動輪播來解決這個問題。
• 如果您有一個非常大的區域，則移動該區域的風險更大。如果它只移動一點點，它就會嚴重影響CLS。
• 未設置樣式文本的閃爍(FOUT) 是CLS 的原因。即使這齣於其他原因有利於性能！矛盾！這是使用完美字體回退的好藉口。

棘手但重要的問題。我確實需要將性能測試納入我的CI/CD 中，這將對解決這個問題大有幫助。越來越感覺網頁性能是Web 開發的一個完整的職業子類別。前端Web 開發人員確實需要了解這些內容並在某種程度上提供幫助，但我們已經有很多事情要做。

以上是核心網絡重要工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！