重庆网站制作

使用elementor和imageengine创建漂亮的wordpress页面和优化的图像

WordPress支持近40%的网站，这多亏了它让所有人都可以免费发布内容的承诺。与高级插件和主题相结合，它可能是构建吸引人的、独特的、功能丰富的网站的终极工具，无需任何编码或设计经验。

然而，你确实为这种体验付出了代价，WordPress和它的第三方产品并不总是为了性能而构建——无论是页面加载时间还是SEO。

图像优化是一个特别大的问题。图片是影响页面权重最大的因素之一，而且每年都在显著增长。所以，虽然图片对美化你的网站页面至关重要，但它们也是减慢速度的最大因素之一。

在图像优化方面，WordPress+Elementor带来的东西很少。WordPress核心现在提供了响应式语法和延迟加载。Elementor本身也只有现成的响应式语法。然而，这些都是图像优化的基本技术，只会带来最小限度的改进。

这意味着，虽然Elementor可以很容易地设计漂亮的WordPress页面(使用大量创造性利用的图片)，但在性能方面，你可能要付出代价。但是别担心。我们将向您展示如何显著提高web性能超过30分的评分工具，如谷歌的PageSpeed Insight。

为什么用ImageEngine优化你的元素图像?

通常，图像cdn使用各种技术使图像有效负载尽可能小，并更快地提供图像内容，同时最小化视觉影响。ImageEngine在这方面没有什么不同。

首先，ImageEngine，当在自动模式下使用时，将应用以下web性能工具推荐的所有优化，如谷歌的PageSpeed Insight。例如:

适当大小的图像- ImageEngine会根据用户设备的屏幕大小自动调整图像的大小与质量的比例。ImageEngine支持Retina设备。

有效编码图像-应用不同的压缩率取决于用户设备的PPI。例如，ImageEngine可以在PPI更高的设备上更积极地进行压缩，而不会失去视觉质量。

下一代格式转换-自动转换图像到最佳的下一代格式根据浏览器，设备，或操作系统。ImageEngine可以将图像转换为WebP或JPEG-2000以及gif转换为MP4或WebP。AVIF也可采用手动指令模式。

带不必要的元数据

虽然这些特性是大多数图像cdn的标准特性，但ImageEngine对于WURFL设备检测的使用是独特的。这使ImageEngine能够更深入地了解访问网站页面的用户设备及其图像。通过使用屏幕大小、分辨率、PPI等，ImageEngine可以做出更智能的决定，即如何在保持视觉质量的同时减少图像负载。

这就是ImageEngine标榜自己为“智能的、设备感知的”图像CDN的原因，也是它可以减少图像负载多达80%(如果不是更多的话)的原因。

ImageEngine还提供了专有的CDN服务来加速图像传输。CDN由20个全局定位的pop组成，带有内置的设备感知逻辑。这允许你在不同的区域交付图像内容更快，同时也提供图像直接从缓存与~98%的命中率。

ImageEngine还支持Chrome的保存数据设置。如果有人有一个较慢的连接或已激活此设置，ImageEngine将自动压缩图像负载更多，以在较慢的连接上提供更好的用户体验。

如何使用ImageEngine与WordPress和Elementor

如果你正在使用WordPress和Elementor，那么你可能希望尽可能少地花时间在开发和其他技术上。幸运的是，ImageEngine是一个高度简化的工具，它几乎不需要任何努力就可以与WordPress站点集成或维护。

假设你已经有一个使用Elementor的WordPress网站，以下是使用ImageEngine的一步一步的说明:

去ImageEngine。注册一个30天的免费试用。

为ImageEngine提供你想要优化的网站的URL。

创建一个帐户(或注册你现有的谷歌，GitHub，或ScientiaMobile帐户)。

为ImageEngine提供提供图像的当前来源。如果你像往常一样上传图片到你的WordPress网站，那就意味着你要再次提供你的WordPress网站地址。

最后，ImageEngine将为您生成一个ImageEngine交付地址，优化后的图像将在此提供服务。这通常采取的形式是:{randomstring}.cdn. imeng .in。您可以从仪表板上将送货地址更改为更有意义的地址。

现在，要在你的WordPress网站上设置ImageEngine:

转到WordPress仪表盘，转到插件->添加新。

通过ImageEngine搜索“Image CDN”插件。当你找到它，安装并激活插件。

进入设置->镜像CDN。这是ImageEngine插件仪表板。要配置它，你需要做的就是:

a.复制你从ImageEngine上面得到的收货地址，并将其粘贴到“收货地址”字段。

b.勾选“启用ImageEngine”框。

这是字面上的。你在WordPress/ element页面上使用的所有图片现在应该通过已经优化的ImageEngine CDN提供服务。

ImageEngine很大程度上是一个“设置后就忘记”的工具。它将在自动模式下提供最佳结果，无需用户输入。但是，您可以从仪表板覆盖ImageEngine的一些设置，或者通过使用URL指令来操作图像。

例如，你可以调整图像的宽度为300px，并通过改变src属性将其转换为WebP:

但是，只有在必要时才使用它，因为这样做会限制ImageEngine在不同条件下的适应性。

你能期待什么样的改善?

让我们看看使用图像CDN来改善页面加载时间能得到什么结果。

为此，我使用Elementor主题创建了两个相同的WordPress页面。一个页面完全依赖于WordPress和Elementor，而另一个页面我安装并设置了ImageEngine。这个页面有一些图库和全尺寸图片:

这些页面使用了许多高质量的图像，你可能会在专业摄影画廊、摄影博客、库存照片网站、大型电子商务网站等上找到这些图像。然后，我使用Chrome内置的Lighthouse审计工具运行页面性能测试，选择代表每个页面平均结果的分数。

为了更彻底，我测试了手机和桌面的性能。然而，我关注的是移动结果，因为这些展示了更多的图像CDN的响应能力。移动流量也占据了互联网流量的大部分份额，似乎是搜索引擎未来的重点。

那么，首先，让我们看看没有ImageEngine的页面的移动分数:

正如你所看到的，交付大量的图像内容肯定是一场斗争。谷歌显示，53%的手机用户放弃加载时间超过3秒的页面。因此，很明显，当涉及到用户体验和保持流量时，这个页面有主要的关注点。

桌面版的表现要好得多，但仍有很多不足之处:

在深入研究放缓背后的原因时，我们可以发现以下问题:

大多数问题都与图片的大小和重量有关。如您所见，Lighthouse标识了3.8 MB的有效负载，而整个页面的总图像有效负载接近40 MB。

现在，让我们先看看ImageEngine可以通过移动端分数来改善这些问题:

所以，正如你所看到的，比起标准的WordPress/Elementor页面有了30个点的重大改进。加载图像的时间在关键的核心web关键指标上减少了大约80%，如FCP, LCP和整体速度指数。

事实上，我们刚刚到达FCP的关键3个里程碑(当它最初加载时，页面可见区域上最大的元素)，这创造了页面已经完成加载的印象，并将帮助你保留大量的移动流量。

台式机的得分也高得多，并且在关键性能指标上有进一步的改进。

如果我们看到性能问题仍然存在，我们会发现图像几乎完全不受关注。我们还设法将初始3.8 MB的有效载荷降低到大约1.46 MB，减少了62%:

使用WordPress和WordPress插件的一个不幸的副作用是，由于所有额外的JavaScript和CSS，你几乎不可避免地会面临性能的打击。这就是为什么我们没有看到更大的改进的部分原因。这就是你为方便使用这些工具所付出的代价。

也就是说，页面上的图片越多，图片的尺寸越大，改进的效果就越显著。

同样值得注意的是，如果快速向下滚动页面，惰性加载的图像在ImageEngine中加载的速度会显著加快，这再次改善了用户体验。

由于它的智能图像压缩，在图像质量上也没有明显的损失，从这个对比中可以看到:

结论

因此，正如你所看到的，我们可以通过使用ImageEngine图像CDN在图像较多的网站上实现显著的性能改进，尽管使用CMS存在固有的性能问题。这将转化为更快乐的用户，更好的搜索引擎排名，和一个整体上更成功的网站。

最重要的是，ImageEngine忠实于WordPress的关键原则。你不用担心任何内部的细节和螺栓。而且，ImageEngine会根据需要自动调整自动化策略，防止您为了优化而偶尔返工图像。