GTmetrix是另一个款类似于Pingdom的很酷的工具，它可以深入分析站点的速度和性能。

注意：同一个站点，GTmetrix通常显示的加载时间比Pingdom慢得多；这是因为不同工具计算加载时间时使用了不同的度量方式。没有太大的差异，只是GTmetrix度量的是完全加载的时间，而Pingdom只计算onload时间。

onload time是计算页面被完全处理并完成页面上所有文件的下载之后的速度。这就是为什么onload time总是比Fully loaded time快。

当页面重新开始传输数据时，fully loaded time是发生在onload过程之后，如果2s之内没有传输了才结束的，这意味着GTmetrix计算页面速度时间里包含了onload time。它基本上测量了整个响应周期，并将它从相关页面中获取的信息传输出去。因此，时间较慢。

关于onload time 和 fully loaded time的解释可以看GTmetrix是怎么解释的？

https://gtmetrix.com/blog/new-performance-timings-available-default-to-fully-loaded-time/

谷歌PageSpeed Insights是另一个测试网站速度的流行工具。谷歌的官方测试工具能用来衡量您的网站的移动版本的速度。

除此之外，谷歌还将为您提供最佳的建议，告诉您需要对网站进行哪些改进，以获得更快的加载时间。

通常，使用这三种工具中的任何一种，您都可以检测图片对站点速度的影响程度。

如何提高你的WordPress网站的速度

当然，本文主要是讲关于如何优化图片的，所以你猜对了，这是其中的一种方法。但是，在深入研究图片优化之前，我先简要的说明一下，如果您的站点上上载了大量图片，那么还有哪些方法可以帮助你进行优化。

图片缓存

图片缓存是在缓存中临时存储数据的操作，如果用户频繁访问您的站点，数据将自动交付，而无需再次执行初始的加载过程(在第一次请求站点文件时执行)。缓存是一种内存，它收集来自同一页面的多次请求的数据，用于提高提供该数据的访问速度。

缓存实际上非常简单。无论您是手动操作还是安装插件，它都可以在你的网站上快速实现。一些最好的免费插件是WP Super Cache 和 W3 Total Cache ，他们在WordPress.org官方的插件库里是最受好评的。

内容分发网络（CONTENT DELIVERY NETWORKS）

CDN将从离访问用户最近的服务器位置请求站点内容。这意味着它在世界各地的许多数据中心保存了网站的副本。一旦访问用户通过他们的主位置访问你的站点，最近的服务器将请求你的内容，这意味着加载时间变得更快了。Cloudflare 和 MaxCDN (现在的StackPath)是WordPress最流行的解决方案。

GZIP压缩

通过这种方法，您可以通过缩小站点的文件来压缩它们。这将减少您的站点带宽，并将相应的文件更快地传输到浏览器。

WP Super Cache 和 W3 Total Cache 都带有GZIP压缩的功能，您可以在安装后使用这个功能。而且，很多流行的WordPress主机提供商已经通过他们的标准包启用了这个功能。要查明您的站点是否启用了GZIP压缩，请使用smallseotools上的这个工具进行快速检查。

您还可以通过修改.htaccess文件手动向WordPress站点添加GZIP压缩。（不是开发人员不建议这么做）

其他简单而常见的（有时被省略）技巧包括：使用轻量级WordPress主题、禁用不必要的插件（那些您不再使用或暂时不需要的插件）以及定期清理WordPress数据库。

注意这些细节也有助于减少WordPress构建和显示页面的时间。有时，功能丰富的主题或插件可能是降低站点速度的主要因素。缓存插件可以在这种情况下进行干预，但是保持WordPress站点尽可能的简洁可能是更好的方法。

图片优化

这是一个非常有效和简单的技术，非常有助于加速你的WordPress站点。这就是今天的主题，我把它分为几个部分来讲。

为什么要做图片优化

现在大多数的网站为了吸引用户的注意力，比以往任何时候都使用了更多的视觉效果。多媒体(图像、视频、播客)在过去五年中变得越来越受欢迎，这导致网站站长使用越来越多的图形化和重图像的页面。

有时，人们往往最容易忘记和不注意的是，定期上传图片也会逐渐影响WordPress网站的速度。

特别是如果你有一个很依赖图片的网站，你的内容主要依赖于图片和视觉效果，这应该是你的主要关注点。

如何优化你网站上的图片

这可以手动完成，也可以使用插件完成。先从手动方法开始讲起。这主要是为那些非常热衷于控制自己的网站和自己想做所有事情的人准备的。手动优化图片还将在很大程度上帮助您理解插件(我们稍后将讨论的自动化方法)是如何工作的。

如果您想自动化图片优化的过程，您需要先做一个备份。有很多很棒的WordPress插件，它们可以帮你节省很多时间，也能带来很好的结果。稍后我们将对此进行更多讨论并测试一些工具。

手动优化你网站上的图片

优化可能意味着要做一些重要的事情。在这里，我们主要讨论的是压缩、调整大小、使用正确的格式、裁剪等等。

使用正确的图片格式

如何判断哪种图片格式最适合您的站点，以及哪种格式在编辑和压缩时具有更高的阻力？答案是，没有通用的最佳格式，但是有基于每个图片内容的推荐格式。

PNG主要用于图形、标志、插图、图标、设计草图或文本，因为它可以很容易地在图片编辑器中编辑，并且在压缩后仍然保持很高的质量。这是因为png是无损的——它们在压缩期间不会丢失任何重要数据。

JPG在摄影师、普通用户或博客中更受欢迎。它是有损的，可以压缩到较小的尺寸，同时仍然保持肉眼看到的良好的质量。JPG格式支持数以百万计的颜色，这就是为什么人们主要用它来拍摄照片。它还支持高压缩级别。

替代JPG和PNG的另一种方法是WebP，这是由谷歌引入的一种web图像格式，它的作用是提供比JPG(或任何其他格式)更小的尺寸，同时保持与后者类似的图像质量。WebP格式允许有损和无损压缩选项。根据谷歌，WebP图像可以比JPG图像小34%，比PNG图像小26%。

但是WebP图像格式也有它的缺点，比如还没有被所有的浏览器或者默认的WordPress所支持(你需要一些工具)。

所以为什么有时候你的站点的谷歌测试评分比较低，一般60分以上我们就觉得是可以的，70多就是比较好的，第一，我们如果是响应式网站，不是针对移动端来做的站点，一般的信息会比较多，不可能分数会像桌面端评分那么高。第二，WebP格式图片也在建议的行列之内，基于现在很多浏览器还是没有兼容，所以宁愿舍弃它。所以你把建站的开发人员逼死也没用，也没可能达到100分。如果你的移动站点只想放两三段文本或许可以。

关于图像格式的结论是，不存在普遍正确的格式。这取决于你在网站上需要的图片类型。如果你使用的照片有多种颜色，JPG格式可能是正确的，因为它擅长压缩色彩丰富的照片，这可以在很大程度上减少大小。它不适合只有少数颜色数据的图像，如图形或截图。

你可以做一个快速测试。保存了一张包含多种颜色的JPG图像，然后将其转换为PNG。经过改装后，照片的尺寸变得大了很多。然后使用ImageResize.org工具来压缩这两种图像(我选择这个工具是因为它允许我压缩两种格式并使用大于1MB的文件)。

这是一张未压缩的4M图像。

(此处由于图片较大，传不上来)

压缩后的结果是：

另一方面，如果您正在使用许多截图、图形、图标或透明图像，PNG是正确的格式——通常，只有很少颜色的图像或包含块颜色的图像(例如，在浅色和深色背景之间的转换)。PNG是无损的，通常在压缩后会导致非常小的尺寸，否则可能会更大，如JPG。将这类图片保存为JPG格式会使它们的质量变差，变得模糊。

我们再做一个测试。将WordPress仪表盘的截图保存为JPG和PNG格式。然后我使用相同的ImageResize.org压缩每种格式。值得一提的是，PNG文件一开始就以比JPG小得多的大小保存。

这是这张图片：

压缩后的图片大小对比：

找出图像的最大显示尺寸

如果你想自己优化图片，你应该先找出它们的最大显示尺寸。由于你的站点是响应的，你上传的所有图片将根据用户的视图(他们正在浏览您的站点的设备)以不同的分辨率提供展示。

最大显示尺寸是图片可以接受的最大分辨率，计算所有可以访问它的潜在视图和屏幕。

如何检查图像的最大显示尺寸？

首先，打开包含要检查的图像的页面。您需要手动调整浏览器的大小(通过拖动边缘使其逐渐变小)，直到图片跳到最大尺寸。这个点称为“断点”——因为图像大小突然中断。

图片跳转到大尺寸后，按右键->Inspect(如果您的浏览器是Chrome)。将鼠标悬停在屏幕右上角图像的URL上，您将看到它当前展示的维度及其原始维度(固有维度)。后者是用户将要下载的内容，而前者表示页面上图像的最大显示尺寸。

有了这些信息，你现在可以调整图片的大小和裁剪，使其与给定的维度相对应。这样，你可以确保有效地优化图片，使它仍然可以在屏幕上看起来很好，同时，你的网站不会有太大的重量。

例如，如果你希望你的图像是支持视觉友好的，以更好的质量编辑他们，你可以使用两倍的最大显示尺寸。屏幕截图中的图像为428×321像素，所以将其设置为856×642像素，以获得更好的视觉质量。

调整大小和裁剪图片

当你处理的文件的尺寸比你通常需要在网站上显示的大得多时，你可以简单地调整或裁剪它们，然后将它们上载到你的网站上。你可以节省磁盘空间，并保持你的网站加载时变得更轻。

当然，如果你有一个摄影作品集，而且让参观者看到你作品的原貌对你来说很重要，那么你确实需要去展示它们最好的一面。

你也可以在任何时候裁剪你的图片，如果只有一个细节，你想要展示给人们，没有理由上传广泛的，完整的图片，如果其余的内容是多余的。

压缩图片

所有的照片编辑器都有这个选项，他们会询问你想要以什么质量保存你编辑过的照片。你通常使用100%的质量(原因很明显)，但是你可以稍微降低一些，比如60-70%。如果图像的分辨率已经很高，你不会注意到有很大的不同。在这种情况下，它的尺寸会小一些。

在你设置了一个较低的质量百分比并保存了图像之后，您可以通过使用在线工具进一步压缩图片的大小，对同一图片进行另一轮优化。

JPEG Optimizer 和JPEG.io的降低率约为60%，而TinyPNG(如果您选择使用png)的降低率约为70%。Kraken对两种格式都很友好，通过有损压缩返回的文件要小70%左右。

Mac用户可以尝试ImageOptim，它可以将JPG和PNG格式压缩到50%。

设置自动化形式的图片优化

为了使站点上的图片优化过程自动化，你需要使用工具(也就是WordPress插件)。这意味着他们会做我们之前说过的所有事情，但是是自动完成的。

有几种自动的WordPress图像优化解决方案，但在这篇文章中，我只想介绍一些比较可靠的解决方案，这些特性可以为完整的图片优化提供完整的解决方案。

我们将比较是这3种工具：Optimole、ShortPixel和Smush。

OPTIMOLE

Optimole可能是其中最复杂的一个，因为它封装了高效图像优化可能需要的所有特性。所以，如果你正在找智能图像优化的各个方面，那么你可能会喜欢Optimole。

Optimole将您的图片传输到进行图片优化的云端。然后，通过CDN对优化后的图片进行筛选，使图片的加载速度更快。这个插件用一个自定义的URL替换每个图像的URL。

根据每个用户的屏幕大小调整图片是Optimole的另一个关键特性。这意味着它会根据用户视图自动优化图片到正确的尺寸，因此，如果您从平板电脑上看到图片，它将提供适合平板电脑标准的完美尺寸和质量。这些转换速度很快，不会占用站点上的任何额外空间。

另一种你将喜欢的关于Optimole的聪明方法是，它可以检测用户的连接何时变慢。当它识别慢速连接时，插件会以更高的速度压缩站点上的图片，这样访问者的页面加载时间就不会受到影响。

如果你想要延迟加载，插件也允许你在你的网站上使用它。您只需在一个框中打勾，Optimole就会为您完成这项工作。

关于Optimole另一个有趣的事情是，它不会自动优化WordPress媒体库中的所有图像。它只通过在您的站点上输入一个页面来优化用户请求的图像。所以如果你安装了插件却什么都没发生，不要惊慌。一旦用户请求了一个图像，插件就会做我上面已经解释过的事情。这是非常节省空间的，因为这个插件只使用一个镜像，它根据用户的请求和设备在云中转换镜像。

我喜欢这个插件的原因是它聪明、高效，而且它从不做不必要的工作或转换。这三个站点上使用了这个插件:ThemeIsle, CodeinWP, and JustFreeThemes。我测过了这3个网站的评分都不错。

但是这里有一个提醒就是：你必须得忍受的了一开始图片又一个延迟缓慢加载的显示过程。

SHORTPIXEL

ShortPixel是一个流行的WordPress插件，它在批量优化图像方面做得很好。该插件在自动驾驶仪上工作，并在默认情况下优化你上传至媒体库的每一张图片。不过，如果不需要这个选项，可以禁用它。

该插件提供有损和无损压缩，甚至可以应用于缩略图。所有修改后的图像都保存在站点上的一个单独文件夹中，您可以在其中反复进行撤消/重做优化。例如，从无损转换回有损，反之亦然，或者简单地还原到原始文件。

此外，如果你进入WordPress媒体库，选择list视图而不是默认的grid视图，你会注意到最后一列让你及时了解压缩状态。通过这种方式，你可以手动浏览所有图片，并压缩/解压那些您需要的。对于每个图片，你将看到它被压缩的百分比。

如果你想同时优化它们，只需选择Bulk Actions -> optimization with ShortPixel(或其任何子项目)，然后单击Apply。您的图像将在短短几分钟内压缩。

此外，ShortPixel允许你自动将PNG转换为JPG，创建图像的WebP版本，并优化PDF文件。它还提供了CMYK到RGB的转换。它与Cloudflare CDN服务合作，将优化后的图像上传到云服务器上。

听说，ShortPixel最近也发布了一个不同版本的插件，带有自适应图像功能，这将在匹配屏幕分辨率和post布局方面提供更多帮助。

SMUSH

在WordPress插件领域的另一个大品牌，Smush是一个友好的工具，可以在运行时优化你的图片。Smush提供了一个漂亮的跟踪仪表板，它可以让您随时了解你的网站的总节省，有多少项尚未优化，有多少项已经优化，以及它为此使用了什么方法。

它还具有批量压缩、延迟加载、自动PNG到JPG和CDN集成。与ShortPixel一样，Smush还将压缩状态添加到媒体库中的每个图片中，所以你可以单独或批量管理它们。

默认情况下，Smush使用无损压缩，专注于使图片尽可能接近原始版本。这个插件的缺点是它不能像前面提到的插件那样在免费版本中提供相同数量的功能。您需要为一些基本功能付费。

测试了三个图像优化插件

我下了一张904 KB的图片。然后用上面介绍的三个插件对它进行了一系列测试。

这是插件的执行结果：

1. Optimole: 555 KB (312 KB 如果选择高压缩级别)

2. ShortPixel: 197.87 KB

3. Smush: 894 KB

*Optimole和ShortPixel使用有损压缩，而Smush使用无损压缩。

下一个方法更加有趣。

把这张照片上传到WordPress网站上，并在之后的博客中使用。Optimole和ShortPixel都自动缩小了尺寸，使其与屏幕分辨率和post布局匹配。插件找到了博客文章中需要的正确大小和尺寸，并相应地修改了图像。

这些是每个插件的缩减尺寸：

1. Optimole: 158 KB, 524×394 pixels

2. ShortPixel: 71.7 KB, 768×577 pixels

3. Smush: 没有针对此特定请求进行优化

   
   

话虽如此，重要的是要记下两件事：

ShortPixel返回最佳压缩大小，但尺寸较大；总的来说，一个好的结果只是丢失了一点图像的原始质量。

Optimole(这次我将其设置为自动压缩)返回了一个更大的尺寸，但尺寸更小，而且用肉眼可以看到质量更好。Optimole以某种方式在尺寸和尺寸之间找到了一个很好的组合，所以在这里质量不会损失太多

这是它在网站上的样子:

如果你问我，Optimole更适合这个特定的请求和用户的视图(在本例中是我的笔记本电脑屏幕)。

现在，让我们快速浏览一下这些插件是如何适应移动屏幕的：

我遵循同样的程序。我立即启动了一个插件，并通过我的手机(Android)请求相同的网站页面。结果：

Optimole: 96 KB, 389×292 pixels.

ShortPixel: 19 KB, 300×225 pixels.

没有为手机优化图像。

手机演示屏幕:

正如在第一个例子中所看到的那样，Optimole返回了一个更大、更注重质量的版本，而ShortPixel将图像转换为一个更好的大小，但在质量上略有损失。

还有一个EWWW Image Optimizer plugin ，与Smush类似，它只使用无损压缩，只将图像减少了相当小的百分比。所以有时候网上很多文章说到使用这个插件，而且这个插件也确实比较好用，如果你不注重图片本身的大小，可能起到的作用也比较小，按具体情况定。

经过三次试验得出结论:

• ShortPixel提供了最佳的优化率(约70-80%)，而Optimole在自动压缩级别为40%，在高压缩级别为70%。

• Optimole正在使内容更好地适应用户的视图和互联网连接。如果你把它设置为自动，它会知道如何持续地减小尺寸和保持一个伟大的质量。我喜欢它知道如何处理所有这些变量，所以它既有助于提高网站的加载时间，又能向访问者显示高质量的图像。

如果我必须把测试结果和插件的其他特性(也就是简单和用户友好性)放在一起，我会选择Optimole。但是我强烈推荐ShortPixel也是一个很好的竞争者。如果你愿意花钱购买Smush，或者你是一名摄影师，希望尽可能少处理照片，那么Smush也是一个不错的选择。

结论

不要低估图像优化的影响。图片总是网站运行缓慢的主要原因之一。谷歌不喜欢慢速网站，你的访客和客户也不喜欢。特别是如果你想通过WordPress网站赚钱的话。一个未经图片优化的网站确实很大程度上影响你的SEO优化，PPC优化，增加你的网站跳出率。

无论您是喜欢手动进行图片优化，还是选择一个插件为您实现自动化，您都将很快看到良好的结果。

最后给大家推荐一个好用的网站加速付费插件：WP ROCKET，功能很强大，简单易用，而且效果很不错，能做我上面所提到的很多操作。因为这篇文章不是教怎么使用插件的，所以大家不管使用什么插件或者其他压缩软件，可到网上搜索或者到官方文档查找如何使用。

希望文章对你有帮助，有用可转发收藏，自行拿走不谢！