使用 Smush 和 Hummingbird 插件優化 WPBakery 的 Impreza 主題

Impreza 是一個流行的基於 WPBakery 的主題，具有自己的風格。 在這篇文章中，一位 WPMU DEV 成員分享了如何優化這個多功能 WordPress 主題以實現最高速度和最佳性能。

正如 WPMU DEV 成員、網路開發人員和加拿大網頁設計公司 CapitalWebDesign.ca 的所有者 Phil Martin 最近與我們分享的那樣，「現在人們對優化基於 WPBakery 的主題很感興趣，所以我想我會提供我最近使用的由 WPBakery 驅動的主題 Impreza 的 2 美分。」

在這篇文章中，我們將介紹以下內容：

• WordPress 翼豹主題概述
• 優化 Impreza 主題的測試方法
• 基準測試結果
• 使 Impreza 的性能更加出色

WordPress 翼豹主題概述

Impreza 是使用 WPBakery 的高級 WordPress 主題。 它由 UpSolution 開發和維護，目前可從 ThemeForest 獲得，它是他們最暢銷的主題之一，迄今為止銷量超過 88K，並且來自超過 2400 條用戶評論的 4.89/5 星評級。

該主題的許可證通常售價 59 美元（但偶爾會以 39 美元的價格出售），並附帶 6 個月的支持。

正如 Phil 所說：「他們平均每個月都會推送重大更新。 說真的，看看這個更新日誌，試著說服我這不是你很久以來見過的最好的更新日誌布局/樣式。」

Impreza 主題使用 WPBakery，但加入了自己的風格。它是一個令人難以置信的模塊化主題，將許多結構組件解耦，包括：

• 網格布局： Impreza 允許您自定義顯示數據組的方式，例如帖子、自定義帖子類型（如推薦或產品、圖片庫等）。您可以有效地自定義網格中的任何元素。 查看他們的網格布局文檔頁面一瞥。
• 頁面塊： 主題提供可重用的塊。 這使您可以在一個地方編輯所有內容，然後更改會反映在您添加塊的任何地方。 將這些用於頁腳、號召性用語等。
• 頁面模板： 您可以使用 WPBakery 構建可應用於任何帖子類型或頁面的模板。 使用這些來為帖子和頁面設置不同的頁腳，或者根據帖子類型支持不同的模板（例如，烹飪食譜與博客中的產品評論）。
• 標題生成器： Impreza 提供了一個獨特、強大且非常直觀的標題生成器。 查看標題生成器文檔頁面。

關於 Impreza 的一些額外注意事項：

• 它本機支持大多數 ACF 自定義欄位（如果您使用我們的 SmartCrawl SEO 插件，它也支持 ACF，那就更棒了）。
• 100% 兼容 WPML 語言翻譯插件。
• 內置性能優化選項（包括 WPBakery 元素的一鍵資產優化：僅包括頁面上存在的元素的 CSS + JS）
• 內置維護模式、按鈕生成器、自定義圖像大小等
• 能夠導入個人演示 頁面 或複製特定的 來自特定演示頁面的行. 這是一個很好的生活質量選擇：當您在演示中看到要複製的特定行時，只需複製 + 粘貼即可。
• 每個許可證對 1 個生產站點和 1 個開發站點有效（強制維護模式）。 授權站點為您提供主題白標、演示導入、一鍵主題更新（無 Envato 插件）、插件/推薦插件（例如 Smush）
• 筆記： 不需要為每個站點運行許可證，您可以在需要安裝插件或導入演示的地方輪換許可證。 主題更新仍然可以通過 Envato 插件獲得，用於未經許可的網站。 此外，當您的支持處於活躍狀態時，主題開發人員將幫助您進行幾乎所有主題自定義，並且根據廣泛使用該主題的 Phil 的說法，他們的支持人員知識淵博。

因此，Impreza 是一個很棒的 WordPress 主題，特別是如果您喜歡使用 WPBakery。

然而，我們真正想知道的是：

• 使用 Impreza 創建的網站載入速度快且性能良好嗎？
• 我們能否使用我們的優化插件 Smush 和 Hummingbird 以及託管的 WordPress 主機讓使用 Impreza 創建的網站載入速度更快、性能更好？

對於這些答案，讓我們轉向菲爾的……

優化 Impreza WordPress 主題的測試方法

Impreza 非常注重性能，它們提供的一些高級主題選項就證明了這一點。

要了解 Impreza 在 Google PageSpeed Insights 和 GTmetrix 上的排名有多好，這裡是 Phil 用他自己的話來說的測試方法：

（編者註：像 Phil 這樣的 WPMU DEV 成員可以作為其 WPMU DEV 會員資格的一部分自動訪問我們插件的 Pro 版本，但您可以使用免費版本的 Smush 和 Hummingbird 遵循下面顯示的相同方法。）

• 使用真實網站： 我在這個基準測試中使用的網站是一個真實的、完整的網站。 雖然它還沒有在公共交通上運行，但它正在運行 WPML，並且充滿了包括圖像在內的真實內容。
• 託管在 WPMU DEV 上： 位於加拿大多倫多的簡單青銅級伺服器。 我們將測試 FastCGI 伺服器端緩存
• Smush Pro： 圖像優化對這個網站很重要，因為每篇博文都有一張特色圖片。 該網站在未來 5 年內可能會增長到 10,000 多篇博客文章，因此我們需要確保從一開始就進行優化。
• 蜂鳥專業版： 測試資產優化是否適用於 Impreza。
• 緩存： 我們不需要緩存解決方案中的冗餘，因此無論是 Hummingbird Pro 緩存 或者 使用了伺服器端 FastCGI 緩存。
• Impreza 性能設置： 在文件路徑中保留「http/https」，禁用 jQuery 遷移腳本，將 jQuery 腳本移動到頁腳，動態載入主題 JS 組件，禁用 WPBakery Page Builder 的額外功能，禁用 Gutenberg（塊編輯器）CSS 文件，優化 JS 和CSS 大小，並將 Google 字體樣式合併到單個 CSS 文件中。

基準測試結果

通過禁用兩個插件、關閉 Impreza 性能設置和禁用伺服器端緩存來執行測試。

然後，Phil 一次增量地啟用一個組件。 Google PageSpeed Insights 運行了 3 次（保留了 3 次運行的平均值）並生成了 GTmetrix 性能報告。

以下是菲爾的測試結果：

從上面可以看出，Phil 的測試結果來自……

之前（僅限翼豹）：

• 谷歌 PSI 移動分數： 27
• Google PSI 桌面分數： 83
• GTmetrix 評分： A – 92%-94%
• GTmetrix *FCP： 1.1s
• GTmetrix **TTFB： 0.8s

之後（Impreza + Smush + Hummingbird + CDN/緩存）：

• 谷歌 PSI 移動分數： 87 （222% 改善）
• Google PSI 桌面分數： 96 （提高 15.6%）
• GTmetrix 評分： A – 100%-95%
• GTmetrix *FCP： 0.461s
• GTmetrix **TTFB： 0.206s

* FCP = 第一次內容豐富​​的繪畫
** TTFB = 到第一個位元組的時間

運行上述測試後，這是 Phil 發現性能最佳的設置：

• Impreza 性能設置： 全部啟用。
• 糊塗： 全部推薦 + CDN + WebP（專業版功能）。 此外，確保在 Smush > 集成菜單中啟用了 WPBakery Page Builder 集成。 這將使用 WPBakery 的 Page Builder 編輯器調整大小的自定義大小的圖像。
• 蜂鳥： 全部推薦 + CDN + 資產優化自動/快速。
• 緩存： Hummingbird Pro 或伺服器端 FastCGI。
• Impreza + WPMU DEV 託管 對自己還是做好開箱即用。 PageSpeed Desktop 上的 83/100 和 GTmetrix 上的 A 級（92%；94%）令人印象深刻，但顯然移動設備上的 27 分並不理想。
• Impreza 的內置性能優化 非常有效。 它將 Google PageSpeed 的分數提高到 90 年代，這對於移動設備尤其重要。
• 糊塗 似乎對性能得分沒有太大影響，但它會減少存在圖像的整體頁面載入大小。
• 蜂鳥 緩存似乎與 FastCGI 伺服器端緩存相當。
• 蜂鳥臨 CDN 似乎與讓伺服器通過 FastCGI 緩存提供 CSS + JS 相當。

以下是 Phil 在運行測試後提供的一些其他有價值的見解：

• 「完全破壞這些分數的第一件事是谷歌的 reCAPTCHA javascript。」
• 「老實說，我對主題 + WPMU DEV Hosting w/FastCGI 伺服器端緩存的表現感到非常驚訝。 PageSpeed Insights 上的 0.224 秒和 92/98 的 TTFB 令人難以置信地令人印象深刻。 然後，Smush Pro 通過提供超級​​優化的圖像文件，在頂部增加了一層優化。 Hummingbird Pro 可以放鬆一點，不必擔心服務緩存。 相反，它可以專註於設置我們所有的過期標頭、監控正常運行時間以及從 CDN 提供 CSS/JS。」

用 Smush 和 Hummingbird 優化 Impreza，你可以吃蛋糕也可以吃！

使 Impreza 的性能更加出色 印象深刻

用菲爾自己的話來說：

「過去使用過許多排名靠前的多功能主題（Avada、Enfold、Etalon、Extra、Jupiter、Salient 等），我從未像現在這樣成功地構建現代、簡約、高效和高性能的網站與翼豹。 為周到的設計、廣泛的可定製性和可笑的性能交易預先構建的模板和演示庫對我來說是值得的。

看，結果不會說謊：在 GTmetrix 上沒有一項測試掉出 A 級。」

所以你有它！

Impreza 不僅是由 WPBakery 頁面構建器提供支持的快速載入 WordPress 多用途主題，而且可以使用 Smush 和 Hummingbird 優化插件以及啟用 CDN 和 FastCGI 等伺服器端託管功能來提高其性能。

要訪問我們的整套 Pro 插件、超快速的託管 WordPress 託管以及對 WordPress 的所有方面的專家 24×7 幫助和支持，請立即成為 WPMU DEV 成員，沒有風險（我們提供 100% 退款保證）。

貢獻者

本文是與以下人員合作編寫的：

菲爾·馬丁 – 資本網頁設計。 菲爾利用他二十年的網頁設計經驗來實現一個目標：通過為加拿大首都的企業和非營利組織建立現代網站來回饋家鄉！

***

注意：我們不接受來自外部來源的文章。 但是，WPMU DEV 成員可以通過 Blog XChange 為我們博客上的教程和文章提供想法和建議。