谷歌再次更新其算法，而且它很大。 核心Web虛擬化 更新將於5月推出，所有更新都涉及速度和用戶體驗。 更具體地說,Google將開始測量以下所有項目:最大的Contentful Pain (LCP)，首次輸入延遲(FID)和累積佈局偏移(CLS)。
在這篇部落格文章中，我們將只關注以下元素之一：累積佈局移動以及作爲前端開發人員可以做些什麼來修復它。
如何知道您是否有累積的佈局位移
使用 Page Speed Insights 以量化方式查看您網站的內容變化(以及LCP和FID等其他指標)。
因爲核心Web虛擬是關於用戶體驗的，所以使用Airbrake性能監控之類的工具可能會有所幫助 。 藉助專爲開發人員設計的性能監控工具，您可以通過測量Apdex分數，延遲，查詢和路由資訊等功能，即時瞭解應用程式的用戶體驗 。
將其與Moovweb相結合，它可以完全優化您的網站速度，您將處於一個絕佳的位置，不僅可以測量您的應用程式的用戶體驗，而且還能提前五步。
一旦您知道您的網站在UX和CLS的位置，就應該修復它了。
前端開發人員如何修復累積佈局變化
你有沒有試過點擊網站上的文章,只是讓它突然移動,你最終點擊其他東西? 或者，也許您正處於閱讀文章的中間，一切都會下降。 是的，這些是累積佈局位移的示例。 載入其他內容後載入網站上的元素時，會發生累積佈局移動。 它可能會對用戶非常煩人。 Google不僅會在這方面給您提供幫助，而且您還會失去希望訪問其他網站而不是等待載入的潛在用戶。 在CLS問題影響您的用戶之前，請花時間修復這些問題，以防止出現這種情況。
作爲前端開發人員，您可以採取以下四種措施來減少網站上的累積佈局轉移：
更新字體
字型會增加網站的字元和個性，但這些特殊字型會付出代價。 由於字體文件的性質很大，瀏覽器往往使用FOIT進行補償，也稱爲隱藏文本的閃爍。 FOIT會嚴重減慢網頁載入時間。
不應依賴FOIT，而是應使用“FLASH of Unstyleed Text”方法(fout)。 將網站文本更改爲fout的最簡單方法是使用以下方法：
傳統上，您將字體代碼如下：@font-face { font-family: Georgia;}
相反，您應該使用以下代碼位：@font-face { font-family: Georgia; font-display: swap;}
“Font-display”(字體顯示)立即使用系統字體通知API t0顯示字體。 一旦您的字體文件載入,它將替換爲您想要在您的網站上的字體。
不幸的是, fout方法可能無法用於所有瀏覽器。 如果沒有，則瀏覽器將恢復爲載入字體的預設行爲。 您可以使用此工具查看這些行爲的詳細細分 。
第二種方法可用於消除字體文件的長載入時間，但它不像更新代碼行那樣簡單。
就像上一種方法一樣，您將等待預設字體完全載入，然後將其切換爲自定義字體。 不同之處在於您需要深入瞭解網站的CSS和JavaScript代碼。
首先，您希望通過更新CSS避免在初始頁面載入時使用自定義字體。 使用系統字體儘快下載頁面上的文本。
通過使用JavaScript代碼,您可以實現Font Face Observer。 此代碼將在載入Web字體時監視並通知您。 通過使用滾動事件，Font Face Observer可以快速載入字體。 有關完整的指南，請查看 FontfaceObserver GitHub頁面。
作爲前端開發人員，您可以進行一些簡單的更改，以縮短字體載入時間。
修復網站上的圖像
圖片在您的網站上的載入方式將顯著影響和減少累積佈局變化。 沒有屬性上傳的圖像往往會導致大量的移動。 這就是爲什麼在向網站添加圖像時最好使用以下做法的原因：
在圖像和影片元素上使用大小屬性
在此更新之前，爲圖像添加“寬度”和“高度”屬性對您的網站在Google上的排名幾乎沒有影響。 現在，藉助核心虛擬化更新，它將帶來顯著的變化。 您將需要額外的時間從這裏開始爲圖像添加屬性。
當您上傳圖像時：
例如： <H1>錯誤監控太棒了</H1>
<p>快速查找並修復損壞的代碼</p.>
<img src=” Erron_image.jpg”alt=”>
<P>使用正確的錯誤監控軟體,您可以保持代碼沒有錯誤。<>
發生以下情況：用戶的瀏覽器將首先讀取並下載HTML。 完成後，它將最終下載映像。 最終會發生的是網頁上的內容轉移，因爲瀏覽器爲圖像留出空間。
解決這個CLS問題很簡單:您只需要將高度和寬度屬性標籤添加到圖像中。
例如： <H1>錯誤監控太棒了</H1>
<p>快速查找並修復損壞的代碼</p.>
寬度=“450”高度=“450”>
<P>使用正確的錯誤監控軟體,您可以保持代碼沒有錯誤。<>
當您將寬度和高度新增至影像時，您會告訴瀏覽器在下載HTML文件時，在網頁上留出空間。
對於不太嚴格的方法,您也可以使用 CSS縱橫比框。
這兩種方法都不正確，但您必須使用其中一種方法來防止網站上的累積佈局變化。
小心放置動態廣告
廣告是可怕的,當談到內容佈局變化. 如果您不小心處理內容，他們會讓您的內容遍佈各地。
在您的網站上投放廣告時，請使用以下提示來防止內容發生變動：
-
就像圖片一樣,你需要確保廣告在你的網站上有足夠的預留空間。
-
不要將廣告放在網頁最上方。 這可能會導致其下面所有內容的內容發生變化。
-
將廣告放在網頁的中間或底部附近。
這些是動態廣告的最佳做法。 它們不僅會顯著改善用戶體驗，而且還會累積佈局變化。
小心嵌入式小部件
嵌入式小工具是網站的遊戲改變者。 它們允許您爲您的網站創建有趣和可移植的內容,但它們確實有顯著的缺點。 與圖像和廣告不同，在網站上爲小部件保留空間可能是一件很有挑戰性的事情。
說你有Twitter的小工具。 有時推文可能只有幾個字元長；有時，它可能包括圖像和鏈接，那麼當所需空間不斷變化時，您如何知道需要保留多少空間？
您可以通過在網站上保留空間來上傳嵌入的佔位符來修復此問題。 “怎麼會這樣?
您需要創建一個“GlobalKey”並將其分配給您的小部件。 一旦您有按鍵，就可以找到Widget的大小，並在網站上爲Widget保留適當的空間量。
結論
您只能使用幾種方法來減少網站上的累積佈局變化。 許多與CLS相關的問題涉及空間和保留足夠的空間在您的網站上圖像，廣告和小部件。 您上傳字體的方式也會顯著影響網站的速度。
請記住，隨着核心Web Vitals在5月推出，您應該立即開始進行這些更改，以避免在Google的排名中出現。
