五、优化图片加速页面加载

通常在互联网上，JPEG 和 PNG 是最常见的图片格式。PNG图像格式是未压缩的。压缩图像时会丢失一些信息，因此未压缩的图像质量会更高，细节更多。缺点是文件大小较大，因此加载时间较长。而 JPEG是一种压缩文件格式，略微降低了图像质量，但它的尺寸明显较小。

那么，在处理一些产品图片的时候，应该如何决定选择哪种图像格式呢？如果照片或图片有很多不同的颜色，那么使用 JPEG。如果图片是一个相对简单颜色较少的图片或你需要透明图片，那么更适合使用 PNG。

这个基本上各类缓存插件都开始内嵌图片优化这个功能了。上面 SiteGround 的 SG Optimizer 插件以及付费的 WordPress 缓存插件 WP Rocket 都包含这个功能。

使用图片优化，图像大小可以减少最多 5 倍，还是非常有用的。

六、大图片适当使用适当尺寸的 Thumbnail 缩略图

通过网站测速工具，发现一个问题，提示：Serve scaled images（可以给幻灯片等大图片设置缩放图片），如果你没有这样的问题，这一步可以跳过。

在 WP 后台，Settings – Media 下，看到 Thumbnail size，按照，勾选：Crop thumbnail to exact dimensions (normally thumbnails are proportional)

点击 Save Changes 按钮，确认保存。

七、增加 WordPress 内存使用上限并限制 WordPress 修订版本数量

每次在 WordPress 里无论是创建 Page（页面）或 Post（文章），还是编辑，又或者是 Save Draft（保存草稿）或 Publish（发布）或 Update（更新），WordPress 都会自动保存一份修订版本。如果文章编辑的次数很多的话，在数据库里面会存在很多个没用的修订版本，浪费数据库的空间。

我们可以限定 WordPress 修订版本的数量，只不过在后台设置里没有这项设置。

另外，WordPress 如果安装了功能较多的主题或者较多的插件，会造成内存资源使用增大。我们需要给 WordPress 分配更多的内存数值上线。SiteGround 最大内存值是 768M，注意 WordPress 内存上限没必要设置得太高，因为要留内存给数据库和 PHP 以及其他应用。

我们可以在网站文件根目录下的 wp-config.php 里，添加 2 行代码：

define('WP_MEMORY_LIMIT', '256M');
define('WP_POST_REVISIONS', 3);

代码的作用，是限定只保留最近的3个修订版本，并且给于 WordPress 最多可以使用 256M（如果不设置，原先默认好像是 64 M）。

从 SiteGround 后台的 Cpanel 面板里的 File Manager 可以找到网站根目录，用 code edit 方式打开编辑，添加上面这行代码即可。

粘贴在 define(‘DB_COLLATE’, ”); 这一行下面，保存即可。
图9

八、减少外部资源 HTTP 请求数量

我们使用在线网站测速工具测试，经常会发现自己的网站有很多 HTTP 请求。主题功能越多，插件安装得越多，不知不觉调用的 CSS 文件和 JS 文件也越来越多。

过多的WordPress插件会降低网站速度。 有的插件可能仅用于某一个特定页面。但是，由于插件开发者欠考虑或代码质量欠佳，这些插件通常会出现在每个页面上，即使它没有被使用。

很多 WordPress 网站都加载了很多其实无需加载的文件，这会导致额外的和不必要的请求，这些文件（主要是CSS和JavaScript文件）以及内嵌的代码，都会累加到页面的总体积上，从而减慢您的网站速度。页面加载缓慢或失败，或者 JavaScript 出现错误的代码，或者与其它插件产生冲突，这些都会造成 Google 搜索排名不佳。

Asset CleanUp 插件的使用

我们可以安装一个名为 Asset CleanUp 的插件，Asset CleanUp 是一个优化前端性能的插件，让你可以选择在网页上禁用不需要在网站上加载的文件，并将剩余的加载的文件组合成更少的文件，这最终将大大减少HTTP请求的数量，优化网页加载速度。

图10

假设你有一个页面，其中加载了 30 个文件（CSS 和 JS），总大小为 1.5 MB。 使用 Asset CleanUp，您可以通过不加载页面上无用的其他 18 个文件，将数量减少到 12 个文件。于是，页面的总体积减小到 0.7 MB，这样可以减少下载资源的时间，从而加快页面加载速度。

如果你不确定是否需要在页面上加载某些 CSS 或 JavaScript 文件，并且担心某些内容可能会破坏网站的功能或布局，那么可以使用“Test Mode”。激活此选项后，Asset CleanUp 中设置的所有规则仅对已登录后台的管理员（你）生效，常规访问者看不到测试模式下的页面，看到的还是正常的网站页面。你可以在插件的设置页（Settings）下开启 Test Mode。当你在测试模式下，你可以开启设置页下的使用偏好（Plugin Usage Preferrences），然后启用 Manage in the Front-end（在前台页面管理）。

这样，每个页面你都可以拖到最下面，查看加载的 CSS 和 JS 文件，选择不加载哪些文件。等一切设置好后，关闭“测试模式”，你所做的更改也将对未登录的网站访客生效可见。

不过说实话，我觉得这个针对页面精准控制禁止加载哪些文件有点太讲究了。大多数外贸人不是极客，不会做这种精细活儿。所以，我就只介绍一下，不讲具体操作了。

实际上，我只是体验过特别针对网站首页去前台页面禁止加载某些文件，确实减少了一些 Requests。比如，首页我不需要加载表单插件的 JS。

图11

实际上，每个 Page 或者 Post 编辑区下方，都会显示出加载了哪些文件资源。你都可以进行单独的设置，对我这样喜欢折腾的人来说，太舒服了！

当然，我建议你不用学我，这里可以不折腾。因为实际上缓存部分已经有压缩CSS，合并CSS等功能，其实跟着这篇教程做到这里，你的网站已经优化得非常不错了，至少 Pingdom 测测能得 A grade 了！不信你测试看看？

引起我注意的是，这个插件有几个其他的小功能特别棒，都是 SG Optimizer 插件里没有的功能，正好补全了。比如：

• 1 Site-Wide 不加载文件设置
• 2 Fonts 字体文件的遇加载功能
• 3 Google Fonts 字体的合并处理。

图12

在 Site-Wide Common Unloads 这里，按照截图中的设置去启用相应功能。禁用 Emojis（没什么鸟用）、禁用网页嵌入（不安全）、禁用新款的古藤堡 Block 编辑器的 CSS 库（反正还是经典编辑器舒服）。

在 Local Fonts 这里，需要预加载的字体文件，可以在 Preload Google Font Files 文本区内填入字体的地址。

如何排查没能顺利加载的字体呢？可以用 F12 开发者工具，刷新网页，选择 Console，注意看哪些字体文件 Fall back，把 URL 记录下来。
另外，你还可以查看  GTmetrix 测速结果里 Waterfall 里面加载慢的字体。

图13

然后根据插件 Exmaples 的提示，跟你本地网站上调用的主题的字体有关，就粘贴到 Local Fonts 的 Preload Local Font Files 里；
如果跟 https://fonts.gstatic.com 有关的字体就填写到 Google Fonts 那里。

图14

在 Google Fonts 那里，把 Combine Multiple Requests Into Fewer Ones 和 Preconnect? 这两个都开启。

图15

点击 Update All Settings。然后测试一下，你已经起飞了！

Pingdom 的 Performance 和 GTMetrix 的 PageSpeed 都是 A。

Pingdom检测，得分A grade 93，加载速度 1秒以内（原来评分为 C，加载速度 3.4 秒）：

图16

GTMetrix检测，得分双A grade，请求数 33，页面加载时间 1.5S；未速度优化之前，得分 B(85%) 和 C(76%)，请求数 36，页面加载时间2.1S。

图17

1 2 3

感谢您的来访，获取更多精彩文章请收藏本站。