通過 Lighthouse 的發布商廣告審核提高站點速度

已發表: 2020-06-05
通過 Lighthouse 的發布商廣告審核提高站點速度

這篇文章最近更新於 2021 年 9 月 6 日

發布商關於頁面加載速度和網站一般行為的請求有所增加。 在今天的帖子中，我們將了解發布商提出的一些問題，稍後我們將向您展示如何製作自己的報告，並更好地評估您的頁面加載情況。

#1 – 網站加載緩慢，報告工具得分低

了解網站的最終行為是多種因素的結果很重要：用於構建頁面的技術、網站上顯示的元素數量、這些元素的存儲方式、運行時的計算等。報告工具（例如我們稍後將討論的 LightHouse）將查明這些問題。 請注意，這些問題與我們的代碼無關，因為它們是網站構建方式的結果。

#2 – MonetizeMore 的代碼使網站變慢

頁面上的廣告單元數量越多，需要加載的元素就越多，因此始終需要權衡頁面速度和收入之間的關係。 發布商需要始終意識到這一點。 我們的代碼不會對網站性能產生重大影響。MonetizeMore 廣告腳本異步運行，這意味著，在標題競價過程運行時，網站的其餘部分將繼續加載，就像沒有我們的代碼時一樣。運行標頭出價時，廣告加載腳本不可避免地會延遲廣告呈現，直到達到出價超時為止，這是另一個需要解決的權衡問題。 默認建議超時為 2000 毫秒，以便在頁面加載速度和良好的標頭出價填充率之間取得健康的平衡。 降低此超時可能有助於減少加載時間，前提是頁面加載速度快於設置的超時。 降低標頭出價超時時間會增加標頭出價拍賣可能在所有已配置的投標人返回其最終出價之前結束的機會。

燈塔

我們將在未來使用 Lighthouse 的發布商廣告審核，您可以在這裡找到它：https://developers.google.com/publisher-ads-audits

儘管我們的腳本可能不是頁面性能的罪魁禍首，但頁面性能確實會影響流量，因此它成為我們的一個重要問題。 對站點進行自己的評估，並嘗試解決建議/警告。

使用 Chrome：

1.- 打開目標網頁

2.- 右鍵單擊並選擇檢查

右鍵單擊並選擇檢查

3.- 在開發工具中，尋找最後一個，稱為 Audits

Lighthouse 的廣告審核

4.- 選擇相關類別並單擊“生成報告”。 多次刷新站點後，將生成並顯示報告。

燈塔截圖

您將看到評估頁面的幾個類別：

  • 性能：頁面的技術執行，包括交互性、速度和編碼。
  • 可訪問性：設計元素讓有特定障礙的人更舒適地參與內容
  • 最佳實踐：一般性建議，主要用於改善導航和安全性
  • SEO：優化搜索引擎以與網站互動
  • 漸進式 Web 應用程序：PWA 是一種特定類型的網站，無論是在外觀上還是在幕後，它都非常類似於移動應用程序。 下面是針對此類網站的優化建議。

這些信息中的大部分都非常簡單。 我們應該密切關注的一個是 performance -> Diagnostics，我們可以在其中查看 js 代碼的性能，尤其是我們的代碼。

診斷

在上圖中（診斷 -> 減少第三方代碼的影響），我們看到我們的代碼在主線程（負責加載頁面的線程）中阻塞了不到三分之一秒。 這些代碼都不會大量阻塞主線程，但整組第三方代碼使用了主線程的整整一秒，這最終是用戶體驗。

javascript 執行時間

在上圖中（診斷 -> 減少 JavaScript 執行時間），我們看到我們的代碼在執行時間上與其餘代碼一致。 即使執行時間更長，這是在另一個線程中異步完成的，因此不會影響性能。

注意事項

  • 您可以執行一個簡單的測試，通過在沒有我們的標籤的情況下運行此報告，然後添加我們的標籤並再次運行該報告。 如前所述，權衡會使總分下降，但這是預料之中的。
  • 大多數頁面速度測試/分數都沒有考慮運行標題競價時所需的延遲，並且旨在評估硬編碼的廣告標籤。 因此，當在頁眉出價處於活動狀態的頁面上運行時，他們不會考慮自定義功能並降低它的分數。
  • 您自己的 Chrome 插件可能會嚴重改變報告本身的性能。 您可以嘗試在更乾淨的環境中測試頁面：
    • 轉到以下頁面：https://developers.google.com/publisher-ads-audits。
    • 粘貼網站地址
    • 在 Advanced Settings 上，激活 Run Additional Lighthouse Audits。
    • 單擊生成報告
    • *此報告還將為您提供發布商廣告報告。 如果站點配置正確，則得分應該很高，因此它是向發布商表明任何性能問題可能出在別處的好方法
  • 如果必須提高性能，您可以考慮：
    • 減少頁面上的廣告單元數量
    • 根據其他重 JS/資源調用的實現，將 MonetizeMore 腳本調用移動到頁面末尾或更高位置
    • 將標頭出價超時減少到傳入出價沒有明顯損失的值（可以通過 PGAI 進行測試：在出價人選項卡下，對收到的出價進行顏色編碼）
    • 延遲加載所有頁面上的所有廣告位置。 （在 dbAdmin 中啟用 SPA 並將 DIV 切換為惰性格式）

其他更多技術建議可以是：

  • 改善 JavaScript 負載：單次調用繁重的腳本或多次調用小型腳本會對性能產生負面影響。 在 JS 中的任務和調用之間取得平衡。 這只能通過發布者可以操作的 JS 文件來完成（例如，不是我們的包裝器、GA 或 facebook 腳本）
  • 確保任何可以異步運行的腳本都這樣做。 我們的腳本已經做到了
  • 確保資源（圖像、視頻）使用最新技術進行編碼。 這允許元素在移動時被壓縮，並在頁面加載時解壓縮。

需要更多幫助？ 立即在 MonetizeMore 註冊專業帳戶！