共计 5742 个字符，预计需要花费 15 分钟才能阅读完成。
Autoptimize 是一个免费的 WordPress 优化插件。除了 HTML，CSS 和 JavaScript 优化之外，Autoptimize 还包括针对 WordPress 网站其他方面的优化功能。
在本文中，我们将分享 Autoptimize 插件设置教程，以帮助站长提高 WordPress 网站的性能和页面加载速度。
为什么选择 Autoptimize?
在深入探讨 Autoptimize 插件设置之前，让我们先了解下 Autoptimize 之所以成为众多站长选择的优化插件的三个原因。
- Autoptimize 的免费版本拥有优化你的 WordPress 网站的完整功能集。
- Autoptimize 严格来说是一个优化插件，不执行任何 HTML 页面缓存。这意味着它与所有 Web 主机兼容，甚至包括具有自定义页面缓存配置的 Web 主机。
- Autoptimize 在 WordPress 插件市场有超过一百万的激活安装，并持续更新（发布新功能及修复 bug）新功能。
JS，CSS 和 HTML 优化选项 设置
HTML，CSS 和 JavaScript 是 Autoptimize 的基础。与其他优化插件一样，深入了解 Autoptimize 广泛的功能集和设置可能是一项艰巨的任务。为了使事情变得简单，我们已经整合了最佳的“Autoptimize”设置，以提高您网站的性能。
JavaScript 选项设置
Autoptimize 之 JavaScript 优化项.
- Optimize JavaScript Code（JavaScript 代码优化）
我们建议启用此选项。启用“optimize JavaScript code”后，Autoptimize 将最小化您的 JavaScript 文件。
- Aggregate JS Files（JS 文件合并）
启用 Autoptimize 插件的“aggregate JS files”选项，会将网站所有 JavaScript 文件合并为一个文件。过去，合并 JS 和 CSS 文件是 WordPress 优化的关键一步。但需要注意的是，现在很多服务器提供商使用支持并行下载和多路复用的 HTTP/ 2 服务器 - 这意味着合并文件不再像以前那样重要，因为 HTTP/ 2 允许同时下载多个文件。话虽如此，聚合 CSS 和 JS 文件仍然可能会提升某些类型的 WordPress 网站的速度，因此我们建议在启用和禁用此选项的情况下测试您的页面速度，再决定是否启用该选项。
- Also Aggregate Inline JS（聚合内联 JS）
“also aggregate inline JS”选项可提取 HTML 中的内联 JS，并将其与 Autoptimize 的优化过的 JS 文件合并在一起。由于此选项会导致 Autoptimize 的缓存体积瞬间增加，因此，除非您有特定的原因要启用它，否则我们建议禁用此选项。
- Force JavaScript in（强加载 JavaScript）
在大多数情况下，我们不建议强行将 JavaScript 文件加载到您网站的 HTML 的 <head> 元素中。强制 JS 提早加载可能导致渲染阻止元素，这可能会降低您的页面加载速度。如果您有需要在 <head> 元素中加载的 JavaScript 文件，建议您将这些脚本文件设为 Autoptimize 排除列表。
- Exclude Scripts from Autoptimize（JS 优化例外列表）
此选项可设置特定目录和 JavaScript 文件例外列表（列表内容不进行合并）。默认情况下，Autoptimize 排除以下脚本或者目录。
- wp-includes/js/dist/
- wp-includes/js/tinymce/
- js/jquery/jquery.js
- Add Try-Catch Wrapping（添加 Try-Catch 封装）
启用“add try-catch wrapping”选项会将您的 JavaScript 代码封装在 try-catch 块中。此选项对于调试由 JS 压缩和合并引起的问题很有用。如果您的站点仅在启用“add try-catch wrapping”的情况下工作，我们建议由开发人员帮助你找出导致此问题的 JavaScript 文件，因为过多使用 try-catch 块会降低 JS 性能。
CSS 选项设置
Autoptimize 之 CSS 优化项
- Optimize CSS Code（优化 CSS 代码）
我们建议启用此选项。启用“optimize CSS code”后，Autoptimize 将最小化网站 CSS 文件。
- Aggregate CSS Files（合并 CSS 文件）
Autoptimize 的“aggregate CSS files”选项会将所有 CSS 文件合并为一个文件。如前所述，此功能可能对于支持 HTTP/ 2 的站点无效。建议启用或禁用此选项对网站进行 A / B 测试，以确定对页面加载速度是否有帮助。
- Also Aggregate Inline CSS（聚合内联 CSS）
此选项会将内联 CSS 合并到 Autoptimize 的 CSS 文件中。虽然将内联 CSS 合并到支持浏览器缓存的 CSS 文件中可以减小页面大小，但建议在大多数情况下禁用此选项。
- Generate Data: URIs for Images（生成图像 URI 数据）
启用此选项后，Autoptimize 将对小的背景图像进行 base64 编码，并将其嵌入 CSS。我们建议测试该选项以评估对页面速度的影响。虽然将图像编码为 base64 格式可以减少 HTTP 请求数量，但是 base64 格式文件通常比二进制文件大 20-30%。
- Inline and Defer CSS（内联和延迟 CSS）
内联关键 CSS 可以显着提高某些站点的速度。实际上，内联 CSS 通常以结构元素，全局字体和大小以及导航样式等元素为目标。
通过内联这些关键元素，延迟加载较大的完整 CSS 文件，而不会影响页面外观版式。尽管可以手动提取关键样式，但我们建议使用更高效的 在线工具 来生成样式。
生成关键的 CSS
生成关键 CSS 后，将其复制并粘贴到 Autoptimize 设置中。
Autoptimize 提供了“power-up”功能，可以自动为 WordPress 页面生成关键的 CSS。根据我们的经验，此功能有时会降低网站速度，因为它使用外部 API 调用来生成关键的 CSS。因此，最初的关键 CSS 生成取决于外部服务器的响应能力。在大多数情况下，不需要任何外部 API 调用的方法是一种更干净的解决方案。
- Inline all CSS（内联所有 CSS）
对于大多数网站，我们不建议内联所有 CSS，因为它会大大增加页面大小。此外，内联所有 CSS 后 Web 浏览器无法缓存 CSS。
- Exclude CSS from Autoptimize（CSS 优化例外列表）
默认情况下，Autoptimize 从合并规则中排除以下目录和 CSS 文件。如果您想不希望 Autoptimize 合并特定的 CSS 文件，可以将它们添加到此列表中。与 JavaScript 排除列表类似，此功能默认不会影响 CSS 文件压缩，仅作用于 CSS 合并规则。
- wp-content/cache/
- wp-content/uploads/
- admin-bar.min.css
- dashicons.min.css
HTML 选项设置
Autoptimize 的 HTML 优化可以通过删除空格来减小页面大小。
- Optimize HTML Code（优化 HTML 代码）
我们建议启用“Optimize HTML Code”功能，因为它可以通过删除 HTML 中不必要的空格来减小页面大小。尽管此功能与大多数站点兼容，但是删除空格可能会导致某些站点出现故障。因此，我们建议在生产环境中使用 HTML 代码优化之前，先对其进行全面测试。
- Keep HTML Comments（保留 HTML 注释）
如果您想保留 HTML 代码注释，请启用此功能。
CDN 选项设置
如果您正在使用 CDN 来加速静态资源，则需要将 CDN URL 添加到 Autoptimize。但如果使用的是类似 Cloudflare 的 CDN 代理服务，则无需在 Autoptimize 的 CDN 选项中进行任何配置。
Cache 信息
Autoptimize 插件的“cache info”用于展示，例如缓存文件夹的位置和权限，以及缓存的样式和脚本的总大小等缓存信息。如果在“Can we write?”旁边看到“No”，则需要修改服务器的文件夹权限。
杂项设置
Autoptimize 插件还有一些其他优化设置。如果在优化 CSS 和 JS 文件后加载网站时遇到问题，则可能需要重新配置以下某些设置。
Autoptimize 之杂项设置
- Save Aggregated Scripts/CSS as Static Files（合并 JS/CSS 并保存为静态文件）
我们建议启用此选项以将合并文件另存为本地静态文件。如果您的服务器未配置文件压缩和缓存到期时间，则可能需要禁用此功能。
- Minify Excluded CSS and JS Files（CSS 和 JS 文件压缩排除列表）
我们建议启用此选项以确保压缩所有 CSS 和 JS 文件。但是，如果您发现某些 CSS 和 JS 文件压缩会存在问题，则可以继续禁用此选项。
- Also Optimize for Logged In Editors/Administrators（针对登录编辑 / 管理员进行优化）
我们建议启用此功能以确保已针对登录编辑和管理员角色进行了优化。如果您要以登录用户身份测试“Autoptimize”设置，则这一点很重要。
Autoptimize 插件集成了 ShortPixel，可优化图像。除了图像质量设置外，Autoptimize 插件还支持生成图片的 WEBP 版本。
但如果你追求更完美的图片优化，我们不建议您使用“Autoptimize”提供的阉割版图像优化功能。相反，建议直接使用 ShortPixel 或 Imagify 的功能齐全的插件。使用完整的插件，您将可以对优化设置进行更精细的控制，包括重写图像以使用 <picture> 标签，这是部分服务器 WEBP 支持所必需的。
Autoptimize 之其他优化选项
- Google Fonts
Autoptimize 针对谷歌字体优化提供了有几种不同设置选项。应该采用哪个选项取决于网站如何使用 Google 字体。
- 维持不变。
- 删除 Google 字体。
- 合并并放置 Head。
- 合并并在 Head 预加载。
- 合并并通过 webfont.js 异步加载。
不建议采用“维持不变”选项，完全没有速度优势。
如果 Google 字体对网站作用不大，不妨删除它们直接使用系统字体，页面加载速度刷刷刷。
如果 Google 字体必须保留，建议您测试最后三个选项，以找出最适合您的网站的选项。
- Remove Emojis（删除表情符号）
此 Autoptimize 选项将删除与 WordPress 内核提供的表情符号相关的 CSS 和 JavaScript。我们建议启用此选项，因为可以缩小页面大小。此外，大多数主流操作系统附带表情符号字体。
- Remove Query Strings from Static Resources（删除静态资源查询字符串）
如果您希望删除静态资源查询字符串（例如?ver=），则可以启用此选项。删除查询字符串不会影响加载时间，但可能有助于提高您的网站在 GTmetrix，Google Pagespeed 和其他性能测试服务中的得分。
- Preconnect to 3rd Party Domains（预连接到第三方域）
Preconnect 属性允许您的浏览器连接到指定的域，以在发送完整的 HTTP 请求之前处理 DNS 查找和 SSL 握手协议。
例如，如果站点存在一张 Logo 图像储放于https://site.domain.cdn.com/logo.png，你可以在 Autoptimize 插件设置将预连接指令添加到 <head> 元素，以实现在 HTML 的 <body> 元素中发出 HTTP 请求之前，处理初始 DNS 和 SSL 连接。
您可以使用浏览器的开发人员工具或检查器找到要预连接的重要外部域。在下面的示例页面中，对以下域的外部请求做预连接。
https://cdn.brianli.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
可以将这三个域添加到 Autoptimize 的预连接列表中。
使用开发人员工具查找外部资源
出于性能原因，我们建议在 Autoptimize 的预连接列表中添加不超过六个域，因为为太多域指定预连接指令可能会导致性能下降。
- Preload Specific Requests（预加载特定请求）
预加载指令指示 Web 浏览器尽快下载资产。该指令对于在页面加载过程的早期下载所需的内容很有用。实际上，预加载通常用于在页面 CSS 中请求自定义字体之前先加载它们，从而减少页面加载时间。
建议您与开发人员讨论，最终找到并确定 WordPress 网站上哪些内容可以预加载（如果有）。与许多其他与性能相关的调整一样，预加载太多内容可能会使网站加载速度变慢，正所谓物极必反。
- Async JavaScript Files（JavaScript 文件异步加载）
Autoptimize 插件的“async JavaScript files”功能可以指定某些外部 JavaScript 文件，以通过 HTML 代码的 async 标志实现异步加载。虽然异步加载 JS 文件可以提高页面速度，但建议进行充分的测试以确保不影响网站功能，某些 JS 未必适合进行异步加载。
最后
如果您知道如何调整其设置，对于希望提高站点性能的 WordPress 用户，Autoptimize 插件是一个不错的选择。
借助 HTML 和 CSS 优化等基本功能以及 CDN 集成、预连接和预加载指令等更高级功能，Autoptimize 具备了优化 WordPress 网站前端性能所需的一切。
