加速您的 Divi 網站的終極指南

已發表: 2019-07-11

Divi 不僅僅是任何頁面構建器。 Divi 通過完整的網頁設計系統將設計過程提升到一個全新的水平，讓您可以直觀地設計網站的每個部分，而無需過多依賴複雜的第三方設計軟件（例如 photoshop 或 Sketch）。 這意味著 Divi 主題（和 Divi Builder 插件）將需要比基本的 WordPress 29 歲主題更多的資源。 但這並不意味著 Divi 必須緩慢。

事實上，Divi 在之前的更新中添加了許多性能增強功能，使 Divi 站點（和 Divi Builder）的運行速度比以往任何時候都快。 此外，Divi 在構建時考慮了第三方優化。 許多用於 WordPress 的性能優化插件也可用於提高 Divi 網站的速度性能。

在這篇文章中，我們將探討已經為加速 Divi 所做的工作以及我們可以做些什麼來使其更快。 以下是我們將涵蓋的一些關鍵主題：

  • 如何顯示網站
  • 內置 Divi 速度性能
  • 數據庫優化
  • DNS優化
  • 良好的託管
  • TTFB優化
  • 緩存
  • 縮小和聚合
  • Gzip 壓縮
  • CDN
  • 圖像優化
  • 視頻優化
  • 使用質量插件
  • 進行速度測試
  • 其他提示
  • 如何避免與第三方插件可能發生的衝突
  • 建議的做法和資源的快速列表

快速 Divi 網站的好處

竭盡全力說服您需要一個更快的網站是沒有用的。 但是這裡有一些你不能忽視的明顯好處。

  • 降低跳出率 - 訪問者不會離開您的網站太多。
  • 增加轉化率 – 更快地啟動您的網站可以帶來更好的轉化率。
  • SEO – Google 喜歡針對速度進行優化的網站。
  • 可信度 - 緩慢的網站會給訪問者留下不好的第一印象。

多快才夠快？

通常，一個好的目標是在 3 秒或更短的時間內加載您的網頁。 儘管現在大多數客戶似乎希望它是 2 秒或更短。 但顯然，每個網站和網頁都是不同的。

Divi 網站的顯示方式

要了解如何加速您的 Divi 網站，了解顯示網站時涉及的內容可能會有所幫助。 當然，這並不是 Divi 獨有的。 這適用於大多數 WordPress 網站。

這是發生了什麼..

  1. 您輸入要訪問的網頁的 URL（或單擊鏈接）。
  2. 您的瀏覽器通過您的 DNS（域名服務器）找到該 URL 的 IP 地址，並在 Web 服務器（您託管站點的位置）上請求該 IP 地址。
  3. Web 服務器（通常是 Apache）接收請求，然後獲取它存儲的網頁（您在 Divi 中設計並在 WordPress 中發布的網頁）。
    • 但由於頁面依賴於 WordPress 和 Divi 主題使用的外部 CSS 和 JavaScript，因此這些也必須從服務器下載。
    • 該頁面還包含用於從 MySQL 數據庫檢索數據（如圖像）的 PHP。
  4. 從服務器和數據庫中檢索到所有必需的資源後，頁面最終會提供給客戶端的瀏覽器。

這聽起來可能只是顯示網頁的步驟很多，但對於 WordPress 網站，無論您使用什麼主題，這都是非常標準的。 如果你仔細想想，整個過程非常神奇。 但不幸的是，這是我們用戶認為理所當然的事情。 今天，我們越來越期待這一切在不到 3 秒的時間內發生。

那麼我們可以做些什麼來幫助這個過程呢？ 首先，我們需要承認，在加速網站方面，有些事情是我們無法控制的。 例如，您無法控制訪問者使用的瀏覽器類型或他們的互聯網連接速度。 但是，撇開這些事情不談，我們可以而且應該做一些事情來使我們的 Divi 網站更快。

首先，讓我們來看看 Divi 已經具備的一些內置速度優化。

內置 Divi 速度性能

靜態 CSS 文件生成

Divi 的第一個速度性能增強來自靜態 CSS 文件生成。

在這次升級之前，Divi Builder 生成的所有 CSS 都在頁面的頁腳處內嵌提供。 但是通過此增強功能，Divi 現在將採用 Divi Builder 創建的所有 CSS（並添加到主題定制器和主題選項中）並將它們作為靜態 CSS 文件提供，該文件已自動為您縮小。 這減少了頁面的文檔大小，並允許瀏覽器提供靜態 CSS 文件的緩存版本，以加快頁面加載速度。

您可以在主題選項或頁面設置中選擇啟用或禁用此選項。

CSS 和 JavaScript 文件的縮小和聚合以及優化的 Google 字體交付

第二波 Divi 速度性能增強通過優化 CSS、JavaScript 和 Google 字體的交付，進一步提高了頁面加載速度。

升級包括以下內容：

  • CSS 和 JavaScript 文件縮小- Divi 將自動縮小所有主題 CSS 和 JavaScript 文件，從而減小頁面大小並縮短加載時間。
  • CSS 和 JavaScript 文件組合– Divi 現在會自動將所有 CSS 和 JavaScript 資產聚合（或組合）到一個文件中。 這減少了頁面上的總請求並加快了訪問者的加載時間。
  • Google 字體請求優化– Divi 通過組合字體請求和刪除重複的字體文件來優化 Google 字體交付。 對於使用各種自定義字體的頁面，此更新將有助於加快加載時間。

您還可以在主題選項中啟用或禁用這些選項。

更快的 Divi 主題和視覺生成器

儘管大多數人都關心他們的 Divi 網站在前端為訪問者加載的速度有多快，但它也有助於擁有更快的後端。 開發人員（和客戶）也希望能夠快速編輯和設計他們的 Divi 網站。

這就是為什麼第三波 Divi 速度和性能增強包括對 Divi 主題和 Divi Builder 的升級。 使用創造性的緩存機制和其他性能優化，標準 Divi 安裝的頁面加載速度得到了提高。 此外，WordPress Admin 和 Divi Builder 的運行速度也更快，使編輯和設計過程更快。

緩存在幕後，更多地與 Divi HTML/CSS 的生成方式有關，而不是頁面如何提供給訪問者。 這適用於 Divi 主題文件。 Divi 不會嘗試緩存、縮小或合併第三方文件。 因此，使用第三方緩存和性能插件仍有更多改進空間，這些插件將縮小和組合您網站使用的其他 CSS 或 JavaScript（例如包含在您的 Divi 子主題或其他第三方插件中的那些），並提供緩存靜態 HTML 頁面給訪問者。

分區系統狀態

儘管從技術上講不是速度提升，但 Divi 的更新包含一個內置的系統狀態報告，肯定有助於識別您網站環境中可能導致頁面加載時間變慢的任何問題。

例如，您的系統狀態可能顯示您正在使用舊版本的 PHP，這可能會降低您的網站速度。 我們建議使用最新的穩定版 PHP。 這不僅可以確保與 WordPress 和 Divi 的兼容性，還可以加快您的網站速度，從而減少內存和 CPU 相關問題。 有關更多信息，請查看我們關於如何更新 PHP 版本的帖子。

讓您的 Divi 網站更快

使您的 Divi 網站更快需要與大多數 WordPress 網站所需的許多相同的性能增強。 那些一直在使用 WordPress 的人可能已經完成了部分或全部這些優化。 希望這些建議將有助於將您的 Divi 網站速度提升到一個新的水平。

數據庫優化和清理

與靜態 HTML 站點不同，WordPress 是一個動態 CMS，它使用 PHP 檢索存儲在 MySQL 數據庫中的數據，以便將該數據顯示在網頁上。 這使管理您的站點變得容易，但缺點是加載頁面需要更長的時間，因為它必須在加載頁面之前定位數據庫中的數據。 通常，出於這個原因，靜態 HTML 網站將比 WordPress 網站更快。

盡可能快地保持 Divi 站點的一種方法是確保您擁有一個乾淨的數據庫。 WordPress 站點文件在您的數據庫中按表組織，每次您向站點添加新數據（如主題和插件）時，您都會創建新表和更多數據。 正如您所料，數據庫越混亂，查找數據就越困難。 這會導致網站速度變慢。

因此，如果您在多年嘗試其他主題和無數插件後將 Divi 主題添加到您的網站，那麼您可能會存儲一些不再需要的數據。 即使您卸載了插件，也不意味著數據庫中的所有數據都消失了。 插件喜歡在那裡留下一些數據，以防你重新安裝插件。 不酷，我知道。 這些剩餘的數據可能會導致不必要的混亂並減慢您的網站速度。

就像每個人都需要組織更有效地工作一樣，每個 WordPress 網站（無論是否為 Divi）都需要一個乾淨的數據庫來更快地加載頁面。 因此，如果您的網站已經有一段時間了，清理它可以顯著加快速度。

我建議為此使用插件。 WP Optimize 似乎是一個可靠的選擇。 但是還有其他 WordPress 數據庫插件需要考慮。

或者，如果您知道自己在做什麼，您總是可以在 MySQL 中手動完成。

除了清理您的 WordPress 數據庫之外，您可能還希望通過減少它存儲的數據來使 WordPress 更加輕便。 例如，WordPress 會自動將已刪除的項目保留在垃圾箱中 30 天。 您可能希望將該時間段縮短為 7。

DNS優化

當用戶訪問您的某個網頁的 URL 時，需要進行的第一件事稱為 DNS 查找。 輸入（或單擊）URL 後，訪問者的 ISP 會向名稱服務器發送 DNS 查詢，以查找與您的域相關聯的 IP 地址（每個域/網站都有特定的 IP 地址）。 從本質上講，DNS 查找就像在電話簿中查找您的域名以查找該域的 IP 地址。

但是當用戶訪問您網站上的某個頁面時，該頁面可能需要訪問多個域才能拉出該頁面。 因此，您可以在單個頁面加載（可能更多）上進行 3 或 4 個域查找。

一般來說，像 Godaddy 和 Namecheap 這樣的大多數免費 DNS 提供商通常會比您喜歡的速度慢。

可以提高 DNS 查找速度的最佳免費選項可能是 Cloudflare。 他們擁有 DNSPerf.com 上記錄的最快 DNS 性能。 這將比 GoDaddy 和 Namecheap 快得多。 而且，如果需要，您甚至可以優化 cloudflare 以用於 DNS，而無需其他服務（如 CDN 或 WAF）。

例如，您可能希望將 Cloudflare 用於 DNS 和安全性（DDOS 檢測），並將 KeyCDN（或 MaxCDN）用於 CDN。 這似乎是一個很好的組合。

設置 CloudFlare

Cloudflare 真的很容易設置。 您不必擔心事先切換您的主機或任何事情。 您需要做的就是完成他們從輸入域開始的 5 分鐘設置。

他們將自動檢索您當前的 DNS 記錄。

完成設置所需要做的主要事情是將當前 DNS 提供商（如 GoDaddy）上的默認名稱服務器更改為 Cloudflare 的名稱服務器。

然後，您可以從他們的儀表板輕鬆管理您的 DNS。

就像這樣，您的 DNS 查找速度、安全性和網站 CDN（以及更多）都得到了提升。

良好的託管

如果您對網站的速度（和性能）非常重視，那麼首先要選擇一個好的託管服務提供商。 事實上，您可以盡一切努力優化您的網站以提高速度，但由於您的主機，您的網站仍然很慢。 真正優秀的託管服務提供商會為您進行大量速度優化，因此您不必擔心。

託管類型

傳統（共享）託管

這是迄今為止 WordPress/Divi 用戶最流行的託管類型。 但不幸的是，這是速度優化最糟糕的選擇。 使用傳統的共享主機，您將與他人共享服務器的所有可用資源。 因為您是共享的，所以這種託管的成本很低。 但缺點是您無法控制其他站點在您的共享服務器上獲得的流量。 因此，您很容易陷入加載速度極慢的時期，甚至網站完全關閉的時期。 所以你最好清楚你的共享主機可以處理多少流量。

專用主機

使用專用主機，您將擁有專屬於您的專用服務器。 無需與任何人共享任何資源。 這意味著您的網站將擁有更可預測且一致的快速加載時間。 這通常作為大公司的頂級選項以高溢價提供。

VPS 主機

虛擬專用服務器 (VPS) 託管基本上是共享和專用託管之間的中間地帶。 您的服務器空間是“私有的”，這意味著它與其他人完全分開（有點像您站點文件的封閉社區）。 因此您的站點文件不會暴露給服務器上的其他人。 與共享主機不同，VPS 確實有大量的系統資源（或電源）供您使用，以確保您的站點始終獲得所需的資源，以始終如一地提供快速加載時間。 因此，您不必擔心其他網站的流量高峰會影響您的網站速度。

但是，除非您有託管 VPS，否則這種託管主要適用於那些精通技術以自行處理事情的 DIY 類型。 有關更多信息，請參閱 VPS 託管和共享託管之間的性能比較。

雲主機

使用雲託管，您可以訪問服務器網絡（在雲中）而不是單個物理服務器。 這允許您根據需要從該服務器網絡中提取所需的所有資源。 從本質上講，您擁有一個由整個網絡的力量和資源支持的服務器空間的虛擬分區。 因此，您不必像在共享主機中那樣擔心流量高峰。 雲託管非常靈活，可根據您的需求進行擴展。

雲託管和 VPS 託管之間的一個主要區別在於，VPS 託管有專用（或有限）數量的資源可供提取，這些資源可能會耗盡，也可能不會耗盡。 另一方面，雲託管能夠在不耗盡資源的情況下保持您的資源可用，因為它始終可以從雲中的其他服務器中提取。 理論上，雲託管提供了更加一致和可靠的高速。 因此，如果您對速度很在意，雲託管是一個不錯的選擇（甚至可能是最好的選擇）。

託管 WordPress 託管

託管 WordPress 主機通常是指由 WordPress 專家管理的共享主機。 它不像 VPS 那樣“私密”，也不像專用託管環境那樣強大。 但它確實有助於通過讓 WordPress 專家完成工作來最大限度地提高共享環境的速度。 他們做得很好，因為他們為 WordPress 站點量身定制了服務並嚴格配置了服務器。 其中很多都帶有許多酷炫而方便的內置功能，例如一鍵登台環境、站點緩存、一鍵 CDN 部署、自動備份、SSL 等。 它們非常適合我們這些不想依賴（或管理）一堆插件來進行基本速度優化、安全性和管理的人。

託管公司考慮

那裡有許多 WordPress 託管公司。 如果可能的話，如果您認真對待速度優化，您將希望避免傳統的共享託管（非託管）。 但是，如果您有一個簡單的網站並且不願意為託管支付額外費用，Siteground 似乎是共享託管的最佳選擇之一。

現在這裡是一個快速的主機列表，可以考慮更快的 Divi 網站。

  • SiteGround – 提供共享託管、託管 WP 託管、專用和雲託管（訪問 SiteGround/我們的評論）
  • Cloudways – 專門從事基於 SSD 的託管雲託管，還管理 WP Hosting（訪問 Cloudways/我們的評論）
  • Kinsta – 專門從事託管 WP 託管（訪問 Kinsta/我們的評論）
  • WPEngine – 專門從事託管 WP 託管（訪問 WPEngine/我們的評論）
  • Flywheel – 專門從事託管 WP 託管（訪問 Flywheel/我們的評論）

該列表只是冰山一角。 我相信還有其他一些對你的 Divi/WordPress 網站很有用。 如果您正在尋找可靠的託管評論網站，請查看評論信號。

您也可以參考本指南來幫助您做出選擇。

首字節時間 (TTFB) 優化

首字節時間 (TTFB) 是用戶從您的主機/服務器接收網站數據的第一個字節所需的時間。 因此，當用戶發出 HTTP 請求（加載您的網頁）時，TTFB 實質上將是接收任何數據之前的等待期。

把它想像成吃快餐。 餐廳可能會被優化以快速提供您的食物。 事實上，他們可能已經有一個漢堡包在等著你。 但是您仍然需要排隊等候訂購。 那個等待期就是你可以認為第一口的時間（看看我在那裡做了什麼）。

TTFB 應該在 200 毫秒左右（根據 Google 的說法）。 但是對於託管不佳且尚未優化的站點，TTFB 很容易達到 2 秒或更長時間。

您的 Divi 站點上的 TTFB 延遲通常是由以下原因引起的：

  • 需要接收的動態內容量。 這可以通過緩存、數據庫優化和 CDN 來減少。
  • 您的服務器當時正在經歷的流量。 傳統（或共享）託管服務提供商很難關閉 TTFB，因為您要與同一服務器上的其他人共享資源。 他們的流量高峰會降低您服務器的處理速度。
  • 您的網絡服務器配置。 一個好的 WordPress 託管服務提供商可以通過提供可靠的後端基礎設施和優化您的 Web 服務器配置（事情幾乎不受您控制）來幫助您網站的 TTFB。

簡而言之，如果您想快速提升 TTFB，請獲得更好的託管並按照以下其餘步驟操作。

緩存

可以實施四種主要類型的緩存來加速您的站點。

  • 頁面緩存- 此過程存儲頁面的緩存靜態 HTML 版本，以便快速交付。
  • 瀏覽器緩存- 這使您可以更好地控制瀏覽器可以緩存哪些內容以及緩存多長時間。 只有某些插件可以執行此操作，因此最好手動執行此操作以獲得更多控制。 這將有助於在進行速度測試時處理“利用瀏覽器緩存”指標。
  • CDN 緩存– 從離您的用戶最近的 CDN 提供緩存的網站頁面/文件。
  • 對象緩存– 對象緩存緩存 PHP 發起的重複查詢結果，以從數據庫中檢索數據並將其提供給用戶。 這與字節碼緩存不同，字節碼緩存存儲用於顯示您的網站的已編譯 PHP 代碼的緩存版本。

Divi 確實在後台執行緩存以提供 Divi 的靜態 JS 和 CSS 文件。 但這主要用於 Divi 主題文件，以獲得更好的 Divi Builder 功能。

仍然需要為整個 WordPress 網站使用緩存。 大多數站點都有多個插件，這些插件可能需要組合、縮小和緩存它們自己的 CSS 文件。 因此，您絕對可以利用第三方插件來提供所有頁面的緩存靜態 html 版本。

流行的緩存插件包括：

  • WP火箭
  • 緩存啟動器（閱讀我們的評論）
  • W3 Total Cache（閱讀我們的評論）
  • W3 超級緩存（閱讀我們的評論）
  • Comet Cache（閱讀我們的評論）
  • WP 最快的緩存

提示：每當您使用插件在您的網站上啟用頁面緩存時，您都需要確保並在您對網站進行更改時刪除（或清除）緩存，以確保您和您的訪問者獲得最新版本的地點。

縮小和聚合

縮小使您的站點文件更小。 縮小站點文件（CSS、JavaScript、HTML）會刪除所有不必要的字符（如空格和分頁符），從而縮小文件大小。 這減少了瀏覽器加載頁面內容所需的時間。

聚合涉及組合站點文件以減少頁面上的總請求並加快訪問者的加載時間。

如前所述，Divi 確實縮小並合併了 Divi 主題默認使用的 Javascript 和 CSS 文件。 因此，從技術上講，您不必擔心使用第三方插件來進一步縮小和組合 Divi 的 Javascript 和 CSS 文件。 但是，Divi 不會縮小 HTML 輸出。 因此，您可以從第三方插件中受益，以縮小（和緩存）頁面的整個 HTML。

此外，幾乎每個 Divi 站點都將依賴於 Divi 主題之外的文件（如添加到子主題的插件或其他文件），這將受益於縮小和組合 CSS 和 JS 文件。 這可以通過插件輕鬆處理。

一些可以縮小站點文件的可靠插件包括：

  • 自動優化
  • W3 Total Cache（閱讀我們的評論）
  • W3 超級緩存（閱讀我們的評論）
  • WP火箭（付費）

這些插件應該與 Divi 一起使用。 但是沒有辦法衡量一個網站的所有細微差別，說一個網站對每個人都是最好的。 有時，第三方插件會以可能導致錯誤/問題的方式自動縮小 JavaScript 文件，因此請務必徹底測試您的網站。 一般來說，縮小 CSS 文件總是安全的。 但是要小心那些 JavaScript 文件。

如果有衝突，你可能需要禁用 Divi 的內置選項，讓第三方插件來處理。

如果您不想為此依賴插件，您可以隨時手動完成。 有關如何執行此操作的更多信息，請查看有關如何縮小您網站的 CSS、HTML 和 JavaScript 的完整帖子。

Gzip 壓縮

Gzip 壓縮比縮小更重要，因為它可以將頁面大小減少多達 70%。

在您的 Divi 站點上啟用 Gzip 壓縮可以大大提高速度。 如果您熟悉在計算機上創建壓縮（或壓縮）文件，那麼您已經對 Gzip 壓縮的工作原理有了基本的了解。 我們創建 zip 文件（或文件夾）來縮小文件（或文件夾）的內容。 為什麼？ 所以我們可以更快地上傳和下載文件！ Gzip 壓縮為您的網站做同樣的事情。 它告訴服務器將它可以壓縮的所有文件壓縮成更小的版本，以便可以更快地將其提供給客戶端。 這確實可以提高頁面加載速度。

這是即使在全新安裝主題時也可以提高 Divi 速度的領域之一。 由於無論如何 Divi 已經縮小了核心主題文件，Gzip 壓縮將使這些文件更小。 Gzip 壓縮將使您的文件比縮小時小得多。

許多 WordPress 性能插件（如 W3 Total Cache 和 WP Super Cache）將包含 Gzip 壓縮作為一個選項。

以下是一些支持 Gzip 壓縮的插件：

  • WP火箭
  • W3 Total Cache（閱讀我們的評論）
  • WP 最快的緩存

並且一些託管服務提供商會自動啟用 gzip 壓縮，因為這對站點性能來說非常簡單。 請隨時檢查您的站點是否啟用了 Gzip 壓縮。

啟用 Gzip 壓縮（在 Apache 服務器上）的更常見方法是使用 mod_deflate 手動完成。 您所要做的就是通過 FTP 訪問您的網站（根目錄）（確保顯示隱藏文件）。 然後將以下代碼塊複製並粘貼到 .htaccess 文件的底部。

這是代碼： 

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

CDN

StackPath CDN PoP

內容交付網絡 (CDN) 將站點速度提升到另一個水平。 顧名思義，CDN 是用於傳送內容的網絡。 該網絡由世界各地的服務器組成，這些服務器存儲您網站內容的緩存靜態文件（圖像、視頻、腳本等）。 然後，當某人發送對該內容的請求（通過訪問您的網站）時，距離該人最近的服務器（或 PoP）將提供該內容。 如果沒有 CDN，您的網站文件可以從一個服務器位置訪問（無論您的主機在哪裡存儲這些文件），因此您離該服務器越遠，將該網站內容傳送到您的瀏覽器的速度就越慢。

想一想，當您想要將披薩送到您家時，您不會選擇 30 英里外的披薩店。 您選擇 5 英里外的那家是因為您希望它盡快送達（如果您是一個和我一樣喜歡披薩的普通人）。 CDN 的工作方式類似。 由於您希望網站盡快出現在您的瀏覽器中，因此 CDN 將使您的網站文件準備好從離您所在位置最近的服務器傳送。 因此，如果您的站點文件存儲在舊金山的服務器上，而倫敦的某個人打開了您的站點，則可能需要 1 或 2 秒才能從數千英里之外的服務器接收該數據。 但是使用 CDN，您可以用一半的時間從倫敦的服務器傳送相同的數據。 這是一個很大的不同！

因此，即使您在家中看不到結果的全部範圍，您也正在加快將您的網站傳送到世界各地的速度。

有很多方法可以為您的站點獲取 CDN。 許多託管公司將提供一個選項，用於在其服務中部署 CDN。 還有像 Cloudflare 和 MaxCDN（現在是 StackPath）這樣的網絡平台，提供 CDN 功能以及其他性能和安全功能。

以下是一些值得考慮的可靠 CDN 平台：

  • KeyCDN（您甚至可以使用 CDN Enabler WordPress 插件來集成 KeyCDN；此設置也適用於 Cache Enabler）
  • MaxCDN（現在是 StackPath）
  • 亞馬遜雲前線
  • 蘇庫裡

有一些緩存插件，如 WP Total Cache 或 CDN Enabler，其中包括一個選項，用於自動集成多個 CDN 提供商，這非常方便。

以下是一些支持 CDN 的插件：

  • WP 最快的緩存
  • WP火箭
  • 自動優化
  • W3 總緩存
  • WP 超級緩存
  • CDN啟動器

圖像優化

圖像優化是導致頁面加載速度緩慢的最大罪魁禍首之一。 這可能是因為它很容易被忽略。 畢竟，一張背景圖片可以對網頁造成多大的損害？ 好吧，你可能會感到驚訝。 一些沒有針對 Web 優化的大圖像可能會對頁面加載速度產生災難性的影響。 讓我們面對現實吧，您的網站可能會有很多圖片。

真的沒有足夠強調圖像優化的基本需求。 每個網站都應該這樣做。 單獨的圖像壓縮可以使您的站點明顯更快，較小的圖像尺寸將節省存儲空間和帶寬（雙贏！）。 但是您還應該考慮其他重要的圖像優化。

簡而言之，在為 Web 優化圖像時，您需要執行以下操作：

使用正確的文件類型

對於網絡上的圖像，您確實應該堅持使用以下圖像文件類型：

  • JPG – 這應該是您在網站上使用的大多數圖像/照片的首選文件類型，因為您可以獲得比 PNG 或 GIF 更小的文件大小的漂亮圖像。 除非您需要透明背景，否則避免將 PNG 格式用於背景圖像或照片等內容。
  • PNG – 將 PNG 用於需要透明背景的圖像。 JPG 不支持透明度。
  • SVG – 這是一種矢量格式，使用 HTML 代碼提供極其清晰的細節。 SVG 非常適合製作徽標、圖標和其他矢量動畫。

調整圖像大小和裁剪圖像

你永遠不希望你的圖像比它需要的更大。 例如，如果您在 Divi 的主題選項中添加徽標，則在大多數情況下，您只需要它的寬度為 100 像素。 因此，請勿上傳寬度為 5000 像素的徽標並強制 Divi 為您調整該圖像的大小。 前端的結果可能看起來相似，但大尺寸正在扼殺您的頁面加載時間。

使用 Divi 將圖像上傳到您的頁面時，了解這些圖像在 Divi 的列結構中需要多大是有幫助的。 這份終極指南可以幫助您指明正確的方向。 （但是，自那篇文章以來已經添加了新的列結構，因此我們將嘗試盡快更新）。

壓縮文件大小

在您注意到質量下降之前，您需要將圖像文件的大小降低到一定程度。 這是通過圖像壓縮完成的。 大多數照片編輯器、插件和網站（如 tinypng.com）使用無損壓縮（在不損失任何圖像質量的情況下縮小圖像文件）和智能有損壓縮（通過減少元數據和圖像質量來減小圖像文件的大小）來壓縮圖像。用戶並沒有真正注意到的方式）。

利用圖像優化工具

如果可以，我建議您在將圖像上傳到 Divi 站點之前針對 Internet 優化圖像。 這可以通過像 Photoshop 這樣的照片編輯器來完成，其中包括“保存為 Web”選項。 此外，您可以使用免費的第三方網站（如 TinyPNG.com 或 Compressor.io）在將圖像上傳到您的網站之前對其進行壓縮。

有一些很棒的插件可以為您進行圖像壓縮。 某些插件（如 Imagify）會壓縮您網站上已經使用的圖像，並在您將圖像上傳到 WordPress 媒體庫時自動壓縮圖像。 請記住，為此使用插件可能會在壓縮這些圖像時對您的網站造成負擔，因此最好盡可能事先進行圖像優化。

以下是您可以使用的一些出色的圖像優化工具和插件：

  • 網站：
    • Compressor.io
    • Tinypng.com
  • 插件：
    • 想像
    • Smush 圖像壓縮和優化
    • 可濕性粉劑火箭

有關更多信息，請查看 6 種質量圖像優化插件的比較。

Divi 的內置 SRCSET 支持

Divi 還內置了具有本機 SRCSET 支持的響應式圖像。 通過為不同的響應式顯示器（如平板電腦和手機）提供合適尺寸的縮放圖像，這進一步改進了 Divi 中使用的圖像的優化。

視頻優化

視頻優化比圖像優化要難一些，但絕對不那麼重要。 視頻文件可能很大，因此對頁面加載速度非常不利。 如果您在服務器上託管大量視頻（例如在 WordPress 媒體庫中），您將遇到額外的磁盤空間問題。 這就是為什麼通常建議使用第三方服務（如 YouTube 或 Vimeo）為您託管視頻的原因。 或者，您可以考慮在 Amazon S3 等存儲平台上卸載您的視頻媒體內容。 這將允許您從 Divi 的視頻模塊中鏈接到這些視頻，而不必降低服務器的速度。

如果您要自託管視頻，則肯定需要減小視頻大小以加快加載速度。 您可以使用 Handbrake 等免費工具（易於使用）輕鬆縮小視頻文件。

有關如何在 Divi 中使用視頻的更多信息（例如將第三方託管的視頻 URL 添加到視頻模塊），請查看此終極指南。

使用質量插件

顯然，網站必須加載的文件越少，速度就越快。 所以你需要注意你使用的插件數量。 If you have plugins (or Themes) that you aren't using, make sure you delete them. They can be harmful to your website performance and a serious security risk. But quality is the more important factor when it comes to plugins. In fact you can have 20 to 30 quality plugins that won't slow down your site as much as one bad one will. In general, make sure you choose plugins that have stood the test of time and have great reviews. And always test how a plugin affects your website performance with before and after speed tests to be sure.

Conducting Speed Tests

You probably wouldn't be reading this article if you haven't done at least one speed test on your website. And rightly so, it is important to know how fast your pages are loading for visitors. Conducting a speed test is one of the easiest things you can do. There are tons of websites that will do this for you for free. And the metrics they provide will be invaluable for identifying ways you can further optimize your site for better performance.

Here are a few great places to start:

  • GTMetrics
  • Pingdom
  • Google Page Insights

The results of these tests are what drive many of us to start optimizing our Divi site for faster load times. They provide a helpful breakdown of how your web page performs in a variety of areas. Then you can use their recommendations as a checklist to work through as you optimize your site.

The best way to use these online speed testing tools for you Divi WordPress site is to run a test on a page first before you do any optimizations. Then you can use this as a base to compare future tests as you make changes. After each optimization you make, you can see if your score improves.

For example, you may notice that using one caching plugin will work better than another. Don't be afraid to test multiple plugins for best performance.

Here is a helpful WordPress optimization guide by GTMetrix that will be helpful.

As you implement the speed optimizations to your site, you should see improvements in the following areas:

  • Fully loaded time/Onload time (this is the most important metric you are trying to knock down)
  • Total Page Size (things like minification, image optimization with help with this)
  • 要求
  • PageSpeed/YSlow scores
  • Serve scaled images
  • Optimize images
  • Leverage browser caching
  • Minify CSS/HTML
  • Enable gzip compression
  • Make fewer HTTP requests
  • Add Expires Headers

For more info, check out our post on how to improve your google page speed score.

The Goal is Speed, Not Perfection

It can be easy to get bogged down with testing your website and optimizing it to perfection. But no website will be perfect. You may even find that improving certain speed test performance grades may actually slow down your page load time. That's because even those speed tests aren't perfect either. Like this article, they are merely a guide to help improve your website performance and speed.

How to Avoid Possible Conflict with Divi's Built-in Performance Optimizations and Third Party Plugins

Whenever you deploy a third party plugin for minification and caching, you may encounter certain conflicts. For example, you may find that a Divi module doesn't display correctly or that certain JavaScript files aren't rendering properly.

To avoid these types of conflicts, you can disable Divi's built-in optimizations and let the third party plugin handle it for you. The three option you will want to disable are:

  • Static CSS File Generation
  • Minify and Combine Javascript Files
  • Minify and Combine CSS Files

You can disable the options to minify and combine Javascript and CSS files by going to Theme Options > General tab.

You can disable the option for static CSS file generation under Theme Options > Builder > Advanced.

Other Tips

We've pretty much covered all the major factors that contribute to faster Divi/WordPress websites. But there are a lot more things to consider that could improve your speed even more.

  • Having a correct Divi child theme setup
  • Changing your WordPress Login URL to keep those bots from overloading your server. This would be a good chance to create a custom login page with Divi.
  • Avoiding unnecessary calls to external Services. Some plugins and embeds require that you use files that are hosted on their servers. These additional calls will slow down page load.
  • Incorporate lazy loading for images and videos for better page load speed.

Quick Overview of Suggested Practices and Resources for Faster Divi Websites

Here is a quick overview of the suggested practices and resources included in this article for easy reference.

Get Latest PHP version

  • check with Divi System Status
  • Update your PHP version

Database Optimization

You can use these plugins to optimize and cleanup your Database for a faster site.

  • WP優化
  • Optimize Database after Deleting Revisions

DNS Lookup and DDOS Detection

  • You can use CloudFlare for this for free

Good Hosting

A quick list of hosts to consider for a faster Divi website.

  • SiteGround – offers shared hosting, managed WP Hosting, dedicated, and cloud hosting (visit SiteGround / our review)
  • Cloudways – specializes in SSD-Based managed cloud hosting and also has managed WP Hosting (visit Cloudways / our review)
  • Kinsta – specializes in managed WP hosting (visit Kinsta / our review)
  • WPEngine – specializes in managed WP hosting (visit WPEngine / our review)
  • Flywheel – specializes in managed WP hosting (visit Flywheel / our review)

If you are looking for a credible hosting review site, check out Review Signal.

You can also refer to this guide to help you make your choice.

Time to First Byte (TTFB) Optimization

  • Get Better Hosting with proper web server configuration.
  • Optimize the site for speed

Caching (Page, Object, Browser)

Popular caching plugins include:

  • WP Rocket
  • Cache Enabler (read our review)
  • W3 Total Cache (read our review)
  • W3 Super Cache (read our review)
  • Comet Cache (read our review)
  • WP Fastest Cache

If your plugin doesn't support browser caching, you will want to enable browser caching manually.

Minify/Combine Site Files

Some credible plugins that will minify your site files include:

  • 自動優化
  • W3 Total Cache (read our review)
  • W3 Super Cache (read our review)
  • WP Rocket (paid)

Our you can do it manually.

Gzip Compression

  • Check to see if Gzip compression is enabled
  • Add manually using mod_deflate model
  • Plugins that support Gzip compression:
    • WP Rocket
    • W3 Total Cache (read our review)
    • WP Fastest Cache

CDN

Here are some credible CDN platforms to consider:

  • MaxCDN (now StackPath)
  • KeyCDN (you can even use with CDN Enabler WordPress plugin to integrate KeyCDN; This setup would also work well with Cache Enabler as well)
  • Amazon Cloudfront
  • 蘇庫裡

Here are some plugins with CDN support:

  • WP Fastest Cache
  • WP Rocket
  • 自動優化
  • W3 Total Cache
  • WP 超級緩存
  • CDN Enabler

圖像優化

  • Photoshop “save for web”
  • Websites:
    • Compressor.io
    • Tinypng.com
  • Plugins:
    • Imagify
    • Smush Image Compression and Optimizaton
    • WP rocket
  • Choose the right size images for Divi's grid layout using this ultimate guide.

最後的想法

Divi is faster than ever before. With built-in performance upgrades, your standard Divi installs have faster page loads on the front end, a faster WordPress admin on the backend, and a faster Divi Builder to edit and design your site. This is a great start, but there is much more to do to make sure your Divi site is running as fast as possible. The speed and performance optimizations included in this article will definitely boost your site speed. For the most part, these optimizations would apply to any WordPress site/theme, not just Divi. And it is surprising how many simple things you can do for free!

I'm sure there are tons of suggestions and resources out there that weren't mentioned, so feel free to share those with us in the comments.

我期待著您的回音。

乾杯!

精選圖片來自 Sammby/shutterstock.com