在現今的數位世界，我們所喜愛的免費網路中，線上廣告是不可或缺的一環。但如果廣告導入方式不佳，可能會拖慢瀏覽體驗、造成使用者困擾並降低參與度。瞭解如何在不影響網頁速度的情況下有效載入廣告、確保流暢的使用者體驗，並為網站擁有者增加收益商機。
網站非常仰賴線上廣告做為主要的收益來源。不過，要是網站上顯示廣告，有時可能會犧牲使用者體驗和整體網頁效能。因此，網站擁有者和廣告客戶在營利和成效之間，必須兼顧使用者體驗，這點十分重要。
假設某個網站在內容中大量刊登廣告，希望能創造高收益。但過多的廣告會讓使用者感到不悅，造成使用者體驗不佳及跳出率偏高。儘管廣告有機會帶來大量收益，但放棄體驗卻嚴重破壞網站的成效。
另一方面，想想看哪些網站沒有廣告。這種無廣告的環境由於載入時間快速、瀏覽體驗順暢，因此能吸引大量使用者。不過，如果沒有擬定營利策略，網站就無法帶來收益，對長期永續發展和成長造成負面影響。
以上兩種情況都說明瞭在營利、使用者和成效之間取得平衡的重要性。
善用 Core Web Vitals
如果要在不影響網頁速度的情況下載入廣告，傳遞Core Web Vitals 是不可或缺的要素。Core Web Vitals 包含最大內容繪製 (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 秒。一般來說，每次重新整理的間隔時間越長，廣告空間就越有利於買方。瞭解詳情