原文 | https://blog.bitsrc.io/how-to-improve-web-vitals-with-css-c7ca80b8369f
原譯 | 小愛
Web Vitals 可幫助你快速跟蹤和了解你網站在性能方面的表現。是以，了解如何改進它們至關重要。
是以，在本文中，我将讨論 CSS 如何影響 Web Vitals 并學習如何通過正确的 CSS 使用來優化它們。
CSS 如何影響 Web Vitals
CSS 是一種渲染阻塞資源，這意味着在建構 CSS 對象模型 (CSSOM) 之前，浏覽器不會渲染任何處理過的資料。
我們應該将 CSS 保持在最低限度并盡快傳遞，以最大限度地減少應用程式渲染等待時間。
那麼，讓我們看看如何正确使用 CSS 來改進 Web Vitals。
1、 将内容插入 DOM 時最小化布局偏移
當你在網頁中包含安裝消息或 Cookie 通知時，它們會在底層内容加載後彈出。在大多數情況下，這可能會導緻網頁内容發生一點偏移。
這種行為稱為布局偏移，建議将這些内容偏移保持在最低限度，以改善應用程式加載時間和使用者體驗。
如果你使用 Lighthouse 工具監控 Web Vitals，它将在“避免大的布局偏移”部分下顯示所有置換的頁面元素。
這些結果可能不包括安裝消息，因為它在加載時不會改變。相反，它會在頁面上移動它下面的内容（div.af.jj.iu 和 div.lc.af.ld）。
我們可以通過使用絕對定位或固定定位輕松解決這個問題。
例如，我們可以将安裝消息放置在頁面頂部或底部，僅使用 2 個 CSS 樣式來解決此問題。
.banner {
position: fixed;
bottom: 0;
} 2、使用 CSS 代替背景圖檔
顧名思義，LCP 是指網頁上最大的内容繪制元素。在大多數情況下，圖像、視訊和大文本塊被歸類為網頁的 LCP。
LCP 加載時間可以通過 LCP 元素加載和大尺寸圖像或視訊增加 LCP 加載時間的時間來衡量。
是以，我們應該始終嘗試在 Web 應用程式中使用壓縮圖像作為替代方法，以避免加載時間過長。
例如，下面的網頁使用了大尺寸圖檔作為消息的背景圖檔。
我們可以使用 CSS 漸變屬性作為背景，而不是使用此圖像，進而獲得相同的效果：
background: linear-gradient(150deg, #ffff00 20%, #bdfff9 90%) 注意：頁面上的 LCP 元素可以根據頁面最初呈現時向使用者公開的規定在頁面之間更改。
3、明确定義圖像的寬度和高度
圖像的尺寸隻有在浏覽器加載後才能确定。
在頁面渲染後加載圖像時，如果沒有留出空間，它将移動其他元素并占用所需的區域，進而導緻顯着的布局偏移。
當你使用較慢的網絡或大圖像時，這些布局變化會變得更加明顯。
你可以使用 Lighthouse 工具來檢查你的網頁，它會在“圖像元素具有明确的寬度和高度”部分下顯示布局變化的圖像。
<img data-bit-id=”teambit.evangelist/elements/image” src="https://static.bit.dev/homepage-bit/process-2.svg" alt="illustration"> 上面的例子顯示了沒有高度和寬度屬性的圖像。要解決此問題，你需要做的就是為所有圖像定義寬度和高度。
<img data-bit-id=”teambit.evangelist/elements/image” src="https://static.bit.dev/homepage-bit/process-2.svg" width="2000" height="600" alt="illustration"> 4、用 CSS 替換動畫
在布局轉換方面，動畫對 Web Vitals 的影響最大。是以，我們應該始終嘗試用 CSS 屬性（如轉換、不透明度和過濾器）替換動畫，因為它們提供了更強大的替代方案。
“布局觸發”和“類動畫”是對頁面元素影響最大的兩種動畫類型。
Lighthouse“避免非合成動畫”稽核将幫助你找到表現不佳的動畫。
例如，假設上面的進度圈動畫是通過過渡 margin-left 屬性來實作的。
.circle.circle-progress{
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
} 我們可以通過用 transform: translateX() 替換邊距過渡來提高這個動畫的性能。
.circle.circle-progress{
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
} 最後的想法
正如我之前提到的，樣式表是渲染阻塞的，它會暫停加載其他内容，直到樣式表被加載和處理。
是以，我們在應用程式中使用樣式、圖像和視訊時應該三思而後行，并對其進行優化以提高應用程式性能。
除了這些最佳實踐之外，删除未使用的 CSS、内聯關鍵 CSS 和推遲非關鍵 CSS ，也是非常有必要的。
我想現在你對如何正确使用 CSS 來改進 Web Vitals 有了更好的了解。是以，我邀請你嘗試這些技巧，以增強你的下一個 Web 應用程式的使用者體驗。
最後，感謝你的閱讀，程式設計愉快！