CLS（Cumulative Layout Shift，累計布局偏移）是衡量網(wǎng)頁加載穩(wěn)定性的關(guān)鍵指標。較低的 CLS 值有助于提升頁面加載表現(xiàn)，并在搜索結(jié)果中獲得更好的位置。Astra 主題提供了多項針對 CLS 問題的優(yōu)化方案，幫助網(wǎng)站提升頁面結(jié)構(gòu)的穩(wěn)定性。

什么是 CLS

CLS 表示網(wǎng)頁在加載過程中，視覺元素是否發(fā)生意外移動。例如圖片、文字或按鈕加載速度不一致，導(dǎo)致頁面內(nèi)容上下跳動，這種現(xiàn)象會增加 CLS 分數(shù)。分數(shù)越低，代表頁面越穩(wěn)定。

常見導(dǎo)致 CLS 的原因

• 字體延遲加載
• SVG logo 無固定高度
• 移動端頭部顯示不穩(wěn)定
• 圖片未設(shè)置尺寸
• 內(nèi)容動態(tài)加載
• iframe 無定義大小

Astra 中的優(yōu)化方法

本地加載 Google 字體

傳統(tǒng)字體加載會遠程調(diào)用 Google 的服務(wù)器，存在延遲。Astra 提供本地加載功能：

路徑：Astra > 設(shè)置 > 性能，啟用“本地加載 Google Fonts”

啟用后，字體資源儲存在站點本地，減少加載時的抖動和等待。

字體預(yù)加載

字體預(yù)加載功能會讓瀏覽器優(yōu)先處理關(guān)鍵字體，避免頁面初始渲染時出現(xiàn)文字延遲，減少排版突變現(xiàn)象。

將 Google 字體存儲在本地后，無需遠程請求，字體加載速度更快，有助于獲得理想的 CLS 零分成績。

設(shè)置 SVG logo 高度

SVG 圖像本身不包含高度數(shù)據(jù)。如果未設(shè)置，加載后可能導(dǎo)致頭部位置發(fā)生變化。Astra 會自動識別并為 logo 設(shè)置高度，保持頁面頭部穩(wěn)定。

穩(wěn)定移動端頭部顯示

部分頁面在移動設(shè)備加載時，頭部區(qū)域會短暫閃動。Astra 采用靜態(tài)樣式和響應(yīng)斷點方案，避免這種情況發(fā)生，提升整體流暢度。

給圖片添加尺寸

未設(shè)定尺寸的圖片在加載時容易引發(fā)位置錯亂。在使用 Astra 構(gòu)建頁面時，可在圖像模塊中設(shè)置寬度比例或手動輸入像素值，確保圖像在加載前就預(yù)留好空間。

避免頂部動態(tài)加載內(nèi)容

常見的通知欄、訂閱提示或推薦區(qū)塊如果在頁面中部或頂部插入，會因為延遲加載而導(dǎo)致內(nèi)容跳動。建議將這類動態(tài)區(qū)域放置在頁面底部，減少布局變動。

iframe 添加固定尺寸

嵌入的內(nèi)容如視頻、地圖、表單等 iframe 元素，如果沒有預(yù)設(shè)尺寸，在加載過程中容易讓頁面結(jié)構(gòu)發(fā)生變化。為每一個 iframe 添加具體寬高值，可以穩(wěn)定其在頁面中的占位效果。

總結(jié)

優(yōu)化 CLS 需要從字體加載、圖像尺寸、頭部結(jié)構(gòu)、嵌入內(nèi)容等多個方面同步處理。Astra 在主題設(shè)置中提供了相關(guān)功能模塊，減少頁面加載過程中元素移動帶來的視覺干擾。保持頁面結(jié)構(gòu)清晰有序，有助于提升整體頁面質(zhì)量和訪問效率。

最近更新

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息