當網頁上的可視元素改變位置或大小，進而影響內容周圍的內容的位置，就會發生版面配置位移。有時是有意轉移，例如容器因使用者動作而展開。不過，廣告動態性質可能會導致非預期的版面配置位移，不但會對使用者體驗造成負面影響，還可能會造成嚴重的可用性問題。
本指南說明如何評估使用 Google 發布商廣告代碼 (GPT) 時，並盡量減少版面配置位移。
廣告如何影響版面配置位移
廣告通常會以非同步方式請求，並在網頁載入期間或載入後動態將內容新增至您的網頁。在擷取廣告的期間，系統會繼續載入頁面的其餘部分，而且使用者可能會看到非廣告內容。如果沒有保留足夠的空間來載入廣告，這些元素最後加入頁面時，可能會捨棄可見的非廣告內容。
使用 Google 發布商廣告代碼時，廣告生命週期中下列幾個時間點可能會出現版面配置位移：
- 呼叫
display()時。視版位的設定方式而定，版位可能會展開或收合。 - 顯示廣告素材時。如果放送浮動廣告或沒有可用空間，版位可能會調整大小。視運算單元的設定方式而定，版位也可以在這個時間點展開或收合。
- 廣告素材顯示後。某些廣告素材類型的設計在顯示在網頁上之後 就會展開
請注意，廣告版位在可視區域內越高，位置就可能的位置越多。特別留意初始可視區域頂端 (不需捲動位置) 的版位。這些版位可能會導致版面配置位移的數量不成比例，因為在載入廣告素材時較顯眼。
測量版面配置位移
累計版面配置位移 (CLS) 是一項網站體驗核心指標指標，可用來量化版面配置在研究室和實地活動對網站版面配置的影響。
實驗室
研究室工具會以合成方式測量 CLS。換句話說，這些模擬工具不需仰賴實際的使用者互動，因此非常適合用於持續整合和本機開發工作流程。不過，這些工具通常只評估網頁載入期間的效能，且會限制能夠模擬的情況，因此回報的值可能會低於實際使用者體驗。
Lighthouse 發布商廣告稽核這項工具可用來評估特別歸因於 GPT 廣告的 CLS。詳情請參閱「減少廣告相關版面配置位移」稽核說明文件。
您也可以設定 Chrome 開發人員工具，在瀏覽網站時醒目顯示版面配置位移。這可用來手動識別在網頁廣告版位附近發生的版面配置位移。
在欄位中
現場工具可評估實際使用者與網站互動時所獲得的 CLS。這項程序通常稱為實際使用者監控 (RUM)。透過 RUM，您可以觀察 CLS 如何受到裝置功能、網路狀況、使用者互動和頁面個人化等實際因素的影響，而這些因素通常難以使用綜合測試來模擬，甚至無法實現。
盡量減少版面配置位移
想要避免版面配置位移，唯一的保證方法是使用 CSS 為指定廣告版位保留足夠空間。直接在廣告版位 div 上設定固定的高度和寬度，是最有效的方式。不過，雖然這個做法很適合固定大小的靜態廣告版位，但較複雜的情境可能需要稍微精細。以下各節將說明一些常見情況。
多種大小的廣告版位
對於接受多種大小的廣告版位，我們建議採用下列其中一種方法：
- 預留要放送的最大大小的空間。
- 為要放送的最小尺寸預留空間。
- 藉由檢查 Google Ad Manager 報表中的歷來供應資料，為最有可能放送的大小預留空間。
選擇合適的方法
為設定要提供的最大大小保留空間，是消除版面配置位移最有效的方式。不過，這個方法可能會在廣告周圍產生多餘的空白空間，這樣就算放送了小於保留大小的廣告素材。如果為了符合放送的廣告素材大小的大小縮小廣告版位，將發生額外的版面配置位移，因此建議您避免發生這種情況。您不妨改用垂直和水平置中，降低多餘空白對視覺效果的影響。
另一方面，針對設定為放送最小的最小尺寸保留空間，避免廣告周圍多餘的空白。如果您的廣告版位經常填入較小的廣告素材，或版位支援的所有大小都類似，這會是相當不錯的選項。不過，在放送大於預留大小的廣告素材時，這種方法會產生版面配置位移 (但比起不預留空間，這種位移通常比較小)。
如要在空白空間和版面配置位移之間取得平衡，您可以為廣告版位預留「平均」大小的空間。舉例來說，在放送 320x50 廣告素材時，垂直保留 100px 會產生空白空間，但相較於完全不保留空間，就會降低 CLS 分數。您需要測試不同大小，找出最適合自家網站的大小。
在決定針對特定版位預留多少空間時，查看 Google Ad Manager 報表中的歷來填補資料可協助您做出更明智的決策。這樣的圖解可以參考一些例子來說明。
範例 #1
| 廣告素材大小 (已放送) | 廣告伺服器曝光次數 (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
在這種情況下，垂直保留 250px 可大幅減少 CLS，因為大部分放送的廣告素材都是 300x250。
範例 #2
| 廣告素材大小 (已放送) | 廣告伺服器曝光次數 (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
在這種情況下，大多數廣告的高度最高為 90px，因此在多數情況下，請垂直保留 90px，應避免在大部分時間位移版面配置。
如何預訂空間
如要解決這個問題，建議您透過 min-height 和 min-width CSS 屬性指定廣告版位的大小：
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
使用最小高度和最小寬度屬性可讓您為廣告版位保留最小空間，同時允許瀏覽器視需要放大容器大小。如此可確保放送較大廣告素材時，沒有任何內容遭到裁切。
您可以搭配使用這項技巧與 CSS 媒體查詢，為不同螢幕大小指定不同的最低限制：
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
請避免使用 JavaScript 保留空間，因為這可能會在指令碼載入時導致版面配置變動。透過 CSS 預留空間可避免這種風險。
自動調整廣告版位
自動調整廣告版位不會指定支援的一組固定大小。相反地，這些版位會自動調整大小，以配合放送的廣告素材內容，以支援不確定大小的廣告素材。因此，您無法在要求廣告素材之前預留這些版位的空間，而自動調整大小的廣告一律會造成版面配置位移。
為減少使用自動調整廣告版位時版面配置位移的影響，我們建議採取下列做法：
- 只有需捲動位置的版位才能使用
fluid大小。 - 請盡早擷取彈性運算單元，避免使用者在調整版位大小前，捲動項目進入檢視畫面中的機率。
收合及展開廣告版位
collapseEmptyDivs() 方法可讓您收合廣告版位 div，以便在沒有可顯示的廣告內容時佔用頁面空間。不過，由於這項功能可能會產生意外的版面配置位移，因此請謹慎使用。如上方章節所述，收合和可展開式廣告版位可能會導致版面配置在廣告生命週期的兩個不同時間點發生位移。
如果您需要使用這項功能，可以運用 Ad Manager 報表的歷來供應率資料，導入下列最佳做法，藉此減少版面配置位移造成的影響：
- 可能填入廣告的版位一律應從「展開」開始。
- 不太可能供應廣告的版位一律應從收合開始。
如需導入範例，請參閱「收合空白廣告版位」範例。