CLS大量版面配置轉移(Cumulative Layout Shift)是Google Search Console和Google PageSpeed Insights評估網頁效能的核心指標。本文以實際網頁說明基本概念和造成此現象的動態廣告，具體操作解決這個問題。
一、Cumulative Layout Shift
贊贊小屋使用 Google所提供的線上評估工具「PageSpeed Insights」發現分數很糟糕，即時性的「診斷效能問題」診斷只有8分，其中很容易被Google Search Console主要判斷行動裝置體驗的指標CLS有0.46（Cumulative Layout Shift），是非常不合格的紅字。
關於Google PageSpeed Insights這項工具的介紹，可以參考贊贊小屋相關文章。
二、大量版面轉移
為了快速瞭解狀況，除了預覽網頁狀況，可以直接點選右下角的「顯示與下列指標相關的稽核項目」中的「CLS」，接著在下方的「診斷」有一項是「避免大量版面配置轉移」，而且有「找到五個元素」，這便是此篇文章主題。
從截圖上方有一個長條狀類似像網頁呈現的時間軸預覽，在中間的部分有一塊空白區域突然將整個頁面撐開，而由於是自己網頁，很清楚這個部分是投放Google廣告的區塊。另外在截圖下方影響最大的元素是使用WordPress Elementor整個容器包起來的文章頁面，容器中也包含了所投放的Google廣告。
三、改善累計位移
注意到上個步驟的截圖有一個超連結是「瞭解如何改善CLS」，點選之後會跳到這裡所看到的線上說明手冊，它有相當多詳細的說明，其中有一個很簡單明瞭的一句話：「我馬上就按下了！為什麼要遷移？」意思是當我頁面上有按鈕想要點選的時候，版面突然間跳掉，變成沒有辦法點到那個按鈕，此時會造成瀏覽者困擾，也就是所謂的不良CLS使用者體驗。
四、CLS指標計算
在對於CLS大量版面轉移有了基本概念之後，在頁面說明手冊有具體指標評估標準：「計算的是移動的內容量和距離」，小於0.1是良好，大於0.25是不良，介於0.1和0.25之間需要改善。下方有列舉造成CLS常見原因，例如「不含尺寸的圖片」、「動態插入的內容，例如廣告」等。可想見這些都是在頁面形成的過程中，由於不確定大小造成板面跳動。
五、廣告版面配置
除了列出不良的常見原因之外，接下來線上手冊有針對各個不良原因的詳細說明。由於贊贊小物在網站上有放一些Google Adsense投放廣告，因此會特別注意到廣告這個部分。說明中提到「廣告是造成網路上版面配置位移的最主要因素之一」。在此重點提出了動態廣告，這個是因應手機平板成為瀏覽網頁的主要裝置之後，網頁設計注重響應式體驗，會偵測裝置大小而自動調整版面，合適地改變整個大小佈局。而既然有響應式網頁，當然就會有響應式的動態廣告，它也是會隨著裝置大小而改變的，在調整的過程很顯然就會造成這裡所提到的大量版面位移。
六、網站廣告隱藏
瞭解了原因之後解決方法相對簡單，贊贊小屋網站本來在頁首部分為了增加收入放了一個很大的Google廣告，它在電腦跟手機都是相同的動態廣告，從截圖上可見它占整個網頁的面積比例不小，於是在WordPress控制台使用Elementor外掛將它隱藏。
七、診斷效能改善
經過上個步驟的修改之後，再次利用Google PageSpeed Inghts進行網頁速度評估，終於在「診斷效能問題」這裡的CLS得到了綠色的「0.088」，表示對症下藥，成功解決了這個問題。
網站經營者三個考量
這篇文章雖然成功解決Google搜索引擎很在意的網站體驗問題，可是同時也把頁面廣告拿掉了。雖然贊贊小屋所投放的也是Google所提供的Adsense廣告，但畢竟廣告收益是一回事，瀏覽體驗又是另外一回事。無論從網頁技術或者實際瀏覽者的角度來說，廣告都不會是正面的使用者的體驗。因此對於網站經營者而言，有三個層面是要考量的，第一點是否要投放廣告，是否為動態廣告，版面及位置怎麼安排，這個會影響到使用者體驗，第二點是搜索引擎所帶來的瀏覽量，如果因為投放的廣告過多影響到搜索引擎對於網站的評價，就算在頁面上放再多廣告，沒有瀏覽量是沒有任何用處，不會有可觀的廣告收入。第三點是畢竟網站經營有時間成本跟和費用成本，除了廣告收入之外，是否還有其他的收入來源。例如網站本身是一個電子商務平臺，只要有瀏覽量就有潛在收入。因此這三個層面必須綜合考量後再決定頁面如何配置，所以Google這項工具其實是一個很好的起點，進一步再思考自己經營網站的初衷和目的到底是什麼。
每天學習，每天充電：SEO文章合集。