Google再次更新了它的算法，而且它很大。 Core Web Vitals更新將於5月推出，其重點在於速度和用戶體驗。 更具體地說，Google將開始測量以下所有項目：最大的影響難題(LCP)，首次輸入延遲(FID)和累積布局偏移(CLS)。
對於此部落格文章，我們將僅關注以下元素之一：累積版式偏移以及作為前端開發人員可以執行的修復操作。
如何知道您是否有累計版面配置位移
使用Page Speed Insights (頁面速度洞察)可以量化地查看您網站的內容變化情況(以及LCP和FID等其他指標)。
由於核心Web Vitals是關於用戶體驗的，因此使用諸如Airbrake性能監控之類的工具可能會很有幫助。 借助專為開發人員設計的性能監控工具，您可以通過測量Apdex分數，延遲，查詢和路由資訊等功能即時了解應用程式的用戶體驗。
將其與Moovweb相結合，Moovweb可以完全優化網站的速度，您將在一個極好的位置不僅可以測量應用程式的用戶體驗，而且可以保持五個步驟的領先。
一旦您知道您的網站的UX和CLS位置，就可以修復它了。
前端開發人員如何修正累計版面配置偏移
您是否曾嘗試點擊網站上的文章，結果突然移動，最後點擊其他內容？ 或者，您可能正在閱讀文章，而一切都會向下移動。 是的，這些都是累積版面配置位移的範例。 當您網站上的元素在其他所有項目載入後載入時，就會發生累積版面配置偏移。 它可能會使用戶感到非常煩惱。 谷歌不僅會對您進行這方面的調查，而且您還會失去那些寧願訪問其他網站而不是等待您的網站載入的潛在用戶。 在CLS問題影響用戶之前，花時間修復問題，以防止出現這種情況。
作為前端開發人員，您可以採取以下四個操作來減少網站上的累積版式偏移：
更新字體
字型可為網站增添字元和個人特色，但這些特殊字型是要付出代價的。 由於字體文件的性質較大，瀏攬器傾向於使用FOIT進行補償，也稱為不可見文本的閃光燈。 FOIT會嚴重減慢網頁載入時間。
不要依賴FOIT，您應該使用“無樣式文本閃光”方法(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>使用正確的錯誤監控軟體，您可以避免代碼錯誤。</p>
出現以下情況：用戶的瀏攬器將首先讀取並下載HTML。 完成後，它將最終下載映像。 最後發生的是網頁上的內容移動，因為瀏攬器為圖像騰出空間。
解決這個CLS問題很簡單：您只需將height和width屬性標記添加到圖像中。
例如：<H1>錯誤監控是極好的</ H1>
<p>快速查找並修復損壞的代碼</p>
寬度=“450”高度=“450”>
<p>使用正確的錯誤監控軟體，您可以避免代碼錯誤。</p>
當您新增圖像的寬度和高度時，您會告訴瀏覽器在網頁上留出空間，以便下載其他HTML文件。
對於較不嚴格的方法，您也可以使用CSS縱橫比框。
這兩種方法都不正確，但您必須使用其中一種方法來防止網站上的累積版面配置偏移。
小心放置動態廣告
廣告在內容版面變動方面非常糟糕。 如果您對內容不感興趣，他們將把您的內容帶到任何地方。
在您的網站上投放廣告時，請使用下列秘訣，以避免內容變動：
-
就像圖片一樣，你需要確保廣告有足夠的保留空間在你的網站.
-
請勿將廣告放在網頁最上方。 這可能會導致其下所有內容的內容發生變化。
-
將廣告放在網頁中間或底部附近。
這些是動態廣告的最佳做法。 它們不僅會顯著改善用戶體驗，而且還會產生累積版式偏移。
小心嵌入式小部件
嵌入式小工具是改變網站遊戲規則的工具。 它們允許您為您的網站創建有趣且可移植的內容，但它們確實存在重大缺陷。 與圖片和廣告不同，在網站上為小工具預留空間可能是一項挑戰。
假設您有Twitter的小工具。 有時推文長度可能只有幾個字元；有時可能包含圖像和鍊接，那麼當所需空間不斷變化時，您如何知道需要保留多少空間？
您可以通過在網站上保留空間來上傳嵌入的占位符來解決此問題。 但如何做到這一點呢？
您需要創建“GlobalKey”並將其分配給您的小部件。 擁有金鑰後，您就可以找到Widget的大小，並在網站上為Widget預留適當的空間。
結論
您只能使用幾種方法來減少網站上的累積版面配置偏移。 許多與CLS有關的問題涉及空間和保留足夠空間在您的網站上用於圖片，廣告和構件。 您上傳字型的方式也會大幅影響網站的速度。
請記住，隨着核心Web Vitals在5月份推出，您應該立即開始進行這些更改，以避免在Google的排名中下降。
