图像压缩与站点加载速度浅谈

2018年12月05日 标签: 网站建设 网站速度

网站建设中,图像通常是负责缓慢页面加载时间的第一元素。通过选择正确的文件格式和图像压缩组合,您可以更快地使您的网站,现在看看如何做到这一点。图像通常可以提高网站的质量,而且它们是实施视觉营销策略的关键。但是,您的网站对媒体的影响越大,对您的加载时间的影响就越大。如果您的网站需要很长时间才能加载,它看起来多么令人惊叹并不重要,它会吓跑游客。

答案是压缩或优化您的图像,使它们变小,而不会失去任何质量。在本文中,我们将更多地讨论图像  压缩,它如何帮助您,以及使用数据来准确展示它在加载时间方面可以产生多大的差异。

什么是图像压缩

什么是图像压缩

图像压缩是优化网站加载时间的绝佳方式。简而言之,压缩图像涉及减小文件大小,因此占用的空间更少,有两种方法:“有损”和“无损”。前者可以极大地优化您的图像,同时可能会降低视觉质量,而后者只会尽可能地压缩您的文件,而不会影响它们的外观。

通常,您会想要进行无损优化。然而,有损技术的差异并不一定是肉眼可见的。让我们看看左边的原始图像和右边的优化版本的示例:

如果你放大得足够近,你应该能够发现一些差异。但是,由于我们没有以全分辨率显示任何一个图像,因此差异很难得出。考虑到许多网站的空间限制,当压缩的500KB版本同样合适时,没有理由上传高质量的5MB图像。

无论如何,图像优化的主要好处是易于理解。图形占用的存储空间越小,页面越轻。这意味着用户可以更快地加载您的网站,这应该会对其可用性和“粘性”产生直接影响。考虑到这一点,让我们看一下影响图像压缩对普通网站的性能有多大影响。

图像压缩会影响网站加载速度

图像压缩会影响网站加载速度

没有两个网站会有相同的加载时间,因为它们都是独一无二的。简而言之,此测试的目的是确定(平均)影响图像优化对加载时间的影响程度。为此,我们建立了一个包含三个单独页面的网站,使用Rare构建  。第一页包含  主页组合 布局,我们将其设置为包含十个图像:

这些图像都没有被优化,总共页面重1.7MB。我们在此测试网站上也没有任何活动插件,以避免任何可能影响我们结果的元素。设置完所有内容后,我们使用Pingdom Tools的  San Jose,California服务器测试了此页面加载的时间  :

稍后,我们将向您展示我们的测试结果。目前,我们将设置一个额外的Divi测试页面,因此我们有更多数据来备份我们的结果。对于我们的第二次参赛,我们选择了  Masonry Blog 布局,因为它为我们提供了一个精美展示几个特色图像的机会(在本例中为七个):

这个页面的重量为1.3MB,与我们之前的例子一样,具有相同的未优化图像集 - 只是使用不同的布局:

现在,我们将创建两个页面的碳副本,并用优化版本替换它们的图像。为此,我们将分别使用两个不同的图像优化插件压缩JPEG和PNG图像  以及  WP Smush。这里有大量的信息需要解压缩,所以让我们来谈谈这些数字的含义。

结果告诉了什么

结果告诉了什么

根据我们的结果,图像优化  确实 对网站加载时间有重大影响。更具体地说,我们的测试发现,如果您优化网站上的每个图像,您可以预期加载时间至少会提高10%。有些人可能会认为10%不足以证明压缩网站上每个图像的麻烦。但是,有很多方法可以在WordPress中自动执行该过程。如果你没有这样做,你基本上会说“不”以获得更好的表现。

更重要的是,图像优化只是您应在网站制作上实施的许多调整之一,以缩短加载时间。例如,可以考虑缓存,GZIP压缩,使用优化良好的主题以及许多其他方面。如果你实施所有这些,你的网站应该非常快!最后,值得注意的是,10%是我们得分结果的低端。您的收益将取决于您的网页平均包含的图片数量,以及您使用的压缩工具。很有可能,您的装载时间可能会进一步提高。但是,在您亲自尝试之前,您不会发现它。

结论

优化图像是减少网站加载时间的众多方法之一。但是,通常很难想象它对整体性能的影响有多大。无论如何,WordPress提供了大量可用于优化图像的工具。如果您愿意,您甚至可以自动执行该过程,因此没有理由避免它。

在我们的测试中,我们发现在大多数情况下,图像压缩可将加载时间提高10%左右。不过,这是规模的低端。在测试期间,我们看到了更好的结果,一直到24.29%的性能提升。您自己的结果很大程度上取决于您的网页平均包含的图片数量以及您使用的优化工具。

» 本文链接地址:https://www.ccxcn.com/knowledge/3980.html » 转载请注明出处,谢谢。