Elementor 與 WPBakery 速度比較：哪個更快？ (2021)

試圖在 Elementor 和 WPBakery 頁面構建器之間做出決定？ 在本指南中，我們將回答一個關鍵問題：哪一個能讓您獲得更快的 WordPress 網站？

它們都帶有直觀的拖放界面，為開發人員和設計人員提供支持，使他們能夠在幾分鐘內構建 WordPress 頁面。 但是它們在速度和性能方面處於什麼位置？

WPBakery 頁面構建器（更廣為人知的 Visual Composer ）現在已經 10 歲了！ 它的成功部分歸功於其捆綁策略：自 2011 年以來，許多流行的高級主題已將 WPBakery 集成到他們的演示中。這是市場上最早的頁面構建器之一。

自 2016 年發布以來，Elementor 一直受到巨大衝擊，活躍安裝量超過 500 萬。 成功來得晚了一點，但它現在成為 WordPress 上第一個使用的頁面構建器。

Elementor 和 WPBakery 都是非常流行的網頁設計和定制選項：任何一個構建器都不會出錯。 但是，我們可以對他們的表現說同樣的話嗎？

讓我們運行一些測試，看看哪個頁面構建器更快。 這應該可以幫助您完成下一個項目。

我們將如何測試 Elementor 和 WPBakery Page Builder 的性能

為了測試 Elementor 與 WPBakery 的性能，我們將為具有以下設置的頁面構建器運行三個單獨的速度測試：

• 使用的主題：二十一二十一主題
• 頁面構建器測試：Elementor 和 WPBakery
• 性能工具：Google PageSpeed Insight 和 WebPageTest

會出現三種情況：

️場景#1：我們只測試速度，沒有來自頁面構建器的任何內容——主題，沒有頁面構建器，沒有 WP Rocket。

️ 場景#2：在同一個網站上，我們將與每個構建器構建一個簡單的頁面並比較性能結果。 為了平等起見，我將在每個構建器上使用等效的模塊和小部件。 主頁模板來自 Elementor 和 WPBakery 庫。 為了盡量保持公平，我將添加以下內容：

• 帶有背景圖片的英雄標題（Elementor 圖片為 150 KB）
• 帶有 WP Bakery 圖像的英雄標題（WP Bakery 圖像為 152 KB）
• 4 張使用 Elementor 的小圖片推薦（每張圖片 4 KB）
• WPBakery Page Builder 的 2 張小圖片推薦（每張圖片 4KB -它們在兩個構建器上都是相同的）
• 嵌入的 YouTube 視頻
• 文本和圖標部分
• 按鈕/號召性用語
• 來自虛擬客戶的推薦
• 手風琴常見問題解答
• 根據構建器中可用的內容，一個隨機模塊

️ 場景#3：我們將在激活 WP Rocket 緩存插件後測量性能。 這將使您了解如果您使用像 WP Rocket 這樣的插件，您可以期待什麼樣的性能優化。

為了長期提供出色的用戶體驗，您應該始終評估網站的速度。 讓我們看看我們將在績效審計中衡量哪個 KPI：

1. 綜合性能等級
2. 首頁滿載時間
3. 總頁面大小
4. Lighthouse 性能指標，即：

• Core Web Vitals 分數（最大的內容繪製、累積佈局偏移、首次輸入延遲）
• 速度指數、交互時間、總阻塞時間、首次內容繪製。

我們為您完成了繁重的工作，但如果您有興趣運行自己的審核，請遵循我們關於測試您的 WordPress 網站和測量速度結果的完整指南。

Elementor vs WPBakery 速度測試結果

您是營銷人員、開發人員或網絡專業人士，您必須隨時做出艱難的決定。 最快的頁面構建器是什麼？ 哪個值得投資？ 好吧，如果您想知道這兩個插件中的哪一個可以節省您的時間，同時又不會降低您的網站速度，請繼續關注我們！

讓我們來看看數據！

場景 #1 – 沒有頁面構建器和 WP Rocket

這是使用默認 WordPress 主題 2021（無頁面構建器 - 無 WP Rocket）的數據。

我的網站速度非常快——這是有道理的，因為上面幾乎沒有內容。 現在讓我們通過使用頁面構建器構建一個實際的主頁來增加趣味。

️ 場景 #2：頁面構建器的內容 – 沒有 WP Rocket

這是我們使用 WordPress 頁面構建器和從庫中選擇的模板構建類似主頁時的新性能結果。

使用 Elementor 構建的頁面	使用 WPBakery 構建的頁面

️ Elementor 性能結果：

在發布了使用 Elementor 構建的主頁後，我的網站變慢了——這是可以預見的，因為我們在頁面中添加了一些內容。 我的指標現在傾向於橙色和紅色：

Elementor 頁面構建器影響了我的整體表現，並將我的 FCP、SI 和 LCP 指標變為紅色區域。 不過，TBT 和 CLS 保持穩定，這對於視覺完成和穩定性來說是令人鼓舞的。

️ WPBakery 性能結果：

在全球範圍內，使用 WPBakery 構建主頁後，我的網站變慢了，而且我再次處於橙色區域 (58/100)。 儘管 KPI 並不算太差，但我的主頁的加載時間仍然很長（來自 WebPageTest.org 的 4.9 秒）。

從好的方面來說，我們在 PSI 中獲得了兩個綠色分數，但不幸的是，其他四個 Lighthouse 指標為紅色：

讓我們最終完成我們對 Elementor 和 WPBakery 的比較。

️ Elementor vs WPBakery – 性能結果：

WP Bakery 在某些領域比 Elementor 佔上風，但總的來說，我們會為 Elementor 提供卓越的性能等級。

使用像 Elementor 或 WPBakery 這樣的自動化網站創建者的一個好處是，自己構建東西會減少多少時間和精力——所有這些都不會犧牲質量！ 的確，有時我們沒有精力、時間或專業知識從頭開始設計網站，而這正是頁面構建器派上用場的地方……

問題是，要創建有吸引力的即用型模板或演示，開發人員需要使用大量 CSS 和 JS。 正如我們在之前的分析中所看到的，所有這些文件都會使您的網站超載並增加加載時間。

值得慶幸的是，WP Rocket 優化了您使用 Elementor 或 WPBakery 構建的網站，因此無需花費數小時即可有人訪問您的網頁。

是時候看看 WP Rocket 對性能的積極影響了。

場景#3 Elementor vs WP Bakery with WP Rocket

在使用兩個頁面構建器構建頁面後，我們的性能分數將移至 PSI 的橙色區域。 此外，快速瀏覽機會/診斷部分顯示使用 Elementor 和 WPBakery 時還有改進的空間。 數字不同，但最後， PSI 為兩個頁面構建器提供了相同的建議。

不要恐慌！ Google PageSpeed Insights 正在分享一些建議，您可以使用這些建議來提高您的 Lighthouse 性能得分並讓您的網站更快。

任何涉及文件優化、在圖像上實現延遲加載和消除渲染阻塞資源的事情都將提高性能。 （這是否敲響了警鐘？聽起來就像 WP Rocket 的功能！）

要獲得綠色性能評級，Google 建議您遵循以下技術：

• 使用有效的緩存策略：較長的緩存生命週期可以加快對您頁面的重複訪問。
• 考慮交付關鍵 JS/CSS 內聯並推遲所有非關鍵 JS/樣式（以消除渲染阻塞資源）
• 減少樣式表中未使用的規則並推遲未用於首屏內容的 CSS（減少未使用的 JavaScript 和 CSS）
• 基於文本的資源應使用壓縮（gzip、deflate 或 brotli）來提供，以最大限度地減少總網絡字節數。
• 預加載網頁字體以確保在網頁字體加載期間文本保持可見

這五個關鍵解決方案（幾乎）由 WP Rocket 自動實施。 您需要做的就是調整 WordPress 儀表板中的一些選項。 稍後我們將向您展示。

現在是時候激活 WP Rocket，看看上面提到的所有問題是否都消失了。 準備好？

讓我們看一下使用WP Rocket 的場景：

Elementor – 使用 WP Rocket

總體而言，使用 WP Rocket，我們的網站速度更快。 所有 KPI 都有顯著提高，整體性能等級現在處於綠色狀態：

WPBakery – 使用 WP Rocket

同樣的結論是：我的表現等級現在是綠色的！ WP Rocket 在這裡做得很好。 我不再有紅色的 KPI。 它們不是綠色就是橙色（SI 和 LCP），這是令人鼓舞的。 我的頁面加載時間從 4 秒變為 1.9 秒，頁面大小從 2,040 KB 變為 979 KB。

Elementor vs WP Bakery：性能哪個更好？

在比較了這兩個 WordPress 插件的性能後，我們發現Elementor 比 WPBakery 稍微快一點。

我們還了解到，WP Rocket 確實可以發揮一些魔力來加速您的網站，改善您的核心 Web Vitals，甚至將總阻塞時間減少到零——無論您使用哪種頁面構建器！

數據不言自明。 看看我們的下表：

使用 WP Rocket 加速 Elementor 和 WPBakery

我想您想知道我激活了 WP Rocket 的哪些選項以獲得綠色分數並擴展我的“通過審核”列表。

給你：讓我與你分享我在 WP Rocket 中使用的四個選項，以使我的網站更快（適用於 Elementor 和 WPBakery）：

• 文件優化選項卡- 縮小 CSS、組合 CSS 和優化 CSS 交付——這是刪除未使用的 CSS 功能（或者，如果它不適合您，則異步加載 CSS 選項）：

• 文件優化選項卡 -縮小 JS、合併 JS 文件、延遲加載 JS 和延遲 JS（這也允許我刪除/減少未使用的 JS）：

• 媒體選項卡 -在圖像和視頻上啟用 LazyLoad； 這對位於標題中的 YouTube 視頻很有幫助：

• 預加載選項卡 -啟用預加載緩存和預加載字體：

總結和總結性能比較

綜上所述，Elementor 的整體性能等級略好於 WPBakery。 它們都具有強大的設計選項，可讓您在幾個小時內建立一個網站。 在用戶友好性方面，我傾向於 Elementor。 我發現使用 Elementor 構建頁面的每個元素的結構和样式更容易，但這是個人感覺。 我鼓勵您對兩者都進行測試，以便獲得自己的意見。

要在使用頁面構建器時保持良好的性能得分，請確保使用我們列表中的輕量級 WordPress 主題之一。

最後，無論您使用的是 Elementor 還是 WP Bakery，請確保使用 WP Rocket 提升您網站的性能。 正如您在上面的審核中看到的，WP Rocket 可以做出巨大的改進，並幫助您在 Lighthouse 中獲得 90% 以上的分數。

如果您對性能審計的工作方式或使用 WPRocket 可以獲得哪些改進有任何疑問，請諮詢我們！