方格精選
如何令到網站更快更吸引？(三)
閱讀時間約 4 分鐘
Google 經常更新網站性能的指標和工具，務求在衡量網站方面的用戶體驗與時並進。那讓我們來看看今年Google 提出的網站性能基準其中之一：CLS — Cumulative Layout Shift 累計版面配置轉移。
之前我們已經介紹兩個今年Google 新提出的網站性能基準， Largest Contentful Paint 最大內容繪製，和 First Input Delay 首次輸入延遲。這次就看看 Cumulative Layout Shift 累計版面配置轉移。
你是否試過在開始閱讀一篇有趣的新聞文章時，因為所有文字突然向下移動而令你要重新找回剛才看到的部分？這種情況經常發生在不少網站，而這主要是因為那些內容周圍加載了不少廣告。
當用戶看到一個網站時，會自動把它分為各個視覺元素的部分。根據它們在頁面上的排列，用戶就能夠感知到它們之間的關係。這就是用戶如何確定相關內容的位置。而如果這些內容突然移動，例如在網站排版中加入新的元素，那麼用戶很有可能會因為要重新找回剛才理解中的內容而感到氣餒，甚至放棄再閱讀下去。或者更糟糕的是：用戶正要點擊一個鏈結或按鈕，但在手指按下前的一瞬間鏈結就移動了，最終點擊的其他不想按的部分。
大多數情況下，這類體驗只是令人討厭，但在某些情況下，它們會造成真正的傷害，而以往又難以用量化的方式來衡量優劣。不過，今次Google所提出的 Cumulative Layout Shift 就能夠解決這個問題。
什麼是Cumulative Layout Shift？
累計版面配置轉移是測量在頁面的整個生命週期中，發生的每個意外版面配置轉移其所有單個佈局轉移分數的總和。每當可見元素將其位置從一個渲染幀更改為下一幀時，都會發生版面配置偏移。這些元素包括：字體、圖像、影片、聯繫表單或是按鈕等，而CLS所顯示的數字自然越小越好。
根據Google官方說法，發生累計版面配置轉移的原因有五個：
- 缺少尺寸的圖片/影片；
- 缺少尺寸的廣告、內嵌元件（embed）以及 iframe 元件；
- 動態置入內容；
- 造成 FOIT (Flash Out Invisible Text) / FOUT (Flash Out of Style)的網站字體；
- 更新 DOM 前等待網路回應的動作；
如何改善累積版面配置轉移
對於大多數網站而言，跟從以下指引，就可以避免非預期的版面轉移：
- 確保在所有的圖片、影片元件上使用尺寸屬性，預留該元件所需要的空間。這個方式能夠確保當圖片、影片還在下載時，瀏覽器可以預先分配正確的空間大小；
- 不要在既有內容上再置入內容，除非那是為了回應使用者的互動。這可以確保版面配置轉移是在預期之內發生的；
- 盡量避免將廣告放置在頁面頂部附近，以免絕大部分的網頁內容會因為廣告的大小改變導致移位；
並非所有的版面轉移都是壞的，如果源自使用者互動（點擊連結、按下按鈕、打字進搜尋欄位），這是反而是正常不過的網頁特性。唯獨是非使用者預期的轉移，才會歸類在不好的頁面體驗。只要網頁設計者非常清楚在轉移發生是與使用者的互動有關，CLS的部分就能做好。
可以檢測實際環境和測試環境CLS的工具，有以下幾個：
Field tools
Lab tools
Ref：
更多資訊可以留意 ONES Publication 定期發佈的文章，亦可以聯絡我們，我們的網址是： https://ones.software
ONES PublicationWe share what we have learned about app and web development. Find us in ones.software. Email: hello@ones.software
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
內容交付網路（CDN）是一種網路架構，旨在提高用戶訪問網站內容的速度和效能。其基本原則是將網站內容分佈在全球的伺服器節點上。當使用者訪問網站時，CDN會根據使用者的地理位置和網路狀況，自動從最近的節點傳送內容，降低數據傳輸。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
隨著數位時代的快速發展，擁有一個出色的網站已成為企業和個人成功的不可或缺之一。然而，僅僅擁有一個網站不足以保持競爭力。
在現代競爭激烈的市場中，網站設計優化已成為企業吸引客戶的關鍵。一個經過優化的網站不僅能提高搜尋引擎排名，還能提供更好的用戶體驗，從而吸引更多的目標客戶。
舊網站改版是一個複雜的過程，而成功舊網站改版的關鍵在於確定清晰的目標和策略、基於用戶需求的設計、優化網站速度和性能、保持SEO優化，以及進行測試和迭代。
在現代網絡世界中，網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗，還能改善搜索引擎排名和轉換率。為了優化網站速度，我們可以從以下10個面向進行改進，包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
使用者體驗的三個核心指標 Core Web Vitals：LCP、INP、CLS，以及 RAIL Model 介紹。
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
當設計一頁式引流網頁時，需要考慮關鍵字研究和優化、內容優化、結構化數據標記、網頁速度優化、高品質的外部連結以及衡量和優化的策略。這些策略有助於提高網頁在搜索引擎中的排名和吸引目標用戶。
內容交付網路（CDN）是一種網路架構，旨在提高用戶訪問網站內容的速度和效能。其基本原則是將網站內容分佈在全球的伺服器節點上。當使用者訪問網站時，CDN會根據使用者的地理位置和網路狀況，自動從最近的節點傳送內容，降低數據傳輸。
圖片大小
漂亮的圖片讓人賞心悅目，對網站美化也是一大加分項，但若是為了呈現自家商品或吸引人的圖片搭配文字，而塞進過量的圖片，導致網站本身太重跑得太慢，容易使客人失去耐性。｜SEO工具
隨著時代的進步網路速度也與時俱進，但若網站本身太重，就算網路狀況再良好也無法馬上將網站載好，根據統計，大多數人的
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
隨著數位時代的快速發展，擁有一個出色的網站已成為企業和個人成功的不可或缺之一。然而，僅僅擁有一個網站不足以保持競爭力。
在現代競爭激烈的市場中，網站設計優化已成為企業吸引客戶的關鍵。一個經過優化的網站不僅能提高搜尋引擎排名，還能提供更好的用戶體驗，從而吸引更多的目標客戶。
舊網站改版是一個複雜的過程，而成功舊網站改版的關鍵在於確定清晰的目標和策略、基於用戶需求的設計、優化網站速度和性能、保持SEO優化，以及進行測試和迭代。
在現代網絡世界中，網站速度是一個至關重要的因素。快速加載的網站不僅能提供更好的用戶體驗，還能改善搜索引擎排名和轉換率。為了優化網站速度，我們可以從以下10個面向進行改進，包括選擇靠近目標用戶的主機位置、減少HTTP請求次數、壓縮網頁程式碼、移除未使用的CSS和JavaScript等。
使用者體驗的三個核心指標 Core Web Vitals：LCP、INP、CLS，以及 RAIL Model 介紹。
網站速度優化至少可以從主機位置、減少HTTP Requests次數、壓縮網頁程式碼、移除未使用的CSS、JS、HTML、精簡圖片大小、減少HTML元素、延遲載入、善用CDN服務、伺服器端程式演算法和資料庫表單欄位結構等10個面向進行。
當設計一頁式引流網頁時，需要考慮關鍵字研究和優化、內容優化、結構化數據標記、網頁速度優化、高品質的外部連結以及衡量和優化的策略。這些策略有助於提高網頁在搜索引擎中的排名和吸引目標用戶。