使用 Cloudflare 和 WebpageTest 發展核心 Web Vitals 策略

在我們使用 Cloudflare 和 WebpageTest 的 Core Web Vitals 策略指南中，我們概述了使用 Cloudflare 作為反向代理來測試 WebpageTest 的戰術 HTML 更改的基本要求。 我們的測試版本是從 Patrick Meenan 的原始概念簡化而來的，它使用HTMLRewriter()來選擇一個元素並修改代碼。

我們將深入學習本教程，但如果您只是在尋找 Cloudflare Worker 腳本，您可以在此處找到它。

我們的第一期指出，它跟不上 Search Engine Land 的變化。 LCP 是硬編碼的，我們需要它與動態頁面及其值進行交互。 雖然 WebpageTest 在發佈時擁有最深思熟慮的瀑布圖和比您想像的更多細節，但它並不是獲得結果的最快方法。

來自命令行的燈塔

使用測試所需的--extra-headers選項運行 Lighthouse CLI（命令行解釋器）程序，我們還可以像使用 WebpageTest 一樣模擬 Core Web Vitals 的標准設置。 您需要從終端仿真器工作。

安裝 Lighthouse 最簡單的方法是使用 NPM（節點包管理器）。 安裝後，運行以下語句：

$ lighthouse https://sel.deckart.workers.dev \
--extra-headers "{\"x-host\":\"searchengineland.com\", \"x-bypass-transform\":\"false\"}" \
--form-factor=mobile \
--throttling.cpuSlowdownMultiplier=4 \
--only-categories=performance \
--view

我們的測試平台的演變

我們的目標是展示從測試平台的原始概念到適合我們未來活動和文章的項目的演變。 測試平台不應局限於運行性能評估； 這就是我們要開始的地方。 但是，它必須在網站的許多情況下工作得相當好，這可能會非常困難。 我們將提供幫助的方法。

例如，站點通常使用資產資源的相對路徑而不是絕對路徑（使用 HTTP 協議等）。 我們將提供一個塊來匹配這些，因此 HTML 通常可以工作。 應用此功能後，當事情仍然無法正常工作時，在測試和測試主題主機名之間切換麻煩的引用通常可以解決問題，即使違反 CORS 策略也是如此。

這就是 Cloudflare 的HTMLRewriter()的魅力所在。 站點範圍的資產通常作為頁面 HEAD 子元素加載。 像jQuery一樣靈活匹配，甚至是類似的語法，我們可以在需要的時候選擇HEAD的子元素。 您可以使用 XPath 選擇器和正則表達式。 讓我們保持簡單，並為src或href屬性尋找以“/”開頭的相對路徑：

 return new HTMLRewriter() .on('link', { element: el => { const link_href = el.getAttribute('href'); if (link_href && link_href.startsWith('/')) { el.setAttribute('href', 'https://' + host + link_href); } } }) .on('script', { element: el => { const script_src = el.getAttribute('src'); if (script_src && script_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + script_src); } } }) .on('img', { element: el => { const img_src = el.getAttribute('src'); if (img_src && img_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + img_src); } } })

我們正在利用邊緣計算的力量（和成本效益）來進行非常有用的測試。 修改x-host請求標頭以加載測試平台中的不同站點並打開 DevTools。 可能不需要轉換，但您的里程會有所不同。 前端體驗讓您感受到它。

像開關這樣的註釋塊會失敗，需要一些實驗（這可能就是你所需要的）。 例如，某些資產引用的拼寫可能沒有 HTTP 冒號。 您需要編寫另一個條件來檢查href或src以“//”開頭的路徑，然後在腳本中修改選定的元素值。 盡量避免實際站點沒有的控制台錯誤。

Lighthouse 為您提供 LCP

使用 Lighthouse、PageSpeed Insights 或 WebpageTest 檢索 LCP 引用相對容易。 假設href符合預加載條件，例如當它不是<div> <p> form) 以通過預加載測試頁面 LCP 時序的更改。

大多數技術 SEO 從業者都可以方便地修改請求查詢參數以處理服務器端程序中的不同內容，例如 Google 搜索結果。 使用相同的接口，我們的腳本將使用您在“lcp”參數值中應用的路徑預加載 LCP，並將其傳遞給一個名為addPreloadAfter()的函數，以便為測試插入 HTML。

 async function handleRequest(request) { const { searchParams } = new URL(request.url); let lcpHref = searchParams.get("lcp"); return new HTMLRewriter() .on('title', addPreloadAfter(lcpHref)) .transform(newResponse); }

addPreloadAfter()函數從searchParams.get()中獲取我們的“lcpHref”值，並將其作為“href”處理以構建 HTML。

 const addPreloadAfter = (href) => ({ element: (el) => { el.after(`<link rel="preload" href="${href}" />`, { html: true }); } });

注意選項“html: true”？ 這是 Cloudflare 在將 Workers 與編寫 HTML 的HTMLRewriter() API 方法一起使用時安全所需的選項設置。 您將想要了解它的功能和限制，以便編寫您自己的測試。

Cloudflare 的 KV

如果我們要做任何遠程有趣的事情，我們需要一種在腳本執行之間存儲持久數據的方法。 幸運的是，Cloudflare 還提供了一種稱為 KV 的簡潔的小數據存儲機制，我們可以將其與我們的 Workers 綁定以存儲一個小的數據“ value ”字段，可以通過它的“ key ”訪問。 它非常容易理解和實施。 為了演示如何使用它，我們將編寫一個快速的小計數器。

 const counter = parseInt(await KV.get('counter') || 0); if (!host || counter > 1000) { return new Response('hit limit exceeded or x-host missing', {status: 403}); } else { await KV.put("counter", counter + 1); }

在 Workers 下找到 KV 導航菜單項。

一旦你創建了一個命名空間（在上面的例子中使用了“SEL”），使用 KV 儀表板 UI 創建你的第一個 Key（在上面的例子中是' counter '）並分配一個value 。 設置完成後，導航回 Worker 儀表板，查看將我們的新 KV 命名空間與 Cloudflare Worker 綁定所需的界面，以便他們可以訪問鍵和相關的存儲值。

將 KV 命名空間綁定到 Worker

選擇要綁定的 Worker，然後單擊其設置菜單以找到變量的子菜單（直接在常規下）。 請注意，您可以定義環境變量、持久對象綁定（我們將在以後的文章中探討），最後是 KV 命名空間綁定。 單擊編輯變量並添加要在腳本中使用的變量。

在以下情況下，您可以看到我們將在關聯的 Worker 腳本中使用的冗餘命名的“ KV ”變量，即我們從中導航的那個。 我們對“ KV ”的使用是為了說明目的而命名的。 從下拉列表中選擇它，保存它，您將立即能夠在腳本中使用您的variable 。 創建任意數量的腳本和 KV 命名空間組合。

訣竅是記住綁定要在 Worker 中使用的變量。 它非常靈活，一開始你可以隨意亂搞和弄得一團糟。 稍後您可能能夠將其組織成具有凝聚力的東西，這正是您想要為應用程序製作原型或編寫微服務以用於您的應用程序的東西。

設置好 KV 服務和起始值後，導航回 Worker 並打開內置的“快速編輯”。 用這個更新的要點替換那裡的內容，其中包括命中計數器，以及這篇文章中寫的所有其他內容。 單擊“保存並部署”，您應該可以在公開的 Workers 演示 URL 上啟動並運行該服務。

為什麼我們關心

我們最初的指南旨在激發您的胃口，讓您興奮地開始並為更有價值的學習而興奮。 為了提供這一點，我們有一個免費的平台和代碼組合，它本身足夠簡單易懂，加上一個應該足夠容易遵循並獲得測試結果的過程。

當您可以將腳本複制並粘貼到 Cloudflare、按照步驟測試某些 SEO 策略時，標準化網站測試以向開發人員展示 SEO 不需要了解代碼。 考慮到指標的依賴性，Core Web Vitals 測試與提高 RUM（真實用戶指標）性能得分以提高排名一樣可靠。

想要為開發人員提供更多 SEO？ 加入我們，參加由 Detlef Johnson 領導的 SMX 大師班培訓，時間為 2022 年 3 月 8 日至 9 日。