建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
想象一下：你正在加載一個(gè)網(wǎng)站，它看起來(lái)已經(jīng)準(zhǔn)備好了。您單擊博客特色圖片閱讀文章，突然整個(gè)頁(yè)面都發(fā)生了變化，因?yàn)閯倓偧虞d了其他內(nèi)容。然后您單擊完全不同的內(nèi)容并加載一個(gè)您從未想過(guò)的頁(yè)面。如果您自己遇到過(guò)這個(gè)問(wèn)題，您就會(huì)知道累積布局偏移 (CLS) 如何對(duì)站點(diǎn)的用戶(hù)體驗(yàn) (UX)產(chǎn)生負(fù)面影響。
累積布局偏移(CLS) 是頁(yè)面布局在加載時(shí)發(fā)生多少偏移的術(shù)語(yǔ)，在本文中，我們將深入探討它的含義。我們將向您展示如何衡量CLS，并解釋什么是好分?jǐn)?shù)。然后我們將討論如何優(yōu)化您網(wǎng)站的CLS分?jǐn)?shù)。
什么是累積布局偏移 (CLS)？
沒(méi)有比視覺(jué)示例更好的方法來(lái)說(shuō)明高CLS分?jǐn)?shù)（意味著來(lái)自Google PageSpeed Insights的任何超過(guò)0.10的任何內(nèi)容）代表什么。這是一個(gè)布局隨著頁(yè)面加載而不斷變化的網(wǎng)站。請(qǐng)注意，我們?cè)诓东@它時(shí)根本沒(méi)有滾動(dòng)。我們的視口保持不變，但頁(yè)面本身發(fā)生了巨大的變化：
作為訪(fǎng)問(wèn)此網(wǎng)站的用戶(hù)，您可能不確定它何時(shí)真正完成加載。你可能會(huì)嘗試點(diǎn)擊一個(gè)新聞故事，但布局卻發(fā)生了巨大的變化。結(jié)果你最終在錯(cuò)誤的頁(yè)面上，你不得不浪費(fèi)時(shí)間回去。根據(jù)頁(yè)面的不同，這可能會(huì)發(fā)生多次。如果是這樣，你很有可能會(huì)離開(kāi)。
您的用戶(hù)也將如此。
網(wǎng)站越復(fù)雜，就越有可能獲得高CLS分?jǐn)?shù)。對(duì)于標(biāo)志性的Google主頁(yè)等簡(jiǎn)單布局，沒(méi)有CLS，因?yàn)樗鼈儼脑睾苌伲?/p>
這并不是說(shuō)所有復(fù)雜的網(wǎng)站都有很高的CLS分?jǐn)?shù)。以亞馬遜為例。沒(méi)有人會(huì)說(shuō)這家電子商務(wù)巨頭使用簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)。然而，在瀏覽其目錄時(shí)幾乎看不到布局變化。
布局變化的發(fā)生是因?yàn)闉g覽器傾向于異步加載頁(yè)面元素。更重要的是，您的頁(yè)面上可能存在初始尺寸未知的媒體元素。這種組合意味著瀏覽器在加載完成之前不知道單個(gè)元素將占用多少空間。因此，劇烈的布局轉(zhuǎn)變。
CLS的有趣之處在于它可以使用各種工具進(jìn)行客觀測(cè)量，但它也是以用戶(hù)為中心的，因?yàn)槊總€(gè)用戶(hù)的設(shè)備都會(huì)影響您網(wǎng)站布局的變化方式。雖然您無(wú)法控制該方面，但您當(dāng)然可以采取預(yù)防措施，使其影響最小。
CLS（英文全稱(chēng)Cumulative Layout Shift）是Google 衡量的三個(gè)核心Web要素之一，可幫助其確定您的網(wǎng)站是否提供強(qiáng)大的用戶(hù)體驗(yàn) (UX)。Core Web Vitals其他兩個(gè)要素是First Input Delay (FID)和Largest Contentful Paint (LCP)，它們也絕對(duì)值得您為優(yōu)化付出任何努力。
如何測(cè)量CLS
確定您的網(wǎng)站是否顯示明顯的布局變化相對(duì)簡(jiǎn)單。首先，我們建議您嘗試從各種設(shè)備訪(fǎng)問(wèn)您的網(wǎng)站，并要求其他人也這樣做。這樣做時(shí)，您可以觀察頁(yè)面加載時(shí)布局是否保持一致。
您可能會(huì)發(fā)現(xiàn)CLS的體驗(yàn)可能會(huì)有很大差異。這不僅取決于您的網(wǎng)站的優(yōu)化程度，還取決于您使用的設(shè)備?？紤]到這一點(diǎn)，衡量網(wǎng)站CLS的最佳工具是PageSpeed Insights。這與Google的Core Web Vitals直接相關(guān)，因此您可以直接了解您的CLS分?jǐn)?shù)如何影響Google如何看待您的網(wǎng)站。
通過(guò)此服務(wù)，您可以輸入一個(gè) URL并根據(jù) Google過(guò)去28天收集的數(shù)據(jù)接收該URL的總體性能得分。該分?jǐn)?shù)考慮了幾個(gè)指標(biāo)，包括 CLS、FCP和LCP。
對(duì)于這個(gè)測(cè)試，我們選擇了一個(gè)沒(méi)有明顯CLS的網(wǎng)站。PageSpeed Insights證實(shí)了我們的懷疑，因?yàn)樗詮?qiáng)大的CLS得分返回了壓倒性的積極結(jié)果。
請(qǐng)注意，PageSpeed Insights為每個(gè)分?jǐn)?shù)提供了一個(gè)百分比細(xì)分。在這種情況下，91%的用戶(hù)在加載測(cè)試網(wǎng)站時(shí)經(jīng)歷了零布局偏移。然而，其余的參觀者確實(shí)經(jīng)歷了某種程度的布局轉(zhuǎn)變。
當(dāng)涉及到CLS和其他Core Web Vitals時(shí)，這是意料之中的。用戶(hù)體驗(yàn)會(huì)因他們?cè)L問(wèn)的設(shè)備、互聯(lián)網(wǎng)連接和許多其他因素而有很大差異。幾乎沒(méi)有辦法考慮到?jīng)]有用戶(hù)體驗(yàn)過(guò)CLS，但您絕對(duì)可以采取預(yù)防措施來(lái)優(yōu)化它，使百分比盡可能低。
在現(xiàn)場(chǎng)數(shù)據(jù)之上，PageSpeed Insights還提供它所謂的實(shí)驗(yàn)室數(shù)據(jù)。這些是基于單次測(cè)試的性能分?jǐn)?shù)，而不是長(zhǎng)時(shí)間收集的數(shù)據(jù)（被視為現(xiàn)場(chǎng)數(shù)據(jù)）。
在我們的測(cè)試中，我們的CLS分?jǐn)?shù)為零，這意味著沒(méi)有布局偏移。對(duì)于這一特定的測(cè)試。現(xiàn)在讓我們將它與另一個(gè)沒(méi)有獲得如此高CLS分?jǐn)?shù)的網(wǎng)站進(jìn)行比較。
為了符合Google的標(biāo)準(zhǔn)，您的CLS分?jǐn)?shù)應(yīng)低于0.10。以上任何內(nèi)容都意味著布局中存在顯著的、明顯的變化，這會(huì)導(dǎo)致糟糕的用戶(hù)體驗(yàn)。
如何確定導(dǎo)致布局偏移的原因
如果您想確定哪些元素導(dǎo)致您網(wǎng)站上的布局發(fā)生變化，您可以使用Chrome開(kāi)發(fā)工具。如果您打開(kāi)工具 (CTRL-SHIFT-I) 并跳轉(zhuǎn)到性能 選項(xiàng)卡，您將能夠在瀏覽網(wǎng)絡(luò)時(shí)記錄性能測(cè)試。
停止錄制后，Chrome Dev Tools將返回一個(gè)時(shí)間軸，顯示加載時(shí)間、單個(gè)請(qǐng)求和 Core Web Vitals。從此時(shí)間線(xiàn)中，您可以選擇在Experience下列出的各個(gè)Layout Shift事件。這樣，您就可以看到它們對(duì)應(yīng)于哪些元素。
一旦你知道是什么元素導(dǎo)致了布局變化，你就可以采取措施來(lái)解決這個(gè)問(wèn)題。我們將在下一節(jié)討論這一點(diǎn)。
如果您想監(jiān)控您網(wǎng)站的Core Web Vitals，我們建議您設(shè)置一個(gè)Google Search Console帳戶(hù)。您將能夠從Search Console監(jiān)控性能指標(biāo)和Core Web Vitals，這對(duì)于搜索引擎優(yōu)化 (SEO) 來(lái)說(shuō)是一個(gè)福音。我們認(rèn)為定期監(jiān)控Search Console符合您的最佳利益，無(wú)論如何，但擁有您正在跟蹤的特定指標(biāo)永遠(yuǎn)不會(huì)有什么壞處。
如何優(yōu)化您網(wǎng)站的CLS分?jǐn)?shù)
總的來(lái)說(shuō)，高CLS分?jǐn)?shù)有兩大罪魁禍?zhǔn)祝好襟w文件和廣告。例如，如果您上傳一個(gè)分辨率很高的圖片文件，但沒(méi)有指定它的高度和寬度，則很可能會(huì)破壞您的頁(yè)面布局。
在網(wǎng)站性能方面，最好使用已經(jīng)是您將要顯示的精確尺寸的圖像。這樣，瀏覽器就不必花費(fèi)處理能力（和時(shí)間）來(lái)適當(dāng)?shù)卣{(diào)整它們的大小。然而，這并不總是可能的。如果不是，您應(yīng)該為您顯示的每個(gè)圖像設(shè)置寬度和高度屬性。這樣，用戶(hù)的瀏覽器將準(zhǔn)確地知道圖像適合的位置，并且不需要在最后一秒移動(dòng)布局。
以下是這些屬性在 HTML 中的外觀：
如果您使用WordPress，一些圖像優(yōu)化插件可以在您上傳文件時(shí)自動(dòng)調(diào)整文件大小，這會(huì)負(fù)責(zé)設(shè)置必要的寬度和高度屬性。
當(dāng)涉及到響應(yīng)式圖像時(shí)，您可以依靠CSS而不是手動(dòng)聲明寬度和高度。CSS使您能夠使用max-width屬性來(lái)告訴瀏覽器圖像應(yīng)該占據(jù)視口的哪個(gè)百分比：
img {
max-width: 90vw;
height: auto;
}
在這個(gè)例子中，我們告訴瀏覽器縮放圖像，使其占據(jù)用戶(hù)視口的 90%。同時(shí)，我們將height屬性設(shè)置為auto，以便瀏覽器根據(jù)圖像的新寬度和縱橫比計(jì)算理想的高度。
與圖像相同的基本原理適用于廣告。通常，您將使用iframe，有時(shí)廣告網(wǎng)絡(luò)會(huì)使用動(dòng)態(tài)大小的元素。這可能會(huì)對(duì)您的頁(yè)面布局造成嚴(yán)重破壞。
您可以為它們保留區(qū)域，而不是讓廣告網(wǎng)絡(luò)決定您網(wǎng)站上的廣告應(yīng)該有多大。這意味著聲明廣告區(qū)域的寬度和高度屬性并設(shè)置回退以防它們不加載，因此空白空間不會(huì)導(dǎo)致布局偏移。
您可以對(duì)任何您想要的廣告容器使用相同類(lèi)型的CSS和內(nèi)嵌樣式，無(wú)論投放什么廣告，都可以將其鎖定在適當(dāng)?shù)奈恢谩?/p>
累積布局偏移 (CLS) 常見(jiàn)問(wèn)題
CLS可能比LCP和FCP指標(biāo)更難掌握?？紤]到這一點(diǎn)，讓我們回顧一下用戶(hù)對(duì)CLS的一些常見(jiàn)問(wèn)題，以確保您不會(huì)遺漏任何關(guān)鍵信息。
CLS如何影響我網(wǎng)站的性能？
從理論上講，您可以擁有一個(gè)速度非?？斓木W(wǎng)站，但其CLS分?jǐn)?shù)仍然相對(duì)較低。與其他Core Web Vitals一樣，CLS分?jǐn)?shù)可能與整體網(wǎng)站性能沒(méi)有直接關(guān)系。您的網(wǎng)站可能運(yùn)行得非?？?，但在加載時(shí)，它會(huì)像手風(fēng)琴一樣展開(kāi)。即便如此，大的布局變化肯定會(huì)對(duì)網(wǎng)站的用戶(hù)體驗(yàn)產(chǎn)生負(fù)面影響。谷歌認(rèn)為這非常重要。這就是為什么谷歌如此重視這個(gè)數(shù)據(jù)點(diǎn)的原因。
CLS比FCP或LCP分?jǐn)?shù)重要嗎？
很多用戶(hù)比CLS更關(guān)注FCP和LCP分?jǐn)?shù)。這是因?yàn)檫@兩個(gè)指標(biāo)更容易與網(wǎng)站性能相關(guān)聯(lián)。盡管FCP也是一個(gè)以用戶(hù)為中心的指標(biāo)，但CLS很難在大量用戶(hù)中進(jìn)行一致的衡量。
這三個(gè)指標(biāo)構(gòu)成了Google Core Web Vitals。這意味著，如果您忽略其中之一，您將面臨在相關(guān)搜索結(jié)果中排名較低的風(fēng)險(xiǎn)。確保您的站點(diǎn)針對(duì)低CLS進(jìn)行了優(yōu)化通常只會(huì)對(duì)LCP和FCP等站點(diǎn)性能產(chǎn)生積極影響。如果最大的內(nèi)容繪制在用戶(hù)看到后立即被推下屏幕，那么快速的加載時(shí)間有多大用處？
怎樣才算好的CLS分?jǐn)?shù)？
從數(shù)字上看，谷歌認(rèn)為低于0.10的任何東西都是一個(gè)很好的CLS分?jǐn)?shù)。但是，如果您采取正確的步驟，獲得0的CLS分?jǐn)?shù)并不是不可能的，并且在優(yōu)化良好的網(wǎng)站中這相對(duì)普通。但是請(qǐng)記住，即使是經(jīng)常得分為0的網(wǎng)站，也可能有一小部分用戶(hù)經(jīng)歷了變化。這是您無(wú)法控制的，您所能做的就是說(shuō)明大多數(shù)用戶(hù)的CLS為 0。
小結(jié)
在您的網(wǎng)站上提供強(qiáng)大的用戶(hù)體驗(yàn)有很多因素。理想情況下，它應(yīng)該加載速度快。應(yīng)該很容易互動(dòng)。它不應(yīng)該在元素出現(xiàn)時(shí)移動(dòng)布局位置。劇烈的布局變化會(huì)導(dǎo)致挫折和誤點(diǎn)擊。這些會(huì)導(dǎo)致更高的跳出率。這對(duì)任何網(wǎng)站都不利。
CLS是Google用來(lái)衡量您網(wǎng)站整體用戶(hù)體驗(yàn)的核心網(wǎng)絡(luò)要素之一。用戶(hù)首先是您擁有網(wǎng)站的全部原因。他們的經(jīng)驗(yàn)是優(yōu)先級(jí)1。低CLS分?jǐn)?shù)（低于0.10）意味著您的網(wǎng)站應(yīng)該可以流暢地加載，并且其布局的每個(gè)方面都會(huì)從一開(kāi)始就出現(xiàn)在正確的位置。
分享題目：什么是累計(jì)布局偏移(CLS)及應(yīng)該如何優(yōu)化提升
URL標(biāo)題：http://fisionsoft.com.cn/article/cdceojp.html
