如何加快使用 HivePress 構建的目錄或市場網站

已發表: 2021-04-06

如今，網站加載速度和整體性能對於良好的用戶體驗和搜索引擎排名至關重要。 最近，谷歌宣布將開始衡量網站的核心 Web Vitals，例如視覺穩定性分數和頁面加載時間，以確定它們是否有資格獲得排名信號提升。 此外，加載時間較長的頁面往往具有較高的跳出率和較低的平均頁面停留時間。

在本教程中，我們將解釋如何通過設置緩存、優化樣式和腳本以及優化媒體內容來提升您網站的性能。 我們將使用 LiteSpeed Cache 插件，這是一個多合一的網站加速解決方案，具有大量工具和功能，可讓您的網站快速運行。

出於測試目的，我們將使用由 HivePress 和一些擴展以及其默認的 ListingHive 主題構建的 WordPress 目錄網站。 但是，如果您的網站不是使用 HivePress 插件構建的，您可以對任何其他 WordPress 驅動的網站執行相同的步驟。

因此，讓我們從 LiteSpeed Cache 安裝開始。

安裝 LiteSpeed 緩存

首先，您需要安裝 LiteSpeed Cache 插件。 您可以通過轉到插件 > 添加新部分直接從 WordPress 儀表板輕鬆完成此操作。 通過搜索欄找到它並繼續安裝。 安裝完成後，只需單擊“激活”按鈕即可啟用插件。

安裝並激活後，您就可以開始優化您的網站了。 讓我們先來看看基本的緩存設置。

緩存優化

為了調整基本緩存設置，請導航到LiteSpeed 緩存 > 緩存頁面。 此頁面中有許多不同的部分，但我們將僅介紹最重要的設置。

緩存設置

在這裡，我們強烈建議對登錄用戶和 REST API 請求禁用緩存。 這是 HivePress 插件正常運行所必需的。 啟用或禁用任何選項後，請不要忘記保存更改。

通過優化緩存選項來加速 WordPress 網站。

對象緩存

接下來，讓我們啟用對象緩存。 導航到對象部分並檢查對象緩存是否在您的站點上可用。 連接測試應顯示為“通過”。 如果是這樣，您可以啟用對象緩存，這將通過緩存重複的數據庫查詢來顯著提高網站性能。

如果您的網站基於 OpenLiteSpeed 服務器或者您的託管服務提供商支持對象緩存，那麼通過連接測試應該沒有問題。

啟用對象緩存選項以加快 WordPress 構建的網站。

瀏覽器緩存

最後，導航到瀏覽器緩存部分並確保它已啟用。 這將緩存用戶瀏覽器中的所有靜態內容，如樣式、腳本和圖像。

啟用瀏覽器緩存選項。

頁面優化

下一步是導航到LiteSpeed Cache > Page Optimization部分，以優化樣式、腳本和字體。

CSS 優化

讓我們從CSS 設置部分開始。 在這裡，我們建議打開CSS Minify和CSS Combine設置。

  • CSS Minify – 如果啟用此選項，所有多餘的空白字符、換行符和其他不必要或多餘的數據將從 CSS 文件中自動刪除，而不會影響網站樣式。
  • CSS 合併– 通過啟用此選項，所有單獨的 CSS 文件將合併到一個 CSS 文件中。 這樣，瀏覽器發送單個文件請求，而不是單獨請求每個 CSS 文件，減少了 HTTP 請求的數量。
通過設置 CSS 文件加速目錄或市場網站。

字體優化

如果您的網站使用 Google 字體，則有一些優化字體加載的選項。 在同一個CSS 設置部分，您可以向下滾動並將字體顯示優化選項設置為交換，以便在自定義字體完全下載之前使用備用字體顯示文本。

字體顯示優化。

設置交換選項後，轉到同一頁面中的優化部分並打開異步加載 Google 字體選項，以便在頁面呈現時在後台加載 Google 字體。

JS優化

現在讓我們轉到JS 設置部分來優化 JavaScript 文件。 在這裡，我們建議遵循與 CSS 設置相同的步驟。 只需啟用JS Minify和JS Combine選項，JS 文件也將被縮小並合併到一個文件中。

還有一個Load JS Deferred選項可以真正發揮作用。 啟用此設置後，腳本將在後台加載，同時瀏覽器呈現頁面佈局和样式。 腳本通常比 HTML“重”，因此初始頁面渲染不需要的腳本的加載和執行可能會延遲並稍後加載。 它允許訪問者幾乎立即使用該網站。

選中此選項後，請確保網站前端沒有損壞，因為某些腳本可能需要在頁面呈現之前加載。

優化 JavaScript 文件。

媒體優化

最後，您需要優化您的媒體內容。 由於圖像通常佔網頁內容大小的一半左右，將所有圖像轉換為 WebP 格式（平均比其他格式小 30%）可以顯著提高頁面加載速度。

在LiteSpeed 緩存 > 圖像優化 > 設置部分，您可以通過啟用創建 WebP 版本和圖像 WebP 替換設置將您的網站圖像轉換為 WebP 格式。

檢查這些選項後，導航到圖像優化摘要部分以獲取域密鑰並通過單擊“發送優化請求”按鈕優化圖像，直到圖像優化分數達到 100%。

優化 WordPress 構建的網站上的媒體內容。

此外，如果您的網站上有任何嵌入內容（例如，YouTube 視頻、Instagram 帖子或推文），最好僅在用戶向下滾動到嵌入內容時加載，而不是在初始頁面呈現期間加載。 它將使第一頁渲染得更快並減少瀏覽器內存使用。

導航到LiteSpeed 緩存 > 頁面優化 >媒體設置部分並啟用延遲加載 iframe選項。

通過啟用“延遲加載 iframe”選項來優化網站頁面內容。

包起來

以下是我們按照本教程中的步驟優化網站性能後，在移動和桌面設備上的 Google PageSpeed 結果的屏幕截圖。

WordPress 頁面速度洞察。

而已！ 如果您使用 HivePress （或任何其他基於 WordPress 的解決方案）構建您的目錄或市場網站，您可以按照相同的步驟設置緩存、優化樣式、腳本和字體，以及圖像或嵌入等媒體內容。 因此，您將在 Google PageSpeed 上獲得高分（從而提高您的 SEO 排名）並改善您網站的整體用戶體驗。

此外，請隨時查看以下文章：

  • 最好的 WordPress 目錄插件
  • 流行的 WordPress 目錄主題
  • 創建 WordPress 列表網站時的錯誤