图片拖慢网站速度的 6 个原因（以及如何修复它）

已发表: 2021-09-23

您是否想知道为什么图像在您的网站上加载缓慢，或者它们需要很长时间才能加载？您正在阅读正确的文章。让我们从两件重要的事情开始：图片占网站流量的很大一部分，因此优化图片有助于减少加载时间。同时，图像通常是性能问题的罪魁祸首：它们占用了加载资源，这就是它们降低 WordPress 网站速度的原因。

图像负责最多的 HTTP 请求 - 来源：Almanac.http 档案 — 图像负责最多数量的 HTTP 请求 - 来源：Almanac.http 档案

问题是，很难想象一个完全没有图像或图片的网站。使用 SEO 优化的图像甚至可以为您的网站带来更多流量。我们不能没有他们做生意！

在这篇博文中，我们概述了图片拖慢您网站速度的六个原因。此外，您还将了解如何让照片在您的网站（包括移动设备）上加载得更快。

为什么您的图像在 WordPress 上加载缓慢（或永远加载）

1. 图片太大（你可能用的太多）

当谈到网页速度时，你应该做的第一件事就是优化你的重图像。较大尺寸的高分辨率会占用大量带宽并减慢您网站上访问者的加载时间 - 那么为什么不以较小的尺寸上传它们呢？而且，不要让您的图像质量受到影响！使用可靠且有效的应用程序进行图像压缩。这将确保在您减小它们的尺寸时，它们仍然保持视觉保真度，而质量损失很小。

2. 图片有未指定的尺寸

适当缩放图像对于避免网站图像加载时间过长很重要。不要让浏览器代替你缩放图像——这会给它更多的数据来加载。换句话说，浏览器仍然会加载整个图像。如果您有一个 2000 x 2000 像素的图像，但您已将其缩小到 200 x 200 像素，您的浏览器将不得不加载十倍于所需的容量。

3.图片未根据设备进行优化

为防止图像加载缓慢，您的页面不应呈现大于用户屏幕上显示的版本的图像。简而言之，任何大于设备的东西都会导致浪费字节并减慢您的页面速度。

4. 浏览器一次开始加载图片

默认情况下，您的浏览器会尝试同时加载所有内容。如果您不优先考虑需要首先加载的图像，浏览器将忙于一次渲染它们。而是专注于需要在访问者的视口中加载的最重要的图像。

5.你使用繁重的格式

图片的大小只是问题的一部分。您使用的文件类型也会占用宝贵的空间。您是否使用 .TIFF 或 BMP 之类的格式？在这种情况下，请记住 TIFF 是一种未压缩格式，可以呈现更详细的图片并包含更多数据……这将创建更大的文件并最终占用大量存储空间。如果您不使用 .TIFF 而是使用 JPEG 和 PNG，您应该知道您可以使用更轻的格式，您将在下一节中找到。一个简单的转换可以给你的形象一点提升！

6.您的缓存不存储图像

缓存图像的主要好处是提高 WordPress 网站的性能。用户应该直接从他的系统中查看图像或 Javascript 和 CSS 文件，而不是等待它们通过网络连接下载。换句话说，您的图像应该缓存在一个临时的本地文件夹中，以避免对数据库进行不必要的 ping。

如何修复网站上加载缓慢的图像

图片对于内容策略至关重要，但我们不希望加载时间过长。关键是正确使用它们以避免减慢您的 WordPress 网站。让我们看看可用于改善 WordPress 网站上的图像加载的六种技术。

1.调整大小和压缩图像

如果您想加快图像速度，则应始终通过调整大小和压缩照片来优化照片。有损和无损压缩是优化网站以加快加载时间、最终加快页面加载速度的两种常用方法。这两种高级策略在我们的指南中得到了很好的解释，关于如何在不损失质量的情况下减小图像大小。

有损=消除一些数据的过滤器。图像质量受到影响。
无损 = 在不影响图像质量的情况下压缩数据的过滤器。

使用正确的插件，您可以让 WordPress 自动为您进行一些图像格式设置。

问题：图像太大（而且太多）。

解决方案：您可以使用图像优化插件来加快图像加载速度：

想象一下

使用 Imagify 压缩图像：质量仍然很好，但我们节省了 87% 的文件大小 - 来源：Imagify — 使用 Imagify 压缩图像：质量仍然很好，但我们节省了 87% 的文件大小 – 来源：Imagify

Ewww 图像优化器
Optimole（Optimole 的图像优化和延迟加载）
短像素图像优化器
reSmush.it
压缩 JPEG 和 PNG 图像

2.设置图片尺寸

要解决您网站上图像加载缓慢的问题，请记住设置适当的图像尺寸。设置所有图像的宽度和高度以节省数据并缩短页面加载时间。这是如何运作的？向 <img> 标记添加宽度和高度属性将告诉您的浏览器为图像节省一些空间。如果您不这样做，这将导致内容转移，并且您的累积布局转移分数将受到影响。结果，Lighthouse 会给你的 Core Web Vital 打一个很差的分数，损害你的 SEO 和性能。

让我们看一个下面的示例，以更好地了解图像偏移对用户体验的影响。

如果未向浏览器提供图像尺寸，文本将发生变化。

如果未向浏览器提供图像尺寸，文本将发生变化。 — 资料来源：SmashingMagazine

2.如果提供了图像尺寸，则文本不会移动（不影响 CLS） ，因此可以分配适当的空间。

如果提供了图像尺寸，则文本不会移动（CLS 不受影响），因此可以分配适当的空间。 — *资料来源：SmashingMagazine*

问题：图像具有未指定的尺寸。

解决方案：使用 WP Rocket 添加缺失的图像尺寸和属性。这是一个强大的插件，它还可以进行缓存、代码优化、延迟加载等等，以提高您的 WordPress 网站的速度。

在“媒体”选项卡中添加缺少的尺寸 - 来源：WP Rocket — 在“媒体”选项卡中添加缺失的维度 – 来源：WP Rocket

3. 为每个设备提供优化的图像

“响应式图像”是用于根据设备（平板电脑、移动设备和台式机）提供适当大小的图像的策略。换句话说，您为每个图像创建多个版本，并使用媒体查询、视口尺寸等定义在代码中使用哪个版本。

Web.dev 甚至表示“将桌面大小的图像提供给移动设备可以使用比所需数据多 2-4 倍的数据。”

问题：图像未根据设备进行优化。

解决方案：

使用 WordPress 页面构建器来帮助您。

Elementor 示例，可让您根据设备选择和调整图像大小 - 来源：Elementor page builder — *Elementor 示例，可让您根据设备选择和调整图像大小 – 来源：Elementor page builder*

使用图片 CDN 根据设备以合适的尺寸交付图片。
使用 CSS 手动完成，并使用 Lighthouse 来识别尺寸不正确的图像。转到Lighthouse > Options > Performance运行性能审计。

4. 延迟加载图片

您的 WordPress 图片加载缓慢吗？是时候仅在访问者看到图像时才显示图像了。这种节省带宽和优先渲染内容的技术称为“延迟加载”。您应该在首屏下方的图像上实施延迟加载——访问者尚未查看的图像。

问题：浏览器立即开始加载所有图像。

解决方案：使用 WordPress 插件实现延迟加载。

WP Rocket 的延迟加载是一个免费插件，它在图像上实现延迟加载脚本。
如果您想比较市场上最好的延迟加载插件，请查看这个有趣的指南。
手动实现延迟加载：遵循 CodeInWP 的本指南，该指南解释了手动实现延迟加载的两种方法（不过对于初学者来说并不容易理解）。

5. 将您的图像转换为 WebP

WebP 为网络上的图像提供无损和有损压缩，这将允许它们更快地加载。根据 Google 的说法，与 PNG 相比，WebP 无损图像的大小要小 26%。 WebP 有损图像比同等质量的 JPEG 图像小 25-34%。

问题：您使用繁重的格式。

解决方案：使用 WordPress 插件将图像转换为 JPG、PNG 或 WebP。

Imagify – 在您的 WordPress 仪表板中自动将您的图像转换为 WebP 格式。

用于媒体的 WebP 转换器 - 将您的图像转换为 WebP。

6.使用缓存插件

缓存插件告诉服务器将您的文件存储到磁盘或 RAM。结果，您的网页（和图像）加载速度更快，因为它们直接从缓存中“保存”。这包括页面和浏览器缓存，其想法是将经常访问的图像存储在导航设备的本地内存中。

问题：您的缓存不存储图像。
解决方案：使用 WordPress 插件来缓存您的图像。

WP Rocket 自动应用 80% 的 Web 性能最佳实践，包括缓存和延迟加载图像、清理代码以允许 Gzip 压缩等等。

现在我们已经了解了可以应用来提供更好图像的技术，让我们看看像 Imagify 这样的插件如何提供帮助。

如何使用 Imagify 加快图像加载速度

在我看来，一个好的图像优化插件应该在保持视觉质量的同时减小图像的大小。它必须易于使用和压缩我网站上的图像和未来的图像（即时）。 Imagify 符合我的描述，我将向您展示 Imagify 如何帮助我加快网站速度。

准备好？

是时候告别加载时间过长的网站图片了。

在本案例研究中，我们使用 GTmetrix，我们将测量以下 KPI：

综合性能等级
Cumulative Layout Shift（内容的突然变化）
满载时间
页面大小和图像所占大小的百分比
HTTP 请求数和图像占用大小的百分比
使用 Imagify 优化前后的图像文件大小

让我们使用一个使用 Divi 构建的包含 10 个图像的测试站点开始审核。

场景 1：我的网站是用 Divi 构建的——No Imagify

我们只是将我们页面的 URL 放在 GTmetrix 中，然后查看不同的部分。结果还不错，但我的核心 Web Vitals 之一是橙色的，我得到了 B 分数。

没有 Imagify 的性能审计 - 来源：GTmetrix — 没有 Imagify 的性能审计 – 来源：GTmetrix

关键绩效指标	分数（没有想象）
综合性能等级	B – 87%
CLS	0.17s（橙色）
满载时间	2.6s
页面大小 - 图像所占大小的百分比	总计：2.44 MB – 图片：1.31 MB (54%)
HTTP 请求数 – 图片占用大小的百分比	总计：75 - 图片：41 (55%)
	JPG 大小： 160 KB 117 KB 27 KB 103 KB 91 KB 195 KB 74 KB 75 KB 164 KB 13 KB

此外，图像在我的总页面大小的 2.44 MB 上占用了 1.31 MB，占总页面大小的 54%。在 75 个请求中，有 41 个是由图像发出的，占请求的 55%。

现在是时候看看我的图像是如何加载的了，这要感谢 Imagify。

场景 2：审核相同的网站和图像——使用 Imagify

让我们使用 Imagify 优化我的图像。为此，只需激活插件并从Settings → Imagify启动“批量优化”。

在那里，您可以决定在三个级别上优化您的图像，即 Normal、Aggressive 和 Ultra。我选择了 Ultra 模式来向您展示最佳优化级别。

有趣的提示：如果您不想一次优化所有图像，可以从库中选择它们，就像我为我的花店所做的那样：

使用 Imagify 优化我的 10 张图片 - 来源：WordPress 库 — 使用 Imagify 优化我的 10 张图像 – 来源：WordPress 库

平均而言， Imagify 节省了我 50% 的文件大小，并将它们全部转换为 WebP 格式：

最后，是时候比较我在激活 Imagify 之前和之后的 KPI 表现了。结果非常令人鼓舞！

关键绩效指标	分数（没有想象）	分数（Imagify）
综合性能等级	B – 87%	一个 – 91 %
CLS	0.17s（橙色）	0.1s（现在为绿色）
满载时间	2.6s	2.6s
页面大小 - 图像所占大小的百分比	总计：2.44 MB – 图片：1.31 MB (54%)	总计：1.78 MB -图片：658 KB (36%)
HTTP 请求数 – 图片占用大小的百分比	总计：75 - 图片：41 (55%)	总数：72 - 图片：38 (52%)
	JPG 大小： 160 KB 117 KB 27 KB 103 KB 91 KB 195 KB 74 KB 75 KB 164 KB 13 KB	JPG 大小（节省 -50%）： 82 KB 60 KB 13 KB 56 KB 42 KB 98 KB 37 KB 41 KB 90 KB 6 KB

我们可以看到，Imagify 通过压缩图像、调整图像大小并将它们转换为 WebP 格式使我的页面更轻。我们甚至在 GTmetrix 上获得了 A！

此外，我们注意到使用 Imagify 时图像占用的空间较小。最后但并非最不重要的一点是，我的网站看起来仍然很棒，而且我没有任何模糊的图像。

包起来

确定导致网站页面加载速度缓慢的原因并不总是那么容易。有许多负责任的因素，例如未优化的图像、大量的 HTTP 请求、庞大的代码和 JavaScript 问题。可能值得您花时间弄清楚发生了什么，因为如果您不尽快解决此问题，可能会导致收入损失。

在我们的审计中，我们使用 Imagify 一键节省了多达 50% 的文件大小：

优化图像应该在您的列表顶部，看看 Imagify 为您带来了多少便利！尝试使用 Imagify 的免费试用版优化您的 WordPress 网站上的图像，并告诉我们您节省了多少数据。