CLS對(duì)網(wǎng)頁(yè)體驗(yàn)有什么影響？累計(jì)布局偏移Cumulative Layout Shift(CLS)是Core Web Vitals用來(lái)衡量網(wǎng)站視覺(jué)穩(wěn)定性的三個(gè)指標(biāo)之一。

簡(jiǎn)而言之,如果頁(yè)面的主要內(nèi)容加載到頁(yè)面上,然后由其他內(nèi)容(比如圖片)驅(qū)動(dòng),那么布局就會(huì)發(fā)生變化。

很多時(shí)候,當(dāng)訪(fǎng)客點(diǎn)擊按鈕或鏈接(如“閱讀更多內(nèi)容”按鈕)時(shí),版式發(fā)生改變,可能鏈接轉(zhuǎn)移,訪(fǎng)問(wèn)者最后點(diǎn)擊了其他內(nèi)容或廣告。

這無(wú)疑會(huì)破壞用戶(hù)體驗(yàn)。

谷歌認(rèn)可的最佳CLS標(biāo)準(zhǔn)<0.1？Google把影響評(píng)分描述為受手機(jī)內(nèi)容影響的部分。

若將一半(50%)屏幕內(nèi)容移至一半(25%),則屏幕受到75%的影響。

它表示效果分?jǐn)?shù)是0.75,而且距離分?jǐn)?shù)是0.25,因?yàn)閮?nèi)容移動(dòng)了視口的25%。

最后的結(jié)果是0.75*0.25=0.1875。

按照谷歌官方的說(shuō)法,超過(guò)0.1的CLS分?jǐn)?shù)將影響用戶(hù)體驗(yàn),應(yīng)該降低。

也就是說(shuō),當(dāng)CLS指標(biāo)小于0.1時(shí),有助于確保頁(yè)面具有用戶(hù)體驗(yàn)。

CLS提分小技巧大放送：1、創(chuàng)建硬編碼的單一尺寸廣告發(fā)布者可以在頁(yè)面頂部創(chuàng)建單一大小的廣告位置,只適用于硬編碼的廣告。

使用這種占位符可以確保布局沒(méi)有改變,但是以每個(gè)廣告位置都只有一個(gè)大小為代價(jià)。

2、推遲發(fā)布加載廣告一個(gè)發(fā)布者應(yīng)該考慮一個(gè)最佳做法,那就是延遲加載廣告,在實(shí)際需要之前不要載入廣告。

舉例來(lái)說(shuō),如果一個(gè)頁(yè)面有三個(gè)視窗,那么第三個(gè)視窗上的廣告將不會(huì)被載入,直到訪(fǎng)客到達(dá)第二個(gè)視窗。

但是這個(gè)缺點(diǎn)是沒(méi)有考慮到用戶(hù)的行為,如果滾動(dòng)速度比較快,超過(guò)占位符,則廣告載入太遲,延遲加載的廣告仍然會(huì)導(dǎo)致布局偏差。

另外,要注意延遲加載會(huì)破壞可視性。

3、利用實(shí)時(shí)數(shù)據(jù)優(yōu)化用戶(hù)體驗(yàn)利用實(shí)時(shí)數(shù)據(jù)為每一個(gè)訪(fǎng)客優(yōu)化個(gè)性化廣告體驗(yàn)。

有了數(shù)以百計(jì)的匿名數(shù)據(jù)點(diǎn),發(fā)布者可以個(gè)性化應(yīng)該放置什么樣的廣告,以及在頁(yè)面上的時(shí)間和地點(diǎn)。

這樣做不僅可以提高CLS得分而不會(huì)影響用戶(hù)體驗(yàn),而且還能改善站點(diǎn)延遲。