Home Blogs 前端開發人員如何修復累積佈局轉移
Applications

前端開發人員如何修復累積佈局轉移

About The Author

Outline

谷歌再次更新其算法,而且它很大。 核心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的排名中出現。

Tags

Just For You