原文 | https://blog.bitsrc.io/how-to-improve-web-vitals-with-css-c7ca80b8369f

原譯 | 小愛

Web Vitals 可幫助你快速跟蹤和了解你網(wǎng)站在性能方面的表現(xiàn)。因此，了解如何改進(jìn)它們至關(guān)重要。

因此，在本文中，我將討論 CSS 如何影響 Web Vitals 并學(xué)習(xí)如何通過(guò)正確的 CSS 使用來(lái)優(yōu)化它們。

CSS 如何影響 Web Vitals

CSS 是一種渲染阻塞資源，這意味著在構(gòu)建 CSS 對(duì)象模型 (CSSOM) 之前，瀏覽器不會(huì)渲染任何處理過(guò)的數(shù)據(jù)。

我們應(yīng)該將 CSS 保持在最低限度并盡快交付，以最大限度地減少應(yīng)用程序渲染等待時(shí)間。

那么，讓我們看看如何正確使用 CSS 來(lái)改進(jìn) Web Vitals。

1、 將內(nèi)容插入 DOM 時(shí)最小化布局偏移

當(dāng)你在網(wǎng)頁(yè)中包含安裝消息或 Cookie 通知時(shí)，它們會(huì)在底層內(nèi)容加載后彈出。在大多數(shù)情況下，這可能會(huì)導(dǎo)致網(wǎng)頁(yè)內(nèi)容發(fā)生一點(diǎn)偏移。

這種行為稱為布局偏移，建議將這些內(nèi)容偏移保持在最低限度，以改善應(yīng)用程序加載時(shí)間和用戶體驗(yàn)。

如果你使用 Lighthouse 工具監(jiān)控 Web Vitals，它將在“避免大的布局偏移”部分下顯示所有置換的頁(yè)面元素。

這些結(jié)果可能不包括安裝消息，因?yàn)樗诩虞d時(shí)不會(huì)改變。相反，它會(huì)在頁(yè)面上移動(dòng)它下面的內(nèi)容（div.af.jj.iu 和 div.lc.af.ld）。

我們可以通過(guò)使用絕對(duì)定位或固定定位輕松解決這個(gè)問(wèn)題。

例如，我們可以將安裝消息放置在頁(yè)面頂部或底部，僅使用 2 個(gè) CSS 樣式來(lái)解決此問(wèn)題。

.banner {  position: fixed;  bottom: 0;}

2、使用 CSS 代替背景圖片

顧名思義，LCP 是指網(wǎng)頁(yè)上最大的內(nèi)容繪制元素。在大多數(shù)情況下，圖像、視頻和大文本塊被歸類為網(wǎng)頁(yè)的 LCP。

LCP 加載時(shí)間可以通過(guò) LCP 元素加載和大尺寸圖像或視頻增加 LCP 加載時(shí)間的時(shí)間來(lái)衡量。

因此，我們應(yīng)該始終嘗試在 Web 應(yīng)用程序中使用壓縮圖像作為替代方法，以避免加載時(shí)間過(guò)長(zhǎng)。

例如，下面的網(wǎng)頁(yè)使用了大尺寸圖片作為消息的背景圖片。

我們可以使用 CSS 漸變屬性作為背景，而不是使用此圖像，從而獲得相同的效果：

background: linear-gradient(150deg, #ffff00 20%, #bdfff9 90%)

注意：頁(yè)面上的 LCP 元素可以根據(jù)頁(yè)面最初呈現(xiàn)時(shí)向用戶公開的規(guī)定在頁(yè)面之間更改。

3、明確定義圖像的寬度和高度

圖像的尺寸只有在瀏覽器加載后才能確定。

在頁(yè)面渲染后加載圖像時(shí)，如果沒有留出空間，它將移動(dòng)其他元素并占用所需的區(qū)域，從而導(dǎo)致顯著的布局偏移。

當(dāng)你使用較慢的網(wǎng)絡(luò)或大圖像時(shí)，這些布局變化會(huì)變得更加明顯。

你可以使用 Lighthouse 工具來(lái)檢查你的網(wǎng)頁(yè)，它會(huì)在“圖像元素具有明確的寬度和高度”部分下顯示布局變化的圖像。

<img data-bit-id=”teambit.evangelist/elements/image” src="https://static.bit.dev/homepage-bit/process-2.svg" alt="illustration">

上面的例子顯示了沒有高度和寬度屬性的圖像。要解決此問(wèn)題，你需要做的就是為所有圖像定義寬度和高度。

<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 替換動(dòng)畫

在布局轉(zhuǎn)換方面，動(dòng)畫對(duì) Web Vitals 的影響最大。因此，我們應(yīng)該始終嘗試用 CSS 屬性（如轉(zhuǎn)換、不透明度和過(guò)濾器）替換動(dòng)畫，因?yàn)樗鼈兲峁┝烁鼜?qiáng)大的替代方案。

“布局觸發(fā)”和“類動(dòng)畫”是對(duì)頁(yè)面元素影響最大的兩種動(dòng)畫類型。

Lighthouse“避免非合成動(dòng)畫”審核將幫助你找到表現(xiàn)不佳的動(dòng)畫。

例如，假設(shè)上面的進(jìn)度圈動(dòng)畫是通過(guò)過(guò)渡 margin-left 屬性來(lái)實(shí)現(xiàn)的。

.circle.circle-progress{  animation: slideIn 1s 1 ease;}
@keyframes slideIn {  from {    margin-left: -100%;  }  to {    margin-left: 0;  }}

我們可以通過(guò)用 transform: translateX() 替換邊距過(guò)渡來(lái)提高這個(gè)動(dòng)畫的性能。

.circle.circle-progress{  animation: slideIn 1s 1 ease;}
@keyframes slideIn {  from {    transform: translateX(-100%);  }
  to {    transform: translateX(0);  }}

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)