如何使用我们的 Smush 和 Hummingbird 插件免费优化 Elementor

Elementor 对 WordPress 社区并不陌生,因为它是最好和最受欢迎的社区之一页面构建器在那里.为了在优化方面做得更好,您可以借助我们的免费插件 Smush 和 Hummingbird 进行大量增强.

由于多种因素(包括大图像、缓存、CDN 等),使用 Elementor 构建的 WordPress 网站有时会出现不必要的缓慢页面加载.

幸运的是,借助 Smush 和 Hummingbird,您可以帮助缓解任何减速情况,并使您的网站充分发挥其潜力.

我们将通过一些示例来了解 Smush 和 Hummingbird 可以做些什么来增强您的 Elementor 网站.另外,我们将看到它们的一些示例,它们具有两个流行的主题:Hello Elementor Astra.

我们还将提供一些一般性提示,以确保您的 Elementor 网站与时俱进.

在本文中,我们将介绍:

在本文结束时,您将拥有所有工具和专业知识,可让您的 Elementor 网站优化以获得最佳性能.

我们将向您展示我们如何仅使用 Smush 和 Hummingbird 将 Elementor 网站的 PageSpeed 得分从 80/100, 提升到 99/100……所以继续阅读.

首先,我们假设您有 Elementor(如果您没有-获取它在这里免费).另外,如果您还没有,请下载 Smush蜂鸟.

如何使用 Smush 优化 Elementor

与 Elementor 一样,Smush 对 WordPress 社区也不陌生.作为屡获殊荣的 5 星级免费图片优化器插件,迄今为止拥有超过一百万的活跃用户.

Image of Smush.
Smush 在这些部分非常流行.

她与 Elementor 合作良好,以确保您的图片优化达到最高标准,并且您的网站速度很快.

我们将看看她的一些很棒的功能,这些功能与 Elementor 和您正在使用的任何主题配合使用.它们包括:

批量处理所有元素图像

根据您构建的 Elementor 网站,您的网站上可能已经安装了大量图像.

幸运的是,Bulk Smush 功能可以通过点击 Smush 的仪表板来解决这个问题.

Button to bulk smash.
如您所见,本例中有51个附件需要重新-smushing.

完成后,Smush 会通知您.

Message when bulk smush is complete.
一切都被搞砸了!

使用 Smush,您还可以排除特定图像(例如缩略图).

这是使用 Elementor 快速优化图像的完美方式.

此处了解有关批量清除的更多详细信息.

自动压缩新上传

每当您向 Elementor 添加新图像时,它都可以一键自动压缩.

在 Smush 的仪表板中,您可以快速开启此选项.

Automatic compress button.
单击按钮自动压缩新图像.

仅此而已!您的所有新图片都将被压缩.

双倍压缩的超级粉碎

想要在 Elementor 中将图像压缩提升一个档次吗? Super-Smush 可以提供高达常规 smushing 两倍的压缩.它通过去除每一盎司不需要的数据来做到这一点.

最好的是,它是有损压缩,所以质量有一些非常小的下降.在大多数情况下,它对人眼来说非常小且不易察觉.

与 Smush 的大多数操作一样,您可以通过管理员一键完成此操作.

Super-Smush 已准备好用于您的所有 Elementor 图像.

检查一下,看看您是否注意到图像质量有所不同.我们猜你不会.

使用 Smush 的图像调整大小添加更大的图像

当您上传高度或宽度大于 2560 像素的图片时,WordPress 会自动缩小图片,以便生成针对网络优化的最大图片尺寸.

如果您想将更大的图像添加到您的媒体库中,您可以使用 Smush 的图像调整大小来覆盖它.

Where you activate image resizing.
您只需单击一下即可调整图像大小.

点击后,您可以选择新的最大图片尺寸.

Image resize sizes.
输入您喜欢的任何新尺寸.

您还可以选择是否在 Bulk Smush 中包含全尺寸图像.

Where you smush original full size images.
单击这些选项以粉碎原始全尺寸图像并存储您的小原件的副本.

您可以使用图像调整大小来控制全尺寸图像.

将您的 PNG 转换为 JPEG

根据您使用的 Elementor 页面构建器模板,您可能会发现使用这两种文件类型中的一种比另一种效果更好.话虽如此,在速度方面,通常使用 JPEG 而不是 PNG 应该是一个很好的增强.

Smush 会为您检查将它们转换为 JPEG 是否会减小文件大小并帮助加快您的 Elementor 网站的速度.

Where you auto-convert PNGs to JPEGs
自动将 PNG 转换为 JPEG,如果它导致较小的文件大小.

自动转换您的 PNG 文件再简单不过了.

从媒体库中提取

您可以选择从媒体库中选择单个图像进行压缩.

激活 Smush 后,您会看到一个名为 Smush 的新列.它将向您显示优化了哪些图像.如果不是,您可以点击 Smush 并一键优化.

你想要的一切都触手可及.

在 Elementor 中延迟加载您的图像以提高速度

您的页面可能包含大量图像.有时,同时显示它们会给服务器带来压力.

使用延迟加载,它会停止加载屏幕外图像,直到用户滚动到它们为止.这使您的页面加载速度更快,使用的带宽更少,并通过 Google PageSpeed 测试修复了"延迟屏幕外图像"建议.

Where you activate lazy load.
您可以选择哪些媒体类型并将延迟加载细化到特定媒体输出.

您可以使用延迟加载做很多事情,包括您希望预加载图像的显示方式、动画选择以及图像显示出现之前的持续时间.

您可以在这篇文章中阅读有关延迟加载的更多信息.

利用 Smush 的 CDN

当您靠近提供内容的服务器时,它会加载得更快.这就是 CDN(内容交付网络)所做的.它是一系列遍布全球的服务器,因此当浏览器发出 HTTP 请求时,内容会从最近的服务器提供到其位置.

此功能可用于 Smush Pro,非常值得使用.它拥有一个 45 点的 CDN.此外,它还可以自动调整您的图片大小并将其转换为 Google 的 WebP 格式.

The smush CDN.
点击"开始使用"将启动 CDN.

CDN 将通过存储和提供来自 Smush 边缘服务器的所有 JPG、PNG 和 Gif 图像的副本来提高任何图像密集型 Elementor 网站的页面速度.

对于高级选项,Smush Pro 的 CDN 包括提供背景图像、自动调整大小、WebP 转换以及从 WordPress 中的 REST API 请求转换图像. >

此处获取更多详细信息 Smush 的 CDN.

如何使用 Hummingbird 优化 Elementor

Hummingbird 和 Elementor 在制作方面组成了一个伟大的团队您的网站更快.她通过使用文件压缩微调控件来帮助优化您网站的性能,缩小 CSS 和JS、评论延迟加载等等.

Hummingbird image.
蜂鸟在这里帮助您加快您的 Elementor 网站!

她是一个 4.5 星级的免费插件,在 wp.org 上的活跃安装量超过 10 万(而且还在增加!).

通过快速扫描您的 Elementor 网站,她将提供一键式修复,帮助您轻松加快网站速度.

我们将详细介绍她为改进您的 Elementor 网站并使其飞速发展所能做的所有细节.一起来看看:

通过性能测试评估您的网站

立即,Hummingbird 允许您运行性能测试以查看您的 Elementor 站点的情况.您可以通过点击运行测试一键开始.

Performance report.
您只需点击一下即可获得效果报告.

运行测试后,Hummingbird 会向您显示机会诊断通过的审计.此外,您还可以查看桌面移动的结果.

只需在桌面和移动设备之间点击即可.

下面列出了所有详细信息.它始于机会.这些是提高页面加载速度的建议.

Opportunities in Hummingbird.
如您所见,还指出了潜在的节省.

接下来是诊断.这提供了有关您的网页如何遵循网络开发最佳实践的更多信息.

The diagnostics area.
本次测试顺利通过.

最后,您可以查看所有通过的审核.它包括得分为 90 或更高的所有内容.此外,您可以点击每个类别的下拉菜单以了解更多信息.

Passed audits.
这次审核有很多 100.

性能测试是从一开始就评估您的 Elementor 网站的好方法,因此您可以立即看到可以改进的地方.

在我们关于优化 Hummingbird 的文章中阅读有关性能测试的更多信息.

通过缓存提供更快的页面和内容

如果您还没有听说过,缓存可以加快页面加载速度.Hummingbird 的优点在于她提供了多种类型的缓存,由于有多种页面选项,因此在将 Elementor 与您的 WordPress 主题一起使用时效果很好. >

她的缓存能力包括页面缓存浏览器缓存Gravatar 缓存RSS缓存.此外,如果您的网站是通过我们托管,您的网站速度将通过对象缓存Redis 对象缓存进一步提高静态服务器缓存.

Hummingbird dashboard.
蜂鸟正在帮助您快速上手.

您将控制其缓存功能的各个方面.这使得 Hummingbird 非常适合 Elementor,因为每个页面构建器都是不同的,并且包含的​​配置也会有所不同.

您可以查看所有功能并更详细地了解 Hummingbird 的缓存在我们的文档中.

Gzip 压缩可减少文件大小以加快服务速度

借助 Hummingbird 的 Gzip 压缩,您的 Elementor 页面可以通过将您网站的基于文本的资源压缩成更小、更紧凑的文件来加载用户的浏览器速度更快.

The gzip compression area.
如您所见,Gzip 对 HTML、JavaScript 有效, 和 CSS.

如果您不与我们托管,您可以更改 Gzip 压缩以适合您的服务器类型(例如 Apache)并按照说明将其激活.

通过资产优化提升页面速度

Hummingbird 的资产优化区域是您在优化 Elementor 网站时可以轻松自动化或手动配置高级选项的地方.

Asset optimization area.
如您所见,它显示我的压缩节省为 9.7 %.

您可以在两种模式下使用资产优化:

自动:根据 Hummingbird 的自动选项优化您的资产并缩短页面加载时间.

手动:自己手动设置每个文件,以实现 Elementor 网站所需的准确设置.

激活资产优化后,Hummingbird 会立即扫描您的 WordPress 网站的资产,以指出可以优化性能的资产.

蜂鸟的资产优化可以进行很多调整和调整.请务必阅读我们的文档,了解如何进行微调才能使您的网站获得最大优化.

增强两个顶级 WordPress 主题的示例-Hello Elementor & Astra — 与 Smush、Hummingbird 和 Elementor 合作

既然我们已经大致了解了 Smush 和 Hummingbird 可以做什么来增强您的 Elementor 网站的性能,让我们使用两个流行的 Elementor 主题:Hello ElementorAstra.

如前所述,我们将使用 Elementor 的免费版本,因此初始设置不涉及任何费用(同样,Smush 和 Hummingbird 也是免费的).

这是一个新网站,除了 Elementor 和主题外,一开始没有安装其他页面、插件或任何东西.

我们将介绍添加所有这些功能以及它们所带来的不同.将其全部分解,我们将这样做:

请记住,每个网站都会有所不同.位置、图像数量、您的主机和其他因素会产生影响.但是,这应该让您大致了解可以做什么,然后您可以在基于 Elementor 的 WordPress 网站上对其进行相应调整.

你好元素

首先,我们将从 Hello Elementor 开始 主题.这个免费主题是 Elementor 用户的最爱,由 Elementor 创建,所以你知道它很好.

Hello Elementor theme.
Hello Elementor 是 Elementor 流行的高评价主题用户.

我们已经建立了一个使用此主题的网站,并已激活登陆页面 – 酒店页面 来自 Elementor 的图书馆.这个主题包含少量图片和文字,是一个很好的例子.

Elementor page building themes.
您可以直接从您的库中激活此登录页面WordPress 仪表板.

我还将此页面设为了我的主页.您可以通过转到外观>来确保完成此操作.自定义 >首页设置并选择此着陆页.

既然已经安装了,我们就可以开始了!让我们在这个网站上做一个快速的速度测试.我们将从 Google PageSpeed Insights 开始.

输入 URL 时,这是我们的 Google PageSpeed Insights 分数:

Google page speed test.
如您所见,它处于中间范围.

现在让我们使用 GTmetrix 来检查一下.

我会注意到,我使用的是 GTmetrix 的服务器位置(加拿大温哥华)和浏览器(Chrome)的默认设置.在所有这些示例中,这一点都不会改变.

GTmetrix score.
‘E’?哎呀.

让我们继续激活 Smush 和 Hummingbird,看看我们想出了什么.

我将首先与 Hummingbird 进行性能测试,并查看她的建议.

一旦这样做,她提到我们的得分为 56/100,并提供了多种机会,例如预加载关键请求、消除渲染阻塞资源、减少初始服务器响应时间以及删除未使用的 CSS.

此外,她的诊断表明我们应该确保在 webfont 加载期间文本保持可见.

它还显示有 15 个通过审核 (yippee!).

Hummingbird's performance test.
蜂鸟为我们提供了一些建议.

我会继续处理所有可能的建议.Hummingbird 中的下拉菜单准确地提到了如何处理推荐.

例如,此处 Hummingbird 展示了如何删除未使用的 CSS.

Removing unnecessary CSS.
已为您写出如何修复.

我还激活了 Hummingbird 的页面缓存以帮助缩短初始服务器响应时间、优化我的资产并结合 &压缩资产.

接下来,我将继续激活 Smush.

Smush 马上指出我有 61 个图像和附件需要清理,这可以帮助我节省大约 815.5 kb.我将一键批量处理这些.

The bulk smushing button.
点击即可批量粉碎.

片刻之后,结果如下:

The new numbers from bulk smushing.
不错!

如您所见,总共节省了 872.5 kb/9.3%.

现在,让我们继续检查我们的页面速度.

首先,这是 Google PageSpeed Insights:

Google pagespeed insights score.
99 在我们的书中是可以的.

这里是 GTmetrix:

GTmetrix score of 99.
这里也很不错!

尽管我对这个分数很满意并且没有比这更好的了,但我会进一步提高成绩.

我将继续在 Hummingbird 的资产优化部分启用我们的 CDN.无论您是托管还是其他公司,您都可以启用此功能以进行额外优化.

一键开启CDN.

有关 CDN 的更多信息以及为什么它对网站速度有益,请务必查看这篇文章.

此外,为了确保我拥有最佳速度,我将在 The Hub 中的 Tools 下打开 Static Server Cache strong> 使用 FastCGI.

Where to activate fast CGI.
我们将其更改为"on"并进入业务.

现在,通过所有这些调整,我使用 Hello Elementor 主题的 Elementor 网站已针对速度进行了优化!

现在让我们来看看使用 Elementor、Hummingbird 和 Smush 优化流行的 Astra 主题.

阿斯特拉

Astra 是另一个非常受欢迎的主题,与 Elementor 配合得很好.wp.​​org 拥有超过 100 万的活跃下载量和坚如磐石的 5 星评价,您知道它是许多 Elementor 用户的不错选择.

The Astra theme.
Astra 非常受欢迎——尤其是 Elementor.

与 Hello Elementor 一样,我们建立了一个使用此主题的网站并激活了 登录页面-酒店页面来自 Elementor 的图书馆.

此外,与之前一样,我将酒店页面设为我的主页.

让我们继续进行 Google PageSpeed Insight 速度测试,看看效果如何.

Google PageSpeed Insights score of 66.
哎哟……

我多次运行此测试并不断得到相同的结果.这确实是一个糟糕的分数.

让我们看看如何使用 GTmetrix.

GTmetrix score.
这个更好.

马上,在多次运行之后,它立即获得了"A",性能得分为 97%,结构得分为 95%.成绩相当不错!但是,正如我之前提到的,这会因图像数量、位置、主机和其他因素而异.

此外,如果您不知道,Google 和 GTmetrix 之间的分数差异如此巨大是有原因的,原因是它们的测试方式不同.有关它们在测试站点方面有何不同的更多信息,在 GTmetrix 的网站上查看这篇文章.

现在,让我们看看我们是否可以通过激活 Hummingbird 和 Smush 来提高在 Google 上的分数并将 GTmetrix 提升到 A+.

我们将从 Hummingbird 开始并运行性能测试.

Hummingbird performance test.
蜂鸟让这个网站以 80/100 作为性能得分.

如您所见,有两次改进机会和 17 次通过审核.

为了改进,Hummingbird 建议消除阻止渲染的资源删除未使用的 CSS.

Hummingbird opportunities.
您可以看到每条建议的潜在节省.

我们将提出 Hummingbird 的建议,然后继续使用 Smush.

对于 Smush,她马上告诉我们有 15 个项目需要批量 smush,所以我们会继续这样做.

Bulk smushing button.
批量粉碎和以往一样简单(而且很有趣!).

批量 smushing 结束后,我们将运行另一次 Google PageSpeed 测试(因为它的整流效果很差),看看我们的样子.

Google PageSpeed Insight score of 72.
最新的测试仍然不是那么好.

因为它没有上升太多,让我们再尝试一些调整.

Smush 会为您推荐有助于提高分数的内容.在此示例中,它们包括:

  • 为高级有损压缩启用 Super-Smush
  • 确保图像大小适合我们的主题 (Astra)
  • 启用调整全尺寸图片以将大图片缩小到合理的尺寸
Smush recommendations.
以下是 Smush 的建议.

既然我提出了 Smush 建议,让我们再看看.

Google pagespeed insight score of 86.
更高的分数! Yippee!

正如你所看到的,它上升了一点.我们还没有达到 90-100;然而,通过一些调整,比如打开 Hummingbird 的 CDN 和 FastCGI,我们应该能够达到那个高分.

在此之前,让我们看看我们如何使用 GTmetrix 进行评分.

Gtmetrix report showing a A rating.
仍然有一个很好的"A".

如您所见,这并没有太大变化.一开始就已经是不错的成绩了,还会有小幅波动.本质上是一样的(这很好).

最后,让我们把它推向高潮.

当打开 CDNFastCGI (参见 Hello Elementor 示例中的操作示例)时,我们的分数立即通过 Google 提高.

PageSpeed insight score of 90.
90 还不算太破.

我们或许可以在 Hummingbird 中进行一些微调,以最终获得更高的分数;然而,它在一个相当不错的地方.有了我们可以使用的所有工具,它也应该保持这种状态——而不是丢弃.

加速 Elementor 的一般提示

除了使用 Smush 和 Hummingbird,在加速 Elementor 方面,您还可以遵循一些基本技巧.

要记住的事情包括:

牢记这些提示,以确保您的 WordPress Elementor 网站得到优化以发挥其全部潜力.

Elementor 优化变得容易

毕竟我们在本文中介绍过,您的 Elementor WordPress 网站在性能、优化、托管及其所有功能方面应该处于良好状态.正如您所见,在 Hummingbird 和 Smush 的帮助下很容易做到.

每个站点都需要进行单独的调整和调整,但这只是将其微调至完美的问题.添加一些良好的托管,您将能够拥有一个令人惊叹的 Elementor 网站.

如何使用我们的 Smush 和 Hummingbird 插件免费加速和优化 Avada

Avada 已经是最受欢迎的高级 WordPress 主题之一.我们将通过我们的免费优化工具对其进行增强,使其变得更好-Smush蜂鸟.

使用 Avada 构建的 WordPress 网站遇到页面加载速度变慢的情况并不少见.发生这种情况的原因有很多,包括数据量大的图像、缺乏缓存、CDN 质量以及其他有形物品的"主机".(双关语.)

这是我们的两个优化插件的亮点.Smush Hummingbird 可以对让(并保持)您的网站以最佳速度运行产生重大影响.

通过全新的 Avada 安装,我们将调整一些设置并运行一些测试,以了解 Smush 和 Hummingbird 在 Avada 主题网站上的(加载时间)差异.

我们还将提供一些额外的建议,以提高 Avada 在您网站上的整体速度.

我们完成后,您将拥有丰富的知识和资源,让您的 Avada 网站快速运行.

随意跳到文章的任何部分:

继续阅读以了解我们的流程和可衡量的结果.

Avada 主题测试设置

Avada website builder.
"Avada 是 WordPress 主题的瑞士军刀." – Envato 首席执行官 Collis Ta'eed

阿瓦达.是.到处.它拥有超过 600 万用户,是 ThemeForest 上销量第一的 WordPress 主题.

您是否想为您的网站使用这个流行的主题构建器,但担心经常发生的加载延迟?我们去过那里,可以告诉你有一个简单的——而且免费的! ― 在改进方面取得长足进步的方法.

让我们看看我们将采取哪些措施来实现这一目标.

程序

注意:我们在下面指出了哪些步骤不涉及成本和一些成本.

  1. 安装 Avada Theme Builder &干净的 WP 网站上的主题(需要 Avada 主题许可证.)
  2. 调整 Avada 优化设置(免费)
  3. 安装 Smush;优化设置(免费)
  4. 安装蜂鸟;优化设置(免费)
  5. 在 Hummingbird 中打开 CDN(需要 Hummingbird Pro)
  6. 在集线器中打开 FastCGI(通过 WPMU DEV 托管)
  7. 在上述每个步骤之后运行速度测试(免费)
  8. 使用不同的 Avada 主题再次重复整个过程(如果您已经购买了 Avada 主题许可证,则无需付费.)

参数

  • 我们将使用一个干净的基础,也就是说,我们的网站将建立在全新的 WordPress 安装上.
  • 初始安装后主题配置和选项将保持静态.
  • 我的托管是青铜计划,通过 WPMU DEV 托管 WordPress 托管.
  • 我所在的地区是美国/东部.
  • 插件仅适用于 Smush 和 Hummingbird.
    (如果您使用我们的托管服务,您将看到 WPMU DEV Dashboard 插件,因为它会自动安装在我们托管的网站上.)
  • GTmetrix 速度测试使用其默认服务器位置(加拿大温哥华)和默认浏览器(Chrome 桌面)完成.

详情

由 WPMU DEV 托管的站点将安装 Smush & 专业版蜂鸟.为了镜像插件的非专业版本,我在禁用 Pro 功能的情况下进行了所有初始测试.

蜂鸟优化在网站上使用 不同类型的缓存和压缩功能.页面GravatarRSS 缓存被禁用.大多数主机,包括 WPMU DEV,通常默认打开浏览器缓存和 GZip 压缩.由于我们无法在不影响其他设置的情况下关闭这些功能,因此在我们的测试期间它们将保持开启状态.

最后, 正如我们在其他优化文章中提到的,请注意,由于每个元素固有的变量,没有人会得到完全相同的结果.您的地理区域、媒体库的大小、您的托管服务提供商,所有这些都使用非常不同的笔触来绘制图片的一部分.但无论您的特定站点环境如何,您都一定会看到此过程的显着改进.

好的,让我们开始吧.

使用 Smush & 达到峰值速度蜂鸟与 Avada

为了准备这个过程,让我们让我们的工具包匹配,就像图片日的姐妹一样.(只有我妈妈和我们一起做吗?)如果您还没有,请下载Avada 网站建设者.您还需要 Smush & Hummingbird 插件(两者都是免费的),但我们稍后会添加.

对于我们的速度测量工具,我们将使用Google PageSpeed Insights GTmetrix,因此您可能想立即打开这两个站点.

确保您开始使用新的 WP 网站,没有创建新页面或帖子,也没有激活可选插件或附加组件.

接下来,安装 Avada 网站构建器.还需要两个额外的 Avada 插件-CoreBuilder -,因此我们将继续安装它们.

Avada Core & Builder plugins.
必须安装 Avada 的 Core 和 Builder 插件才能使用主题建设者.

主题 1 ― Avada Spa

是时候进行我们实际的主题选择了.对于第一次测试,我们将使用 Avada Spa.它不需要任何额外的插件,但有相当数量的图像,所以它似乎是一个不错的尝试.它隐藏在 Avada 仪表板中的预建库中,只需点击几下即可安装.

Avada Spa import screen.
在主题安装期间仅选择要导入的内容.

安装并应用我们的主题后,在开始调整或添加任何内容之前,我们应该获得速度的初始快照.

GPSI 74
GPSI 为我们提供了一个公平到中等的分数.
GTM C-67-95
GTM 在我们的初始速度测试中与 Google 相当.

两个分数都在"7Os"或"C"范围内.我们绝对可以做得更好.

我想查看 Avada 的内置优化设置,在那里进行一些调整,看看我们是否能提高页面速度.

Avada built in Optimizer screen
Avada 内置优化菜单的片段.

选项/性能菜单标签中,以下是我所做的更改:

性能

  • 图片延迟加载>>从Avada
  • 字体渲染 >>从阻止全部交换
  • 预加载关键字体>>从图标字体全部
  • 在页脚中加载样式表 >>从

动态 CSS & JS

  • 异步加载媒体查询文件 >>从

保存所有更改后,我们将检查速度.

GPSI 77
双七,所以我们点了一点.
GTM C-71-85
每个 GTM 稍微清洗一下,性能会提高和结构下降.

让我们尝试我们的第一个优化插件,并激活 Smush.

Smush banner
Smush 是我们用户的选择,屡获殊荣,并经过基准测试图像优化器.

导航到 Smush 仪表板后,您应该会看到快速设置向导.这些设置包括:自动压缩EXIF 元数据全尺寸图像延迟加载使用数据.

以下是每个功能的作用:

  • 自动压缩― 将自动优化新上传的图片,因此您无需手动进行每一项操作.
  • EXIF 元数据 ― 将从您的图像中去除相机设置,帮助减小文件大小.(别担心;它不会剥离 SEO 元数据).
  • 全尺寸图像― 将压缩您的原始全尺寸图像.(注意:默认情况下,它会存储您原件的副本,以防您想恢复原件.)
  • 延迟加载 ― 将停止加载屏幕外图像,直到访问者滚动到它们为止.
  • 使用数据 ― 让我们的设计师深入了解哪些功能需要改进.(您的个人数据将被跟踪.)

继续浏览每个屏幕,保留默认设置.(允许使用数据将有助于插件未来版本的功能,但如果它至少让您感到不舒服,请不要使用它.)

Smush bulk smush now button
Smush 提出了最大化图像压缩的建议.

向导完成后,仪表板将反映可以使用压缩的图像数量.绿巨人粉碎 Bulk Smush Now 按钮!

我们的图像优化统计数据现在是什么样的,Mdm.糊涂?

Bulk Smush now
54 张图片被模糊处理,节省了 3.2 mb.像冠军一样捣蛋!

让我们看看这减轻了多少(页面)负载,然后再次进行速度测试.

GPSI 85
这是一个很好的跳跃!差不多十分.
GTM B-76-88
"B"一点一点,我们在向上的轨迹.

是时候把事情推向高潮了,让蜂鸟出现在现场.

Hummingbird banner
蜂鸟是让您的网站快速运行所需的一切.

安装并激活 Hummingbird 后,转到仪表板将激活另一个快速设置向导.这一次,她只会建议运行性能测试,这正是我们想要做的.

测试完成后,您会收到通知通知.

仪表板向我们显示了性能测试的分数.

Hummingbird performance test 83
83还不算太寒酸!我们已经在飞行,但我们还没有达到我们的最高高度.

Hummingbird 提供了在性能测试期间进行评级的各种指标和审核的列表和图表.

Hummingbird performance test 83 pie
Hummingbird 在 Lighthouse 报告的"性能"部分跟踪六个指标.

她还提供了称为审核的其他评分指标.这些单独的问题分为以下类别:机会、诊断、通过的审核——所有提高绩效得分的建议.

机会基本上是用颜色编码的警报.黄色表示轻度至中度问题,红色表示该问题严重影响性能.

在这次绩效评估中,Hummingbird 表示我有 3 个机会,其中至少有一个是高优先级(红色角形).

要解决这些机会,请点击任何提醒行,它会显示:

  • 问题的详细描述
  • 涉及的特定资产清单
  • 有关如何解决问题的分步说明
Hummingbird diagnostic opportunities what to do
您不必去挖掘说明页面或进行疯狂的谷歌搜索; Hummingbird 会为您解决任何标记的问题.

解决这些问题是个好主意,这就是我现在要做的.完成修复后,您可以继续下一步……资产优化.

从左侧菜单栏中,选择资产优化.点击自动,并确保快速滑块开启.

Hummingbird asset optimization auto speedy fix
将您的资产优化设置为 Speedy &自动提升性能.

请注意:当您处于自动模式时,Hummingbird 会自动检测新添加的插件和主题文件并为您优化它们,但不会从插件或主题中删除任何旧文件那被删除了.这是为了避免冲突和问题,以及为什么建议偶尔重新检查文件-以便一切保持同步.

好的,是时候进行一些速度测试了.

GPSI 91 theme 1
哇!这将我们推向了 90 年代.
GTM B-83-92
"B"保持我们不断上升的数字.

好成绩!我们还可以做的另一件事是……让我们打开 Hummingbird 中的 CDN .在同一个资产优化页面,将WPMU DEV CDN滑块移动到ON (它会变成蓝色).

让我们再次进行速度测试.

GPSI 94
热火朝天!我们已经达到了 94.
GTM B-85-87
高中时我希望这是我的 AP 历史成绩.

我们可以停在这里,成为非常快乐的露营者.但是,我将通过我的 WPMU DEV 托管调整设置,再增加一个日志.

通过 WPMU DEV 的托管中心开启 FastCGI.

是时候踩下踏板并获得一些新的考试成绩了.

GPSI 97
GPSI 97 分接近完美.
GTM A-92-96
是的!我们终于得到了我们的"A".

好吧,我对此非常兴奋.让我们通过安装不同的主题来继续进行第二轮测试.

主题 2 ― Avada Classic

对于我们的第二个测试环境,我们将使用 Avada Classic.它需要安装额外的 WooCommerce 插件,因此将添加一个可能影响页面加载速度的有趣元素.

在我们真正改变主题之前,让我们回滚到我们原来的测试环境.如果您有 WPMU DEV 的托管,请从集线器中关闭 FastCGI.在 Hummingbird 中,关闭 CDN 资产优化.然后停用蜂鸟和Smush 插件.

我们还需要通过选项/性能标签、全部重置将 Avada 性能优化恢复为默认设置.

再次从 Avada 仪表板中,让我们导航到预先构建的主题.确保选择为 Avada Spa 安装的所有组件;然后点击删除.该过程完成后,前往经典主题(这是第一个),然后安装/激活它.

Avada Classis theme
Avada 的经典主题需要极受欢迎的 WooCommerce 插件.

在进行任何更改或调整之前,让我们先获取初始速度测试分数.

GPSI 78
对我们的基线来说还不错.
GTM C-70-73
我"C"你,我会养你 20.(至少!)

好的,这很受人尊敬,但我们想要一流的.让我们再次调整一些 Avada 的内置设置.

我进行了与上次相同的优化,但增加了一个:Avada 的 PWA 插件(主要是缓存应用,正在 Google 开发中).安装并激活 PWA 后,我现在在 Options 下为 Progressive Web App 提供了一些选择.我将它打开,保持预先选择的设置不变,并保存更改.

PWA on with default settings
要在 Avada 中启用 PWA 设置,您必须首先安装其插件.

让我们看看这些调整对速度得分有多大影响......

GPSI 82
好吧,不是令人兴奋的上升,但仍然增加.
GTM C-75-89
这也是一个更高的分数——我们拿它!

借助我们的 Avada 优化,让我们重新激活 Smush.

您的 Smush 设置将保持我们上次的设置.因为我们的新主题向媒体库添加了新图片,所以我们需要让 Smush 来做她的事情.

您已经可以在她的仪表板中看到批量压缩带来的节省.我们不必用这个主题主动压缩添加到媒体库中的图像,因为我们之前已经告诉 Smush 在上传时自动压缩我们的图像.而这正是她所做的.

Smush bulk saving theme 2
Smush 值班,执行她预先指定的任务不需要提示.

好的,是时候进行另一轮速度测试了.

GPSI 87
针仍在攀升.
GTM B-82-89
仍然可以"B"更好,但我们要去在正确的方向.

在这一点上,比我们最初的主题还要好.当然,我们可以让它们更高.是时候让我们那双翅膀飞舞的朋友用她的存在给我们增光添彩了.重新激活 Hummingbird,并运行性能测试.

Hummingbird performance test 87
蜂鸟的 87 分很不错.

虽然我对她的分数很满意,但它并没有达到应有的水平.我看到她列出了三个机会,至少有一个是实质性的(红色代码).我将进入并解决她的建议,如果您有机会中指出的问题,我建议您也这样做.

Hummingbird diagnostic opportunities what to do
Hummingbird 的即时修复说明非常简单点击,阅读,做.

是时候进行速度测试了.

GPSI 91 theme 2
我们在上层……
GTM B-85-91
慢到爬行,但我们仍在向上移动.

通过我们的下一次调整,我们应该会看到这些标记上升得更多.

在 Hummingbird 中,转到资产优化/资产,然后单击重新检查文件按钮.在她检查时,再次将 CDN 设为 ON (从正在运行的弹出窗口中).她会告诉你找到了多少资产;点击"知道了"按钮.在她评分后,点击激活.

在我们进行速度测试之前,我想再运行一次 Hummingbird Performance 测试,看看我们做了所有这些优化后它的改进情况.

Hummingbird performance test 98
87 到 98!我认为这是一个巨大的改进.

让我们看看这是否提高了我们的速度得分.

GPSI 96
96 值得一个快乐的舞蹈!
GTM B-87-94
"B"仍然是我的心.性能正在提升.

我们可以收工,并对这些分数有很好的响应.但我要做最后一次飞跃,并从我的托管中心打开静态服务器缓存.

最后一次测试……调查显示??

GPSI 99
几乎完美.顺便说一句,有人能看到 99 却听不到 Toto 的声音吗?
GTM A-95-97
风扇嗡嗡声-smush-tastic!!

好的,这是我见过的最好的分数.我要做一个胜利圈!!在我被方格旗冲昏头脑之前,我只想分享一个关于继续测试的严肃想法.

如果我们继续随机测试,会有轻微的差异,因为没有一个元素是真正静态的.但是,通过我们进行的所有调整,您应该不会看到页面加载时间有任何显着下降.

Avada 整体速度提升的提示

这是一次令人大开眼界的体验.当与 Smush 和 Hummingbird 一起使用时,Avada 绝对可以加快速度.尽管我们对许多设置进行了微调,但在获得和保持网站的最佳速度时,您仍应始终考虑一些事项.

他们是:

最后一个真的可以改变白天和黑夜.确保您的托管服务提供商享有良好的声誉,并证明其快速可靠.(WPMU DEV 托管计划提供可靠、完全专用的 WordPress 站点托管,由 Digital Ocean 提供支持.)

关于适用于我们插件的 CDN 的快速说明:图像 CDN 的设置位于 Smush Pro,而网络对象设置位于 Hummingbird Pro.

快速&疯狂优化

您现在拥有了所有可用的工具.随着您网站的发展以及您不断添加内容和增加流量,您应该定期测试和重新评估您的优化设置.

如您所见, Smush Hummingbird 都是免费的、功能丰富的优化工具,可以提高您的速度.但无论您使用什么,请继续进行调整,以便您的页面加载永远不会对访问者或客户造成阻碍.

让 Avada 成为您自己的, 网站速度成为您的灵丹妙药.

3
订阅评论
提醒
0 评论
内联反馈
查看所有评论