WP Rocket SaaS：幕後花絮

已發表: 2024-09-12

這篇技術文章詳細介紹了使用 NodeJS、Puppeteer 和 BullMQ 每分鐘處理超過 15,000 個網頁的網路爬蟲的開發和最佳化。我們解釋了刪除未使用的 CSS (RUCSS) 功能如何透過消除不必要的 CSS、縮短載入時間和提高關鍵效能指標來發揮作用並增強 Web 效能。我們也描述如何透過利用 Puppeteer 進行資源收集、客製化 JavaScript 函式庫以及使用 BullMQ 實作排隊系統來解決最初的挑戰，包括低效率處理和穩定性問題。最後，我們概述了我們如何實現卓越運營，以維持高品質標準、實現快速創新和高效的客戶支援。

什麼是 RUCSS？

刪除未使用的 CSS (RUCSS) 功能旨在消除網頁上未使用的所有 CSS 和樣式表，僅保留每個頁面所需的 CSS。應用優化後，您的網站將只為用戶請求的特定頁面提供所需的 CSS，從而使頁面加載速度更快！

平均而言，此優化將交付的 CSS 大小減少了 76%！

RUCSS 的好處

  • 縮小頁面大小：最小化網頁的整體大小。
  • 更少的 HTTP 請求：減少需要載入的 CSS 樣式表的數量。
  • 更快的載入時間：提高頁面的載入速度。
  • 增強的核心 Web 生命體：提高關鍵效能指標，例如最大內容繪製 (LCP)、首次內容繪製 (FCP) 和累積佈局偏移 (CLS)。
  • 消除渲染阻塞 CSS ：防止 CSS 延遲頁面渲染。

辨識未使用的 CSS：外科手術式打擊

刪除未使用的 CSS 的過程非常複雜：對於我們刪除的每個 CSS 規則，我們必須確保該頁面永遠不需要它；否則，佈局可能會被破壞！您需要考慮許多因素以確保正確識別未使用的 CSS：

  • JavaScript 互動：JavaScript 動態改變 DOM 和 CSS。例如，點擊按鈕後可能會出現一個彈出窗口，引入新的 DOM 元素和 CSS 規則。處理這些互動對於準確識別所使用的 CSS 至關重要，並且還有更多的滑桿、畫布外選單和圖庫。
  • CSS 和 HTML 變體：WordPress 主題和外掛程式引入了無數的 CSS 規則變體。處理嵌套 CSS、邊緣情況甚至語法錯誤至關重要。需要準確的 HTML 解析才能有效地識別和刪除未使用的 CSS。
  • 視窗尺寸：某些 CSS 樣式在某些條件下套用於螢幕尺寸。為了確保 CSS 能夠正確地服務於行動和桌面用戶，我們提供了適用於各種螢幕尺寸的已使用 CSS，並且每次造訪時僅提供相關的 CSS。此外，特定的最佳化規則適用於響應式 CSS 樣式。

RUCSS 作為 SaaS 解決方案

處理頁面資源和產生使用的 CSS 是資源密集的。直接在客戶網站上執行這些任務可能會降低速度，並且可能不適用於所有伺服器和託管。因此，WP Rocket 的一些最先進的功能（例如刪除未使用的 CSS）是由我們的 SaaS 提供支援。這些優化是根據 WP Rocket 外掛程式的請求在我們的伺服器上執行的，然後結果會自動套用到網站。這種方法對客戶來說有一些巨大的好處：

  • 執行資源密集型優化並減少用戶伺服器的負載。
  • 盡快提供增強功能並快速處理回饋。
  • 主動觀察並修復問題和錯誤，無需等待支援票證。
  • 確保所有使用者受益於最新版本，無需任何客戶端更新。
  • 快速迭代並部署改進，無需更新 WP Rocket 外掛程式。

幕後情況如何？

WP Rocket SaaS 每分鐘訪問和優化多達 20k 頁面，處理 CSS 和首屏圖片！為此，我們在約 40 個不同的伺服器上不斷運行數千個 Web 瀏覽器，以便在 2 分鐘內滿足所有使用者請求。為了實現這一目標，我們的團隊正在利用最先進的技術，包括 NodeJS、Django、Redis、CockroachDB 和 Kubernetes，並與 group.One 團隊一起運作它們。

關鍵技術挑戰

1. 收集頁面資源

我們廣泛使用Puppeteer，這是一個 Node 函式庫，它提供了進階 API 來控制無頭 Chrome 或 Chromium 瀏覽器。該工具對於我們的資源收集策略至關重要，因為它能夠像真實用戶一樣呈現網頁，確保捕獲所有動態元素。它提供了許多我們用來優化流程的強大功能，例如視窗大小控制、請求攔截等。

2. 處理頁面資源

由於 WordPress 主題和外掛程式使用各種 CSS 和 JavaScript，因此我們需要一個強大的解決方案來處理這些檔案。

在測試了許多處理頁面資源的方法（例如 Webpack、PostCSS 和 CleanCSS）之後，我們最終決定分叉並維護我們自己的客製化 JavaScript 庫，以更好地滿足我們的特定要求。這包括處理邊緣情況、巢狀 CSS 規則以及在眾多 WordPress 主題和外掛程式中發現的語法問題，以確保可以為所有使用者可靠地執行最佳化。

3. 利用我們團隊的專業知識進行微調

處理 CSS 可能非常棘手，如果處理過程中不夠小心，破壞頁面佈局的風險很高。我們的團隊對流行的 WordPress 主題和頁面建立器擁有廣泛的了解，以及數十萬用戶關於與最新 WordPress 趨勢的兼容性的持續反饋。因此，我們開發了一個動態安全清單系統，供我們的團隊成員直接即時更新我們SaaS的CSS處理規則，以不斷適應我們的最佳化並每天增加相容性。

4. 管理每分鐘數千頁的流量

為了處理每分鐘 15,000 個網頁的流量，我們使用 BullMQ 實作了一個排隊系統。該系統提供：

  • 非同步處理將優化過程從插件卸載到非同步後端。
  • 負載平衡和並發管理：跨多個伺服器分配任務，使 SaaS 能夠高效處理大量 URL 並輕鬆擴展。
  • 可靠性和容錯性：所有提交的任務及其結果一旦可用就會被保存。如果我們的其中一台伺服器發生故障或使用者的網站無法立即檢索結果，這可以提供彈性。
  • 優先權劃分：BullMQ 佇列可用於對任務進行優先權劃分，確保先處理更重要的任務。例如，優先考慮主頁的優化，讓我們的用戶能夠立即看到主頁的改進，並立即使用 Pagespeed 進行測試！

卓越營運

為 SaaS 建立可擴展且可靠的系統對於提高客戶的易用性和效率以及處理不斷增長的用戶數量和不斷增加的頁面處理請求量至關重要。以下是我們實現如此卓越成就的步驟的深入分析。

1. 可擴展架構

WP Rocket 隨時在全球數百萬個網站上使用。因此，我們的 SaaS 必須始終保持可用並按預期運行。該服務託管在位於不同地區的40多台實體伺服器上。它們與 Kubernetes 進行編排，以簡化容器生命週期的部署、擴展和管理。我們依靠活躍度探測、滾動更新和自動擴展等強大功能來為服務帶來彈性並在所有情況下保持正常運行時間。此外，自訂網關服務執行作業管理並強制執行 API 安全性（速率限制、驗證等）。

2. 監控與警報

所有這些服務和伺服器都透過 Prometheus 和 Grafana 持續監控和觀察技術指標以及功能指標，以確保服務穩定並為使用者提供最佳效能。深入的監控使我們能夠確保保持較高的成功率，同時保持較短的工作持續時間和一流的優化效率。來自 Prometheus 和 Metabase 等工具的警報使我們能夠在出現異常情況時即時做出反應。

3. 可觀察性幫助我們的客戶

雖然我們努力使我們的 SaaS 易於客戶使用，但在非常複雜的設定中可能會出現一些困難，例如防火牆、安全規則或具有許多衝突外掛程式或主題的 WordPress 網站。借助 SaaS 方法，我們的支援團隊透過 Metabase 配備了內部工具，可以存取與給定用戶相關的數據，並觀察他們的最佳化工作和結果，使我們能夠快速識別可能的問題。然後，他們可以使用 PostMan 和 Metabase 進行重複、調整和微調並獲得即時回饋。因此，他們可以有效地幫助陷入困境的客戶，甚至直接調整SaaS優化規則來解鎖用戶。

4. 自動化測試和持續集成

對於工程師來說，在保持高交付率的同時保持高品質標準可能是一個挑戰。我們透過每次程式碼變更都會經歷的可靠自動化來解決這個問題。從自動化測試到生產中的一鍵部署，我們也利用鏡像、影子發布機制和漸進式發布部署。所有這些強大的方法使我們的工程團隊能夠蓬勃發展並不斷創新，而不會危及服務品質。其中大部分都是自動化的，因此我們甚至不需要考慮它並專注於重要的事情：為我們的用戶建立最好的功能！

總結

總而言之，使用 NodeJS、Puppeteer 和 BullMQ 開發和優化網路爬蟲已形成一個高效且可擴展的解決方案，每分鐘可處理超過 15,000 個網頁。透過解決最初的挑戰並利用先進的工具和方法，我們創建了一個強大的系統，透過刪除未使用的 CSS (RUCSS) 功能顯著增強 Web 效能。持續整合、自動化測試以及對可擴展性和可靠性的關注確保我們的服務保持一流，為用戶提供更快的載入時間和改進的整體網路體驗。