使用 Smush 和 Hummingbird 插件优化 WPBakery 的 Impreza 主题

技术教程 2021年11月6日

1476 0 6

Impreza 是一种流行的基于 WPBakery 的主题，具有独特的风格.在这篇博文中，一位 WPMU DEV 成员分享了如何优化这个多用途 WordPress 主题以获得最高速度和最佳性能.

作为 WPMU DEV 成员、网络开发人员和加拿大网页设计公司 CapitalWebDesign 的所有者 Phil Martin.ca 最近与我们分享，"这些天人们对优化基于 WPBakery 的主题很感兴趣，所以我想我会提供我最近一直在使用 WPBakery 主题的 2 美分，Impreza."

WordPress Impreza Theme — Impreza 是一个使用 WPBakery 的多用途 WordPress 主题.

在这篇文章中，我们将介绍以下内容:

WordPress Impreza 主题概述
优化 Impreza 主题的测试方法
基准测试结果
让 Impreza 的性能更加出色

WordPress Impreza 主题概述

Impreza 是一个优质的 WordPress使用 WPBakery 的主题.它由 UpSolution 开发和维护，目前可从 ThemeForest 获得，在那里它被列为最畅销的主题之一，迄今为止销量超过 80,000，并从 2,200 多个用户评论中获得 4.89/5 星评级.

Best-selling WordPress themes on ThemeForest — Impreza 是 ThemeForest 上最畅销的 WordPress 主题之一.

该主题的许可价格通常为 59 美元，但通常以 39 美元的价格出售，并提供 12 个月的支持.

正如 Phil 所说:"他们平均每个月都会推送重大更新.说真的，请查看此变更日志并尝试说服我这不是您很久以来见过的最好的变更日志布局/样式."

Impreza 主题使用 WPBakery，但加入了自己的风格.这是一个令人难以置信的模块化主题，可将许多结构组件解耦，包括:

网格布局:Impreza 允许您自定义显示数据组的方式，例如帖子、自定义帖子类型(如推荐或产品)、图片库等.您可以有效地自定义网格中的任何元素.查看他们的网格布局文档页面一瞥.
页面块:主题提供了可重复使用的块.这使您可以在一个地方编辑所有内容，然后更改会反映在您添加块的任何地方.将这些用于页脚、号召性用语等.
页面模板:您可以使用 WPBakery 构建可应用于任何帖子类型或页面的模板.使用这些来为帖子和页面设置不同的页脚，或者根据帖子类型支持不同的模板(例如烹饪食谱与博客中的产品评论).
标头构建器: Impreza 提供了一个独特、强大且非常直观的标头构建器.查看标题构建器文档页面.

Impreza Grid Layout — 翼豹让您可以有效地自定义网格中的任何元素.

关于翼豹的一些额外注意事项:

它本身支持大多数 ACF 自定义字段(如果您使用我们的 SmartCrawl SEO 插件，它也支持 ACF，那就更棒了).
100% 与 WPML 语言翻译插件兼容.
内置性能优化选项(包括针对 WPBakery 元素的一键资产优化:仅针对页面上存在的元素包含 CSS + JS)
内置维护模式、按钮构建器、自定义图像大小等
能够导入单个演示页面或复制特定来自特定演示页面的行.这是一个很好的生活质量选项:当您在演示中看到要复制的特定行时，只需复制 + 粘贴即可.
每个许可证对 1 个生产站点和 1 个开发站点有效(强制维护模式).授权站点为您提供主题白标、演示导入、一键主题更新(无 Envato 插件)、插件/推荐插件(例如 Smush)
注意: 不需要为每个站点运行许可证，您可以在需要安装插件或导入演示的地方轮换许可证.主题更新仍然可以通过 Envato Plugin 用于未经许可的站点.此外，虽然您的支持很活跃，但主题开发人员会帮助您进行几乎所有主题定制，据广泛使用该主题的 Phil 说，他们的支持人员知识渊博.

所以，Impreza 是一个很棒的 WordPress 主题，特别是如果您喜欢使用 WPBakery.

然而，我们真正想知道的是:

使用 Impreza 创建的网站加载速度快且性能良好?
使用我们的优化插件 Smush 和 Hummingbird 以及托管的 WordPress 托管，我们能否使使用 Impreza 创建的网站加载速度更快并表现更好?

对于这些答案，让我们转向 Phil 的……

优化 Impreza WordPress 主题的测试方法

Impreza 非常注重性能，它们提供的一些高级主题选项证明了这一点.

Impreza-Advanced Theme Options. — Impreza 提供高级主题选项以帮助提高性能.

了解 Impreza 在 Google PageSpeed Insights 和 GTmetrix 上的排名情况，这是 Phil 用他自己的话来说的测试方法:

(编者注:像 Phil 这样的 WPMU DEV 成员可以自动访问我们插件的 Pro 版本，作为他们WPMU DEV 成员资格的一部分，但是您可以使用 Smush 的免费版本来遵循下面显示的相同方法蜂鸟.)

使用真实网站:我在此基准测试中使用的网站是真实的、完全构建的网站.虽然它尚未面向公众开放，但它运行的是 WPML，并且充满了包括图片在内的真实内容.
托管在 WPMU DEV: 位于加拿大多伦多的一个简单的青铜级服务器.我们将测试 FastCGI 服务器端缓存
Smush Pro:图片优化对本网站很重要，因为每篇博文都有特色图片.在未来 5 年内，此网站可能会增长到 10,000 多篇博文，因此我们需要确保从一开始就进行优化.
Hummingbird Pro: 测试资产优化是否适用于 Impreza.
缓存:我们不需要缓存解决方案的冗余，因此Hummingbird Pro 缓存或服务器端 FastCGI 缓存.
Impreza 性能设置: 在文件路径中保留"http/https"，禁用 jQuery 迁移脚本，将 jQuery 脚本移动到页脚，动态加载主题 JS 组件，禁用 WPBakery 页面的额外功能Builder，禁用 Gutenberg(块编辑器)CSS 文件，优化 JS 和 CSS 大小，并将 Google 字体样式合并到单个 CSS 文件中.

基准测试结果

测试是在禁用两个插件、关闭 Impreza 性能设置和禁用服务器端缓存的情况下进行的.

Phil 然后一次增量启用一个组件.Google PageSpeed Insights 运行了 3 次(保持了 3 次运行的平均值)并生成了 GTmetrix 性能报告.

这是菲尔的测试结果:

Impreza Theme-Test Results — 以上测试由专业人士 Phil Martin 独立运行WordPress 网站开发人员和 WPMU DEV 成员.Phil 使用 Impreza 主题和增量优化方法的测试结果.

从上面可以看出，Phil 的测试结果来自……

之前(仅限翼豹):

Google PSI 移动评分:27
Google PSI 桌面版得分:83
GTmetrix 得分:A – 92%-94%
GTmetrix *FCP:1.1s
GTmetrix **TTFB:0.8s

之后(Impreza + Smush + Hummingbird + CDN/缓存):

Google PSI 移动得分:87(提高 222%)
Google PSI 桌面版得分:96(提高 15.6%)
GTmetrix 得分:A – 100%-95%
GTmetrix *FCP:0.461s
GTmetrix **TTFB:0.206s

* FCP = First Contentful Paint
** TTFB = 第一个字节的时间

运行上述测试后，以下是 Phil 发现性能最佳的设置:

Impreza 性能设置:全部启用.
Smush: 全部推荐 + CDN + WebP(仅限专业版的功能).此外，请确保在 Smush > 中启用了 WPBakery Page Builder 集成.集成菜单.这将粉碎使用 WPBakery 的页面构建器编辑器调整大小的自定义大小的图像.
蜂鸟:所有推荐 + CDN + 资产优化自动/快速.
缓存: Hummingbird Pro 或服务器端 FastCGI.
Impreza + WPMU DEV 托管 自己仍然开箱即用.PageSpeed Desktop 的 83/100 和 GTmetrix 的 A 级(92%；94%)令人印象深刻，但显然移动设备上的 27 分并不理想.
Impreza 的内置性能优化非常有效.它将 Google PageSpeed 得分提高到 90 年代，这对移动设备尤其重要.
Smush 似乎对性能得分没有太大影响，但它会减少显示图像的整体页面加载大小.
Hummingbird 缓存似乎与 FastCGI 服务器端缓存相当.
Hummingbird Pro CDN 似乎可以让服务器通过 FastCGI 缓存提供 CSS + JS.

以下是 Phil 在运行测试后提供的一些其他有价值的见解:

"完全破坏这些分数的第一件事是 Google 的 reCAPTCHA javascript."
"老实说，我对带有 FastCGI 服务器端缓存的主题 + WPMU DEV 托管的表现感到惊讶.在没有额外插件的情况下，PageSpeed Insights 上 0.224 秒和 92/98 的 TTFB 令人印象深刻.通过提供超级优化的图像文件，Smush Pro 是一个额外的优化层.Hummingbird Pro 可以放松一下，不必担心服务缓存.相反，它可以专注于设置我们所有的到期标头、监控正常运行时间以及从 CDN 提供 CSS/JS."

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

让 Impreza 的性能更加出色Imprezive

用菲尔自己的话来说:

"过去使用过许多排名靠前的多用途主题(Avada、Enfold、Etalon、Extra、Jupiter、Salient 等)，我从未在构建现代、简约、高效和高性能的网站方面取得如此大的成功就像我对 Impreza 所做的那样.为周到的设计、广泛的可定制性和荒谬的性能交换预先构建的模板和演示库对我来说是值得的.

看，结果不会说谎:在 GTmetrix 上没有一个测试从 A 级中掉线."