建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

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

GG网络技术分享 2025-03-18 16:08 1


Impreza 是一个流行的基于 WPBakery 的主题,具有自己的风格。 在这篇文章中,一位 WPMU DEV 成员分享了如何优化这个多功能 WordPress 主题以实现最高速度和最佳性能。

正如 WPMU DEV 成员、网络开发人员和加拿大网页设计公司 CapitalWebDesign.ca 的所有者 Phil Martin 最近与我们分享的那样,“现在人们对优化基于 WPBakery 的主题很感兴趣,所以我想我会提供我最近使用的由 WPBakery 驱动的主题 Impreza 的 2 美分。”

WordPress翼豹主题
Impreza 是一个使用 WPBakery 的多功能 WordPress 主题。

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

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

WordPress 翼豹主题概述

Impreza 是使用 WPBakery 的高级 WordPress 主题。 它由 UpSolution 开发和维护,目前可从 ThemeForest 获得,它是他们最畅销的主题之一,迄今为止销量超过 88K,并且来自超过 2400 条用户评论的 4.89/5 星评级。

ThemeForest 上最畅销的 WordPress 主题
Impreza 是 ThemeForest 上最畅销的 WordPress 主题之一。

该主题的许可证通常售价 59 美元(但偶尔会以 39 美元的价格出售),并附带 6 个月的支持。

正如 Phil 所说:“他们平均每个月都会推送重大更新。 说真的,看看这个更新日志,试着说服我这不是你很久以来见过的最好的更新日志布局/样式。”

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

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

以下是菲尔的测试结果:

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

从上面可以看出,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 主题 - 性能结果。
你不需要像Phil 那样的加拿大人来获得所有的“A”——只需安装Smush 和Hummingbird……WPMU DEV 的“moose't-have”优化插件。

所以你有它!

Impreza 不仅是由 WPBakery 页面构建器提供支持的快速加载 WordPress 多用途主题,而且可以使用 Smush 和 Hummingbird 优化插件以及启用 CDN 和 FastCGI 等服务器端托管功能来提高其性能。

要访问我们的整套 Pro 插件、超快速的托管 WordPress 托管以及对 WordPress 的所有方面的专家 24×7 帮助和支持,请立即成为 WPMU DEV 成员,没有风险(我们提供 100% 退款保证)。

贡献者

本文是与以下人员合作编写的:

首都网页设计 - 渥太华网页设计

菲尔·马丁 – 资本网页设计。 菲尔利用他二十年的网页设计经验来实现一个目标:通过为加拿大首都的企业和非营利组织建立现代网站来回馈家乡!

***

注意:我们不接受来自外部来源的文章。 但是,WPMU DEV 成员可以通过 Blog XChange 为我们博客上的教程和文章提供想法和建议。

标签: WordPress op

提交需求或反馈

Demand feedback