在現今的數位世界,我們所喜愛的免費網路中,線上廣告是不可或缺的一環。但如果廣告導入方式不佳,可能會拖慢瀏覽體驗、造成使用者困擾並降低參與度。瞭解如何在不影響網頁速度的情況下有效載入廣告、確保流暢的使用者體驗,並為網站擁有者增加收益商機。
網站非常仰賴線上廣告做為主要的收益來源。不過,要是網站上顯示廣告,有時可能會犧牲使用者體驗和整體網頁效能。因此,網站擁有者和廣告客戶在營利和成效之間,必須兼顧使用者體驗,這點十分重要。
假設某個網站在內容中大量刊登廣告,希望能創造高收益。但過多的廣告會讓使用者感到不悅,造成使用者體驗不佳及跳出率偏高。儘管廣告有機會帶來大量收益,但放棄體驗卻嚴重破壞網站的成效。
另一方面,想想看哪些網站沒有廣告。這種無廣告的環境由於載入時間快速、瀏覽體驗順暢,因此能吸引大量使用者。不過,如果沒有擬定營利策略,網站就無法帶來收益,對長期永續發展和成長造成負面影響。
以上兩種情況都說明瞭在營利、使用者和成效之間取得平衡的重要性。
善用 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:
屬性,即可最佳化文字、圖片和廣告素材的顯示程序。這可確保只有可視區域中的內容完整呈現,以便更快速載入網頁,並與使用者互動。當您處理冗長或含有大量廣告的網頁時,成效強化功能就格外實用。
優先處理重要的廣告版位
並非所有廣告版位都相同。舉例來說,就可視度和營利方面而言,不需捲動位置的廣告版位通常比不需捲動位置的廣告版位更有價值。這是因為不需捲動位置的廣告較容易曝光,因為這類廣告不必在第一個可視區域中捲動即可看到。在使用者向下捲動網頁到很久看到後,需捲動位置的廣告才會出現。
不需捲動位置廣告
![「不需捲動位置」的示意圖廣告概念。](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-3.png?authuser=19&hl=zh-tw)
不需捲動位置的廣告版位是指網頁中不需捲動即可看到的部分,是數位廣告的重要價值。這些主要刊登位置很有價值,原因如下:
- 使用者載入網頁時,可立即看到位於不需捲動位置的廣告。使用者更有可能注意到這些廣告並進行互動,點閱率也會隨之提高。
- 廣告客戶通常會將網頁的頂端區段視為最有價值的廣告空間。對使用者來說,這是他們造訪網站後第一眼看到的內容,因此是刊登高效廣告和優質廣告的重要區域。
- 不需捲動位置的廣告位於使用者的直接視覺位置,因此可視率最高。這麼做可以確保造訪網頁的大多數使用者不需捲動頁面,就能看到這些廣告。
不過,在初始檢視畫面中使用不需捲動位置的廣告版位時,請務必在營利和使用者體驗之間取得平衡。以下是一些重要注意事項。
- 第一個畫面的廣告版位必須在使用者的初始可視區域中盡快載入。載入速度緩慢的廣告可能會對使用者體驗造成負面影響,並增加跳出率。若想確保流暢的使用者和瀏覽體驗,適時縮短廣告載入時間。
- 雖然不需捲動位置的廣告刊登位置很有價值,但切勿在顯眼位置放置過多廣告。廣告過多會使網頁變得雜亂無章、妨礙內容易讀性,並幹擾使用者體驗。請盡量在營利之間取得平衡,並維持簡潔、容易使用的版面配置。
- 確認不需捲動位置的廣告版位與不同的螢幕大小和裝置相容。無論使用者的螢幕大小為何,回應式設計都有助於維持一致且引人注目的版面配置。
需捲動位置廣告
![「需捲動位置」的示意圖廣告概念。](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-4.png?authuser=19&hl=zh-tw)
位於不需捲動位置的廣告版位 (也就是放在網頁中特定位置,只有在使用者向下捲動時才看得到的廣告) 在數位廣告的生態系統中佔有很高的價值。這些刊登位置的獨特優勢能與不需捲動位置相輔相成。
位於需捲動位置的廣告,適用於捲動瀏覽更多內容的使用者。對於積極尋找額外資訊的使用者來說,這類刊登位置能吸引他們的注意,對希望傳達更複雜訊息或述說故事的品牌而言,也很有幫助。
- 一開始不可見的廣告版位,可能會與旁邊的內容對齊,藉此營造內容關聯性。因此,當使用者在探索內容時,就能發現與自己正在瀏覽的內容相關的廣告,因此有助於提高使用者參與度。
- 經過精心設計,需捲動位置的廣告可與周圍的內容完美整合,減少對使用者的干擾。這項整合又稱為原生廣告,可提供更優質的使用者體驗。
- 捲動式廣告刊登位置提供更靈活的創意設計和格式彈性,提供充足的空間、可隨心所欲進行實驗。影片廣告、互動式元素和大型圖片都可以延遲載入,讓使用者在不打斷體驗的情況下吸引使用者的注意力。
不過,關於需捲動位置的廣告刊登位置,請考量下列幾點:
- 需捲動位置的廣告刊登位置或許能發揮效益,但您必須確保使用者願意捲動網頁才能看到這類廣告。導入視覺提示或內容前導廣告,可以吸引使用者深入探索,提高廣告曝光率。
- 需捲動位置的廣告刊登位置不應降低內容品質或可讀性。維持廣告和內容之間的平衡,以免讓使用者感到疲乏,同時確保良好的使用者體驗。
- 與不需捲動位置的廣告刊登位置不同,位於需捲動位置的廣告可能不需要立即載入,延後載入這些廣告,直到廣告即將進入使用者可視區域為止,有助於改善整體網頁載入速度,並縮短初始網頁顯示時間。
策略性運用時,需捲動位置廣告可與不需捲動位置廣告相輔相成,並成為放送創意廣告格式和內容關聯性的平台。不過,想要確保良好的使用者體驗,改善可見度、平衡內容及管理廣告載入時間是一大考量重點。
目前的 Google 發布商廣告代碼 (GPT) 最佳做法:
視情況延遲載入廣告
![視覺化載入與非延遲載入資源的視覺化效果。延遲載入資源時,系統會在網頁載入期間保留頻寬,並將資源延後到使用者最可能看到這些資源的時間點。](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-5.png?authuser=19&hl=zh-tw)
「延遲載入」技術會延遲載入非關鍵資源,直到有需要再載入。針對使用者無法立即看到的廣告 (也就是需捲動位置的廣告) 套用延遲載入功能,可確保廣告只會在進入瀏覽時載入,節省頻寬並提升整體網頁速度。瀏覽器現在透過 loading=lazy
屬性,加入 iframe 適用的原生延遲載入功能。
導入延遲載入後,系統會在廣告即將進入使用者可視區域時動態擷取廣告,進而縮短初始載入時間,並降低在網頁生命週期中關鍵階段主執行緒上的總封鎖時間 (TBT) (與 INP 高度相關),盡可能降低對使用者體驗的負面影響。
重新整理廣告而不重新整理網頁
![重新整理網頁上的廣告示意圖,未重新整理頂層頁面。](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-6.gif?authuser=19&hl=zh-tw)
另一個可以平衡網頁效能與載入廣告的技巧,是每隔 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>
調整廣告大小、位置和格式
![插圖:不同可視區域大小的裝置,廣告刊登位置以綠色方塊表示,每個都顯示「廣告」。](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-7.png?authuser=19&hl=zh-tw)
廣告的大小、位置和格式可能會對網頁速度有重大影響。廣告尺寸過大會拖慢網頁載入速度,讓使用者感到不悅。為了避免這種情況,網站擁有者應與廣告客戶密切合作,最佳化廣告大小和格式。善用壓縮圖片格式和高效率的廣告素材設計,有助於縮減檔案大小,同時又不會犧牲視覺品質。這些最佳化做法不僅能改善網頁速度,也能盡量降低頻寬不足的使用者數據用量。
廣告體驗提升標準
顯示廣告時,必須遵守廣告體驗提升標準,因為這麼做不僅可以減少干擾性和乾擾性的廣告格式,不僅能改善使用者體驗,還可提升廣告放送位置和網頁載入時間。
按照這些標準,廣告就更有可能放置在幹擾性較低且幹擾性較低的位置,進而提高使用者參與度和點閱率。
此外,遵循這些規範還可能加快網頁載入速度,因為廣告通常較為精簡、資源較少的廣告格式,可改善網站的整體效能和使用者滿意度。
評估廣告聯播網和供應商的策略
每個廣告聯播網和供應商的成效各不相同,為確保網頁速度最快,網站擁有者應審慎評估不同廣告聯播網、標頭出價導入和供應商的成效。
與優先處理速度並有效提供輕量廣告內容的供應商合作,可大幅提高網頁效能並改善使用者體驗。
結論
對網站擁有者來說,在營利與成效之間取得平衡十分重要,因為這樣他們才能創造出色的使用者體驗,同時透過線上廣告創造最大收益。
網站擁有者可以運用多種技術,例如非同步載入、延遲載入、最佳化廣告格式和大小、利用智慧快取功能,並仔細評估廣告聯播網,以及標頭出價和供應商。如此一來,網站擁有者就能在不影響網頁效能的情況下,順利解決廣告載入難題。以高效率的方式放送廣告,最終可確保能觸及使用者、提升參與度,並持續創造收益。
註釋
- 廣告伺服器可能設有適用的限制和規定。舉例來說,Ad Manager 要求發布商聲明廣告空間會在使用者介面中重新整理。有些買方的重新整理宣告必須大於或等於 240 秒。一般來說,每次重新整理的間隔時間越長,廣告空間就越有利於買方。瞭解詳情