在這個數位世界中，線上廣告與大家都喜愛的免費網路中扮演著重要的角色。不過，廣告導入方式不當，可能使瀏覽速度變慢、造成使用者不便和參與度降低。瞭解如何在不影響網頁載入速度的情況下有效載入廣告、確保流暢的使用者體驗，並為網站擁有者創造最高收益。
網站極度仰賴線上廣告做為主要的收益來源。不過，有時網站上顯示廣告卻拖慢了使用者體驗和整體網頁效能。因此，網站擁有者、廣告客戶和廣告主的營利成效與成效，以及使用者體驗最好在營利與成效間取得平衡。
假設有一個網站以大量廣告刊登於內容中，以賺取高收益。然而，大量的廣告反而會讓使用者感到困擾，拖著良好的使用者體驗和跳出率。廣告雖然帶來大量收益，但放棄購物會造成網站成效嚴重阻礙。
另一方面，請想想看沒有廣告的網站。這種無廣告的環境能快速載入、流暢的瀏覽體驗，因而吸引大量使用者。然而，如果沒有擬定營利策略，網站將難以產生收益，導致長期永續發展和業務成長阻礙。
這兩個情境都說明瞭在營利、使用者和成效間取得平衡的重要性。
善用網站體驗核心指標
如要在不影響網頁速度的情況下載入廣告，必須通過網站體驗核心指標。網站體驗核心指標，包含最大內容繪製 (LCP)、累計版面配置位移 (CLS) 和下次繪製互動 (INP) 等指標，是評估網站使用者體驗品質的使用者體驗指標。
最大內容繪製 (LCP)
著重於最佳化 LCP 非常重要，因為這項指標可衡量最大內容元素在可視區域中顯示所需的時間。網站擁有者可以縮短廣告內容的載入時間，並優先採用非同步載入技術，藉此縮短 LCP，並縮短網頁中重要內容元素的顯示時間。
與下一個顯示的內容 (INP) 互動
其次，改善 INP 是打造回應式使用者體驗的關鍵。INP 會評估網頁整個生命週期中每次發生點選、輕觸和鍵盤互動的情形。產生的值通常是最耗時完成的互動，也代表網頁迅速回應使用者互動的整體能力。
延遲使用者互動的廣告會對 INP 造成負面影響。這麼做可能會讓使用者感到不悅，甚至在極端情況下完全毀損。針對廣告導入延遲載入功能並延遲非關鍵 JavaScript 執行，有助於減少網頁的 INP，進而提升整體網頁回應速度。
累計版面配置位移 (CLS)
最後，CLS 會測量網頁載入期間發生的非預期版面配置位移次數，藉此評估網頁的穩定性。動態載入或調整大小的廣告可能導致版面配置不穩定，導致使用者無法追蹤網頁上的位置，甚至因為非預期的版面配置變動而不小心輕觸錯誤的元素。為減緩此問題，網站擁有者應最佳化 CLS，確保廣告預留空間來避免版面配置位移，且應最佳化廣告大小，以免內容突然自動重排。
將網頁結構分入不同的內容區塊
使用文字、圖片和廣告素材的內容區塊建構網頁，搭配 CSS content-visibility: 屬性，可大幅縮短新世代瀏覽器的整體顯示時間。
只要有策略地套用這些內容區塊中的 content-visibility: 屬性，就能最佳化文字、圖片和廣告素材的顯示程序。這可確保只有可視區域內目前的內容完全轉譯，因此能加快初始網頁載入的速度，並提供更順暢的使用者互動體驗。如果需要處理冗長或內含多則廣告的網頁，這項成效提升就格外重要。
優先放送重要的廣告版位
並非所有廣告版位都相同。舉例來說，就可視度和營利方面，不需捲動位置的廣告版位通常更有價值。這是因為不需捲動位置廣告較有機會顯示在使用者第一個可視區域中，不必捲動就看得到。需捲動位置廣告會在使用者向下捲動網頁有足夠空間時顯示。
不需捲動位置廣告
不需捲動位置的廣告版位，是指不需捲動即可瀏覽的網頁中部分，在數位廣告中具有顯著價值。這類熱門刊登位置具有價值的原因如下：
- 載入網頁時，不需捲動位置的廣告會立即顯示。使用者較有可能注意到這些廣告並進行互動，進而提高點閱率。
- 廣告客戶通常會將網頁頂端部分視為最有價值的廣告空間。使用者造訪網站時，他們第一眼才會見到他們，因此這是顯示高效優質廣告的重要區域。
- 不需捲動位置的廣告位於使用者眼前，因此可視率最高。這樣就能確保大部分造訪該網頁的使用者不必向下捲動就能看到這些廣告。
不過，在初始檢視畫面中採用不需捲動位置的廣告版位時，請務必在營利和使用者體驗之間取得平衡。以下是幾項重要考量因素。
- 第一個畫面的廣告版位應在使用者的初始可視區域中盡快載入。載入速度緩慢的廣告可能會對使用者體驗造成負面影響，並增加跳出率。為了維持順暢的使用者和瀏覽體驗，關鍵在於縮短廣告載入時間。
- 雖然不需捲動位置的廣告刊登位置十分實用，但請不要在最顯眼的位置放置過多廣告。過多廣告會使網頁變得雜亂、妨礙閱讀內容，導致使用者體驗不佳。盡力在營利之間取得平衡，並維持簡潔又容易使用的版面配置。
- 確保不需捲動位置的廣告版位支援不同的螢幕大小和裝置。無論使用者的螢幕大小為何，回應式設計做法有助於維持一致且視覺效果良好的版面配置。
需捲動位置廣告
就數位廣告而言，需捲動位置的廣告版位下方 (也就是網頁內只會在向下捲動時顯示的網頁部分放送廣告)，因此在數位廣告市場中仍保有極高的價值。這些刊登位置提供獨特的優勢，可與需捲動位置的刊登位置相輔相成。
位於需捲動位置的廣告能吸引向下捲動頁面瀏覽更多內容的使用者。這些刊登位置能吸引主動搜尋其他資訊的使用者互動，對要傳達複雜訊息或述說故事的品牌而言能帶來好處。
- 一開始看不到的廣告版位可與旁邊內容對齊，藉此創造出內容關聯性的機會。這樣使用者就能發現與所瀏覽內容相關的廣告，進而提高使用者參與度。
- 若是精心設計，需捲動位置的廣告就能與周圍內容完美融合，對使用者的干擾較小。這種整合方式又稱為「原生廣告」，可帶來更協調的使用者體驗。
- 捲動所需廣告刊登位置可讓廣告素材設計和廣告格式更具彈性，提供充足空間且能自由進行實驗。延遲載入影片廣告、互動元素或大型圖片，在不影響使用者體驗的情況下抓住使用者的注意力。
不過，對於需捲動位置的廣告刊登位置，請注意下列事項：
- 雖然位於「不需捲動位置」的廣告刊登位置可能有效，但您必須確保使用者能夠向下捲動頁面。導入視覺提示或內容前導廣告，可以吸引使用者進一步探索，提高廣告曝光率。
- 需捲動位置的廣告刊登位置不得影響內容品質或可讀性。維持廣告和內容之間的平衡，以免使用者感到疲乏，同時確保使用者體驗良好。
- 有別於需捲動位置的廣告刊登位置，不需捲動位置的廣告不一定要立即載入。延後載入這些廣告，直到廣告接近使用者可視區域為止，這有助於改善整體網頁載入速度，並縮短初始網頁轉譯時間。
運用策略時，需捲動位置的廣告可與不需捲動位置的廣告相輔相成，並提供創意廣告格式和內容關聯性的平台。然而，為了提供良好的使用者體驗，最佳化瀏覽權限、平衡內容及管理廣告載入時間等重要因素。
目前的 Google 發布商廣告代碼 (GPT) 最佳做法：
視情況延遲載入廣告
「延遲載入」技術可將非關鍵資源延後載入，直到需要時才載入。針對無法立即顯示的廣告 (也就是需捲動位置的廣告)，套用延遲載入，可確保廣告只有在進入可視區域時才會載入，進而節省頻寬並提高整體網頁速度。瀏覽器現在支援使用簡易的 loading=lazy 屬性，適用於 iframe 的原生延遲載入。
導入延遲載入功能後，系統會在使用者即將進入使用者可視區域時動態擷取廣告，藉此縮短初始載入時間，並縮短在網頁生命週期中該關鍵時刻主執行緒上的總封鎖時間 (TBT) (與 INP 高度相關)，進而將對使用者體驗的負面影響降至最低。
不重新整理網頁，直接重新整理廣告
如要兼顧網頁效能和載入廣告，您還可以採用每 30 到 240 秒重新整理一次廣告，而不必重新載入整個頁面1。透過這個方式，廣告素材就能動態更新，而不會影響使用者的瀏覽體驗或造成不必要的延遲。
在行動應用程式中，在現有網頁檢視畫面中重新整理廣告，成效比重新載入整個頁面或重新建立 WebView 更好，因為這樣可以減少資料和資源的負擔，可以加快內容更新速度，並提供更順暢的使用者體驗，而不需要從頭開始。
以非同步方式重新整理廣告，網站擁有者不僅能確保網頁內容完整，還能即時更新廣告內容。如此一來，使用者就不必重新載入整個網頁，網頁也能夠持續提供切合需求且引人入勝的廣告，進而提升網頁載入速度。透過這項技術，網站擁有者可以在營利和成效之間取得平衡，即時提供吸引人的廣告素材，並盡量減少對使用者體驗的負面影響。
對於使用者較常停留的網頁 (如食譜網頁、DIY 教學課程或其他內容豐富的網站)，重新整理廣告版位特別有用。舉例來說，使用者在 DIY 手工藝網頁上，使用者可能會投入大量時間進行教學課程、在步驟間的空檔策略重新整理廣告版位，或查看圖片庫時，將有助於改善使用者體驗和廣告收益。同樣地，在食譜網頁上，當使用者捲動瀏覽食材清單或操作說明後，只要重新整理廣告版位，就能維持使用者的興趣。
優先以非同步載入方式載入
非同步載入是提高網頁速度的最具影響力策略之一。非同步載入模式可以在主要網頁內容獨立的情況下載入廣告，讓網頁在不等待廣告完全載入的情況下繼續顯示並進行互動。 這可以大幅縮短感知載入時間，進一步提升使用者滿意度。
在指令碼標記定義中加入 async 屬性。例如：
AdSense：
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
AdSense (自動廣告)：
<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Google 發布商廣告代碼：
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
最佳化廣告大小、位置和格式
廣告的大小、位置和格式可能會對網頁載入速度產生重大影響。大型廣告大小可能會導致網頁載入速度變慢，甚至讓使用者感到不悅。為減緩此問題，網站擁有者應與廣告客戶密切合作，最佳化廣告大小和格式。藉由壓縮圖片格式和有效的廣告素材設計，可在不影響視覺品質的情況下縮減檔案大小。這些最佳化措施不僅可以改善網頁載入速度，也能盡量減少頻寬有限使用者的資料消耗量。
廣告體驗提升標準
放送廣告時，請務必遵循廣告體驗提升標準，因為這樣不僅可減少干擾性和乾擾性廣告格式，還能提升使用者體驗，對廣告放送位置和網頁載入時間也會有正面影響。
遵循這些標準後，廣告就更有可能出現在較不干擾和乾擾的位置，進而帶動使用者參與度和點閱率。
此外，遵守這些規範也有助於加快網頁載入速度，因為我們偏好較小、資源較少的廣告格式，進而提高網站整體效能和使用者滿意度。
廣告聯播網和供應商策略性評估
每個廣告聯播網和供應商的成效都不盡相同，不能一概而論。為確保網頁載入速度加快，網站擁有者應謹慎評估不同廣告聯播網、標頭出價導入方式和供應商的成效。
如果與重視速度的供應商合作，且曾以有效率的方式提供簡單廣告內容的供應商，就能大幅提高網頁效能及改善使用者體驗。
結論
網站擁有者想要提供卓越的使用者體驗，同時透過線上廣告提高收益，就必須在營利和成效之間取得平衡。
網站擁有者可以利用非同步載入、延遲載入、最佳化廣告格式和大小、善用智慧快取功能，並仔細評估廣告聯播網，以及標頭出價和供應商等技巧，順利因應載入廣告挑戰，而不會影響網頁效能。優先採取有效放送廣告的做法，最終能確保使用者規劃策略、提高參與度，並持續創造收益。
註釋
- 廣告伺服器可能有適用的限制和規定。舉例來說，Ad Manager 要求發布商宣告會在使用者介面中重新整理的廣告空間。部分買方所需的重新整理宣告必須大於或等於 240 秒。一般而言，重新整理的間隔時間越長，您的廣告空間對買方來說越有吸引力。瞭解詳情