在WordPress 性能優(yōu)化方面，我們可按以下方面去嘗試。

安裝主題并填充內(nèi)容

在新的 WordPress 安裝中設(shè)置我們的主題時，你通常會導(dǎo)入一些虛擬內(nèi)容。這些內(nèi)容是為了幫助你快速啟動網(wǎng)站，了解其構(gòu)建和配置方式。因為這些內(nèi)容包含許多你可能很快就會刪除的圖片、頁面、帖子和產(chǎn)品，所以它們并未進行性能優(yōu)化。因此，這個步驟無需測量網(wǎng)站的性能。

安裝主題后，需瀏覽網(wǎng)站各部分，并用實際的圖片、產(chǎn)品、帖子和頁面填充。這樣可以刪除所有過時的數(shù)據(jù)，讓網(wǎng)站為未來訪問者做好準(zhǔn)備。在這個階段，你需要關(guān)注以下建議，以確保網(wǎng)站速度和性能：

1. 檢查 SSL 證書 確保你的網(wǎng)站有有效的 SSL 證書。這對于網(wǎng)站的性能和安全性至關(guān)重要。如果還沒有，請聯(lián)系你的托管服務(wù)提供商以獲取幫助。
2. 優(yōu)化圖片 在上傳前，優(yōu)化所有圖片并使用適當(dāng)?shù)膱D片尺寸。參考第三步了解更多細節(jié)。
3. 替換虛擬內(nèi)容中的圖片 確保將虛擬內(nèi)容中的所有圖片替換為你自己的圖片。一些虛擬圖片可能會從我們的服務(wù)器加載，從而降低你的網(wǎng)站速度。
4. 簡化頁面內(nèi)容 避免創(chuàng)建包含大量滑塊、動畫、輪播和產(chǎn)品的復(fù)雜頁面。每個額外的頁面元素都會增加復(fù)雜性和 DOM 大小，導(dǎo)致性能問題。保持頁面簡潔，減少不必要的元素。

檢查服務(wù)器響應(yīng)時間和優(yōu)化

確保你的網(wǎng)站托管服務(wù)器快速可靠對于網(wǎng)站的性能至關(guān)重要。在沒有安裝任何插件的新安裝中，服務(wù)器響應(yīng)時間應(yīng)在 0.5 秒至 1.2 秒之間。以下是一些測量和優(yōu)化服務(wù)器響應(yīng)時間的方法：

1. 選擇測試頁面 服務(wù)器響應(yīng)時間可能因頁面而異。通常，我們在購物車頁面測試它，因為這個頁面沒有額外元素，并且緩存插件（如果啟用）不會影響它。
2. 使用 WebPageTest 測試 訪問 WebPageTest，運行服務(wù)器響應(yīng)時間測試。你的服務(wù)器響應(yīng)時間將顯示在“瀑布”圖中的第一個請求。

3. 檢查和優(yōu)化服務(wù)器設(shè)置 確保在服務(wù)器上啟用 GZIP 壓縮，以減少資源的加載時間?？梢允褂?GiftOfSpeed 檢查 GZIP 壓縮是否正常工作。如果未啟用，請聯(lián)系你的托管服務(wù)提供商尋求幫助。

配置主題性能設(shè)置

我們主題的默認(rèn)配置已經(jīng)非常優(yōu)化，支持大多數(shù)功能。不過，如果有些功能您不需要，可以禁用它們來提升性能。以下是一些可以在安裝后立即配置的選項：

1. 禁用 Gutenberg 樣式 如果您主要使用 Elementor 或 WPBakery 頁面構(gòu)建器，可以禁用所有 Gutenberg CSS 和 JS 文件：
   • 導(dǎo)航到：主題設(shè)置 -> 性能 -> CSS
   • 選擇：禁用 Gutenberg 樣式
2. 設(shè)置字體顯示 為了提高性能，建議將 Google 字體和圖標(biāo)的 font-display 設(shè)置為 Swap：
   • 導(dǎo)航到：主題設(shè)置 -> 性能 -> 字體和圖標(biāo)
   • 設(shè)置：font-display 為 Swap
   • 更多信息請參閱 Google 文檔
3. 啟用延遲加載 如果您的頁面上有大量圖像，可以啟用延遲加載來減小頁面大小：
   • 導(dǎo)航到：主題設(shè)置 -> 性能 -> 延遲加載
   • 啟用：延遲加載（此選項并不總是開啟，但在圖像較多時非常有用）
4. 優(yōu)化 WPBakery 頁面構(gòu)建器 如果使用 WPBakery 頁面構(gòu)建器，可以通過禁用不使用的小部件來減少 CSS 大?。?
   • 導(dǎo)航到：儀表板 -> WoodMart -> 工具 -> WPBakery CSS 生成器
   • 禁用：不必要的小部件
5. 滾動時初始化輪播 對于所有不在初始屏幕上的輪播元素，建議啟用“滾動時初始化輪播”選項：
   • 這樣可以減少初始 JS 執(zhí)行時間，提升頁面加載速度。

6. 啟用 AJAX 菜單下拉菜單
   • 路徑：外觀 -> 菜單
   • 操作：為所有帶有 HTML 塊的下拉菜單啟用 AJAX 菜單選項，減少初始頁面加載時的 DOM 大小，提高性能。

通過配置這些選項，可以將頁面大小減少 10-40%。在啟用或禁用任何選項后，務(wù)必仔細檢查所有內(nèi)容，確保沒有出現(xiàn)任何問題。

圖像優(yōu)化步驟

圖像過大、未優(yōu)化且尺寸不合適是導(dǎo)致頁面加載速度變慢的主要原因之一。通常，圖像占據(jù)頁面總重量的50-80%。通過優(yōu)化圖像并減少其數(shù)量，可以顯著提高頁面加載速度和核心Web指標(biāo)得分。以下是具體的優(yōu)化步驟：

1. 控制圖像大小
   • 建議尺寸：所有圖片大小應(yīng)控制在100-200KB之間。產(chǎn)品和帖子圖片的平均大小應(yīng)為50-150KB。英雄部分和滑塊的大圖片可以是150-200KB，但不要超過這個范圍。

2. 使用在線工具優(yōu)化圖像
   • 推薦工具：在上傳圖片之前，使用 TinyPNG 等在線工具進行壓縮。只需將圖片上傳到網(wǎng)站，然后下載優(yōu)化后的圖片。
3. 安裝自動圖像優(yōu)化插件
   • 推薦插件：如果不想手動優(yōu)化圖片，可以安裝自動優(yōu)化插件，例如 Imagify。該插件不僅可以壓縮圖片，還能將其轉(zhuǎn)換為體積更小的WEBP格式，進一步減少圖像的重量20-40%。

4. 設(shè)置圖像大小
   • 商店頁面上的產(chǎn)品圖片：通過 儀表板 -> 外觀 -> 自定義 -> WooCommerce -> 產(chǎn)品圖片 設(shè)置圖片大小。
   • 博客文章圖片：通過 儀表板 -> 設(shè)置 -> 媒體 設(shè)置圖片大小。
   • 頁面特定元素：在使用頁面構(gòu)建器（如 WPBakery 或 Elementor）編輯頁面時，設(shè)置橫幅、信息框、圖庫等元素的圖片大小。

關(guān)鍵建議

• 上傳前優(yōu)化所有圖片：確保在上傳圖片之前，已經(jīng)通過工具進行壓縮和尺寸調(diào)整。
• 啟用WEBP格式：我們的主題支持WEBP格式，通過 Imagify 插件將圖片轉(zhuǎn)換為WEBP格式，可以進一步減少圖片大小。
• 避免過多圖像元素：盡量減少頁面上的圖像數(shù)量，避免過多的滑塊、動畫和輪播。

安裝 WP Rocket 緩存插件

緩存插件對于任何 WordPress 網(wǎng)站都至關(guān)重要，因為它們能顯著減少服務(wù)器響應(yīng)時間，使頁面幾乎瞬間加載。我們推薦使用 WP Rocket，這是一款高級且易于使用的緩存和性能優(yōu)化插件。雖然 WP Rocket 是付費插件，但其效果非常顯著。如果預(yù)算有限，可以嘗試免費的替代品，如 Autoptimize、W3 Total Cache 或 WP Super Cache。

設(shè)置 WP Rocket 插件

激活 WP Rocket 插件后，按照以下步驟進行配置，以確保獲得最佳性能：

1. 文件優(yōu)化
   • CSS 最小化：啟用此選項可以壓縮 CSS 文件，減少文件大小。雖然它會提高 Google 頁面速度得分，但“優(yōu)化 CSS 交付”和“刪除未使用的 CSS”選項可能會導(dǎo)致頁面加載時出現(xiàn)樣式閃爍，因此我們通常不啟用這些選項。
   • JS 最小化和延遲加載：啟用 JavaScript 最小化選項，減少 JS 文件大小。延遲 JS 執(zhí)行是一個不錯的選擇，可以減少初始加載時間。不過，在用戶開始互動之前，某些腳本可能會延遲加載，因此需要將重要的 JS 文件添加到例外列表中。這個列表可以在 WoodMart 7.0 版本中自動填充。

2. 緩存設(shè)置
   • 為移動設(shè)備單獨設(shè)置緩存文件：如果您使用了移動 DOM 優(yōu)化選項，建議啟用此功能，為移動設(shè)備創(chuàng)建單獨的緩存文件。
   • 永不緩存 URL：在高級規(guī)則中，添加不應(yīng)緩存的頁面 URL，如愿望清單和比較頁面。默認(rèn)的 WooCommerce 頁面（如我的帳戶、購物車和結(jié)賬）已經(jīng)排除在緩存之外。

進一步優(yōu)化建議

• 使用 CDN：配置內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN) 可以顯著提高全球訪問者的加載速度?？娠@著減少加載時間。

示例配置

以下是我們的示例配置，這些設(shè)置幫助我們實現(xiàn)了快速加載時間和高 Google 頁面速度得分：

• WP Rocket -> 設(shè)置 -> 文件優(yōu)化：啟用 CSS 和 JS 最小化，延遲加載 JS 文件。
• WP Rocket -> 設(shè)置 -> 緩存：為移動設(shè)備單獨設(shè)置緩存文件。
• WP Rocket -> 設(shè)置 -> 高級規(guī)則：添加愿望清單和比較頁面 URL 到“永不緩存”列表。

如何修復(fù) Google Page Speed 警告

Google Page Speed 報告會根據(jù)各個網(wǎng)站的不同因素給出特定警告。以下是我們項目中最常見的警告及其修復(fù)方法。

1. 消除渲染阻塞資源

這是 WordPress 網(wǎng)站最常見的警告之一。網(wǎng)頁頭部的資源越多，渲染阻塞時間就越長。通常，這些資源包括 CSS 文件、JS 文件和字體（如 Google 字體）。以下是減少渲染阻塞時間的一些步驟：

• 禁用 Gutenberg 樣式：如果不使用 Gutenberg 編輯器，可以禁用其樣式以減少不必要的 CSS 文件（參見前面的步驟 2）。
• 避免重復(fù)的 Google 字體：確保 Google 字體只從一個來源加載。例如，如果通過主題和 Elementor 加載了 Google 字體，可以在 Elementor 的站點設(shè)置中重置字體設(shè)置。

• 禁用不必要的 Google 字體：如果不需要 Google 字體，可以在主題設(shè)置中禁用它們，或者從服務(wù)器下載并加載字體。
• 減少不必要的 CSS 文件：例如，F(xiàn)ont Awesome 圖標(biāo) CSS 文件可能在頁面上不必要地加載。盡量使用單個 SVG 圖標(biāo)代替整個圖標(biāo)庫。

2. 減少未使用的 JavaScript

注意這個警告，并檢查所有加載的 JS 文件，特別是第三方插件的腳本文件。例如：

• 卸載不使用的插件：如果不使用 Slider Revolution 插件，可以簡單地卸載它。如果只在特定頁面使用，可以禁用其全局加載功能。
• 使用更輕量的替代方案：例如，使用 WoodMart 自帶的輕量滑塊代替重型滑塊插件。

3. 減少初始服務(wù)器響應(yīng)時間

初始服務(wù)器響應(yīng)時間過長會影響網(wǎng)站性能。可以通過以下步驟優(yōu)化：

• 使用緩存插件：安裝如 WP Rocket 這樣的緩存插件可以顯著減少服務(wù)器響應(yīng)時間。
• 排除故障：如果響應(yīng)時間超過 2 秒，可以通過以下測試找出問題根源：
  • 禁用所有外部插件并測量響應(yīng)時間，逐個啟用插件以找到導(dǎo)致問題的插件。
  • 使用默認(rèn) WordPress 主題進行測試，比較其與 WoodMart 主題的響應(yīng)時間。如果默認(rèn)主題的響應(yīng)時間顯著更短，可能是主題問題。
  • 如果禁用所有插件并使用默認(rèn)主題后響應(yīng)時間仍然過長，建議咨詢托管服務(wù)提供商，因為服務(wù)器配置或性能可能存在問題。

總結(jié)：

在本文中，我們詳細介紹了如何優(yōu)化 WordPress 網(wǎng)站性能通過這些優(yōu)化步驟，你可以顯著提高網(wǎng)站的加載速度和用戶體驗。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息