WordPress 网站的性能对于提供流畅的用户体验和优化 SEO 至关重要。您可以通过微调设置、压缩资源和合并 JavaScript 来提升 Core Web Vitals，但所有这些技术都需要花费时间。在本文中，我们将向您展示如何使用 NitroPack 插件通过预设模式或自定义配置来提升性能。
NitroPack 可以大大简化优化流程，包括缓存和图片优化、JavaScript 延迟加载、CSS 压缩等功能。
第一步
NitroPack 是一个插件，因此我们要做的第一件事是获取插件副本并将其安装到 WordPress 网站上。
如果您的网站托管在 WP Engine 或 Flywheel 上，您可以通过 WordPress 管理后台下载并激活插件。如果您使用 Local 进行测试也可以使用这种方法。
如果您使用其他主机或本地开发环境，则需要直接下载并安装 NitroPack。
在 WordPress 上设置 NitroPack
安装并激活插件后，点击 WordPress 管理后台中的 NitroPack，然后点击 连接 开始设置。
这将带您进入 NitroPack 网站的页面，您可以在其中填写连接详情并选择套餐。NitroPack 网站上有更多关于可用套餐的信息，但目前我们将坚持使用免费选项。连接建立后，页面将显示一条消息，然后自动关闭。
您的 WordPress 网站现在应该显示 NitroPack 仪表板。它会快速概述已优化的页面，并让您控制 NitroPack 的设置。我们将在以下部分中介绍这些设置。
在本文中，我们将使用免费套餐。虽然这在某些情况下可以工作，但您可能会遇到限制。商业套餐 专门为初创项目设计，具有足够的资源和优化功能，可带来出色的性能效果。所有 NitroPack 套餐均包含 14 天退款政策。
为 WordPress 配置 NitroPack
NitroPack 设置的第一部分是“已优化页面”，显示已优化的 WordPress 网站页面数量。此部分还包括“清除缓存”按钮。如果更改下面讨论的“优化模式”，您需要使用此按钮，因为 NitroPack 不会在更改模式时自动重新优化页面。
“优化模式”提供五种不同的设置。点击查看模式对比将弹出一个模态框，其中包含一个方便的清单，说明各种模式之间的差异。NitroPack 有关于选择哪个优化模式以及这些模式之间差异的文档，但 NitroPack 默认为最快的模式“Ludicrous”。
"Ludicrous"模式提升性能的部分方式是通过优先处理页面的HTML和CSS，同时延迟JavaScript。根据NitroPack的说法，这通常是最佳的使用模式。但是，如果您的WordPress网站使用大量JS脚本，这可能不是最佳选择。
最适合您网站的模式会因网站性质而异。例如，如果您绝对需要图像保持100%的质量，那么您应该使用"Standard"模式，因为其他模式都使用80%的图像质量。
如果您不确定使用哪种模式，您可以先在几个页面上测试Ludicrous模式。
NitroPack有19种方法可以提升WordPress网站的性能，而Ludicrous模式使用了其中17种。剩下的两种是"Combine JavaScript"（将JS合并成一个文件）和"Remove Unused CSS"（删除未使用的CSS）。我们将在下面的设置自定义模式中更详细地讨论这些。
基本设置
NitroPack插件的设置页面包含许多其他区域，其中一些不言自明。"Subscription"部分是一个不错的功能，向您显示您拥有的具体套餐以及续订日期。
"基本设置"部分由四个切换开关组成，所有开关默认处于关闭状态。让我们快速了解一下每个开关的作用：
- 缓存预热： 在页面被清除或失效后自动重新优化和重新缓存，模拟用户访问以确保始终保持最佳性能。
- 测试模式： 允许您在隔离环境中尝试NitroPack的功能，而不影响您的实时网站，方法是在要测试的页面的URL中添加特殊参数。
- HTML压缩： 压缩HTML内容以减小其大小并提高页面加载速度。
- 允许编辑者清除缓存： 通常，只有具有管理员级别权限的人才能清除NitroPack缓存。启用此功能后，编辑者也可以清除缓存。
设置自定义模式
在大多数情况下，内置的某种模式就足以为您提供想要的速度提升。但是，在某些情况下您可能需要调整这些设置。
设置不是直接在插件中更改的，而是在您的NitroPack账户中更改。有许多具有不同选项的精细设置，将其放在单独的仪表板中有助于防止WordPress管理后台变得混乱。
在更改任何设置之前，需要考虑几点。首先，NitroPack已测试所有预设模式的稳定性。虽然"Ludicrous"和"Strong"不如"Basic"和"Medium"稳定，但它们提供更高的性能。对现有设置进行更改可以让您调整性能，但可能会牺牲稳定性。其次，更改以下任何设置都会自动将您的WordPress站点置于"Custom"模式。
开始使用
点击左侧菜单中的缓存设置开始自定义您的设置。第一个设置是"General"，显示可用的模式，以及"Webhooks"和"API keys"选项卡。点击Webhooks允许您设置清除缓存、通知和配置更改的自定义URL。点击API keys允许您查看和更改您的API站点ID和密钥，并包含一个指向NitroPack文档的链接。
使用NitroPack优化图像和媒体
点击图像和媒体可以微调图像和视频的提供方式，包括延迟加载、自适应图像调整和视频外观。
延迟加载图像
延迟加载是一种延迟加载图片的技术，只有在需要时才加载图片，这可以显著提高网站的初始页面加载速度。默认情况下，除了“标准”模式外，其他所有模式都默认开启图片延迟加载功能。
NitroPack 允许您调整隐藏图片的延迟加载方式：
- 默认： 图片进入视口时立即加载。
- 可见性改变时： 当图片的 CSS visibility 属性改变时加载。
如果您有在初始化时重新构建 DOM 的滑块，请启用“DOM 重建滑块兼容性”设置，以确保它们正常工作。
要从延迟加载中排除特定图片，请在“排除 CSS 选择器”字段中输入 CSS 选择器。例如，.container 或 #column-left。
图片优化
图片优化可以显著减小图片的文件大小，从而加快加载速度。除了“标准”模式外，每个模式的图片优化默认设置为 80%，标准模式的默认值为 100%。数值越高意味着质量越高（优化程度较小），而数值越低则优化程度越大，但可能会影响图片质量。
点击下拉菜单可以更改此设置，提供 50%、70%、80% 和 90% 的预设选项。选择自定义可以手动输入百分比值。
自适应图片尺寸
自适应图片调整会将图片文件调整为其容器尺寸，从而减小图片文件大小。此功能仅在 Growth、Scale 和 Agency 计划上可用。
视频 facade
视频 facade 通过显示视频 facade 并延迟加载 YouTube、Vimeo 和 Wistia 视频直到用户播放它们来提高加载速度。这是 NitroPack 的一个较新功能，默认在所有模式中启用。您可以使用 YouTube 和 Vimeo 的下拉菜单更改视频 facade 的大小。
此外，NitroPack 可以检测您的主题是否允许为嵌入视频配置覆盖层，并显示该覆盖层而不是视频缩略图。勾选此复选框以启用此功能。
在 NitroPack 中优化 JavaScript 设置
NitroPack 中的 JavaScript 设置在提高 WordPress 网站性能方面起着关键作用。让我们看看一些可用于优化 JavaScript 设置并提升网站性能的选项。
移除渲染阻塞资源
默认情况下，NitroPack 推荐移除渲染阻塞资源，包括 JavaScript 文件。此功能使浏览器能够更快地渲染页面内容，从而改善页面加载时间和性能。启用此功能后，NitroPack 将优化 JavaScript 文件的加载顺序，以防止它们阻止页面内容的渲染。
资源加载策略
NitroPack 提供两种资源加载策略：“样式优先”和“延迟非关键资源”。“样式优先”是默认和首选方法，它会在加载 JavaScript 文件之前先加载网站的样式。这种方法可确保在加载 JavaScript 文件之前正确渲染网站的布局和设计。
“延迟非关键资源”策略会延迟执行非关键 JavaScript 文件，直到用户与页面交互。这种方法可以进一步改善页面加载时间，但可能并不适合所有网站，特别是那些严重依赖 JavaScript 实现功能的网站。
延迟脚本
NitroPack 还允许您延迟加载热门脚本，例如聊天小部件、弹窗和分析工具。您可以在提供的字段中指定要延迟加载的其他脚本。此功能可以帮助减少网站的初始加载时间并提高整体性能。
合并 JavaScript
最后，NitroPack还提供了合并JavaScript文件的选项，以减少网络请求并提升渲染性能。请注意，由于JavaScript编码和交互的多样性，此功能可能与所有脚本不兼容。这就是为什么它是"Ludiculous"模式中默认未启用的少数选项之一。如果您启用此功能，请务必仔细检查您的WordPress网站，确保其运行正常。
在NitroPack中优化HTML和CSS设置
NitroPack中的HTML设置允许您微调HTML文件的优化。以下是可用选项：
- 保留HTML注释： 此功能会在缓存的HTML文件中保留开发者注释，这对于调试和理解网站代码结构很有用。但是，建议禁用此功能以减小文件大小并提高性能。
- 链接数据的Minify JSON： 启用此功能可以精简JSON-LD数据，通过让搜索引擎更好地理解您的内容来提高速度和SEO。
- HTML规范化： 此功能添加了一个预处理阶段来规范化HTML，解决DOM树中元素错位的问题，确保更流畅的网页体验。
CSS设置
NitroPack中的CSS设置提供了多个优化CSS文件和提高页面加载时间的选项。以下是可用选项：
- 生成关键CSS： 此功能自动识别并内联显示首屏内容所需的CSS，同时异步加载非关键CSS。这可以显著改善页面加载时间，建议启用。
- 从关键CSS中移除@font-face规则： 启用此功能可防止字体文件在页面初始渲染期间加载，从而提高字体加载速度和最大内容绘制(LCP)。
- 在关键CSS中包含/排除CSS选择器： 这些选项允许您指定自定义CSS选择器，以包含在关键CSS中或从关键CSS中排除。这可以帮助您微调CSS文件的优化。
- 自定义CSS： 此功能允许您指定将应用于优化页面的自定义CSS规则。
- 移除未使用的CSS： 启用此功能会从优化的CSS文件中移除未使用的CSS，从而实现更快的渲染。
- 合并CSS： 此功能合并CSS文件以减少网络请求数量并改善渲染。建议启用此功能。
- 合并screen和all媒体样式： 此功能将'screen'和'all'媒体的样式组合成一个组，而不是创建单独的文件。
优化字体
在本部分中，我们将探讨NitroPack中可用于优化字体设置的各种选项，这可以帮助提高WordPress网站的性能和视觉体验。
启用覆盖字体渲染行为可让您指定字体在加载过程中的显示方式，这有助于防止视觉干扰或"无样式文本闪烁"(FOUT)。
NitroPack中的字体加载策略设置允许您配置页面上字体的加载方法：
- 原生： 此选项添加页面上实际使用且必要的外部字体文件，非常适合稳定性和性能提升。
- Onload： 此选项在页面加载后渲染字体，可以改善最大内容绘制(LCP)和首次内容绘制(FCP)指标。但是，如果您的自定义字体尺寸与浏览器默认值差异较大，可能会导致累积布局偏移(CLS)。
压缩和Minify
NitroPack中的压缩和Minify设置允许您优化字体文件以加快加载速度：
- 字体子集化； 此功能可从字体文件中移除未使用的字形（符号），从而减小文件大小并缩短网页加载时间。此功能仅在 Scale 订阅中可用。
- 字体压缩： 此功能可将字体转换为 WOFF2 格式，最多可减小 50% 的字体大小。
- 优化 Google 托管字体： 此功能通过将 Google 字体托管在 NitroPack 的 CDN 上来进行优化。此功能适用于 Business 或 Scale 计划。
缓存优化
NitroPack 中的缓存设置允许您控制网站的缓存管理方式：
- 缓存过期时间： 此功能允许您定义缓存的有效期，有助于优化网站管理。您可以设置以天为单位的缓存过期时间，也可以设置以分钟为单位的过期缓存过期时间。
- 仅优化 URL： 此功能允许您专注于特定 URL 的优化并跳过其余 URL，从而对网站性能进行精确控制。
- 压缩资源： 此功能可启用或禁用 JavaScript、CSS 和 HTML 资源的压缩。
- 优化广告： 此功能可防止广告阻塞首屏渲染，从而提升页面加载速度和用户体验。
- 缓存 AJAX URL： 此功能允许您选择特定的 AJAX URL 进行缓存，从而提升其加载速度和性能。
忽略参数
NitroPack 中的忽略参数设置允许您指定不会修改页面内容的 URL 参数，这些参数可以安全地被忽略，以避免创建不必要的缓存文件。
- 包含默认忽略的参数： 此功能会忽略默认参数（如 UTM 参数），使其不会创建新的缓存页面。
- 自定义忽略的参数： 此功能允许您指定要忽略的自定义 URL 参数列表。
NitroPack 还允许您指定必须在优化页面中保留的 HTTP 响应头。缓存重置功能允许您完全重置和清除页面缓存，但这可能导致更长的缓存重建时间。
排除项
NitroPack 的排除设置允许您指定不想进行优化的资源、URL 和 Cookie：
- 排除的资源： 此功能允许您指定要排除在优化之外的 JavaScript、CSS、图片和字体文件。
- 排除的 URL： 此功能允许您指定不想进行优化的页面。请注意，此功能不能与上述“仅优化 URL”设置同时使用。
- 动态内容 Cookie： 此功能会根据特定的 Cookie 值生成定制化的缓存文件，确保向每位访问者提供正确版本的页面。
- 按 Cookie 排除优化： 此功能允许您指定哪些 Cookie 将触发排除优化。
总结
我们已经介绍了设置插件、配置优化模式以及微调图片、JavaScript、HTML、CSS 和字体设置的基础知识。按照这些步骤操作，您可以显著提升网站性能、缩短页面加载时间并改善用户体验。请记得定期测试和监控网站性能，以确保 NitroPack 能根据您的特定需求实现最佳运行效果。
您如何优化您的 WordPress 网站？您是使用 NitroPack、另一个插件，还是使用手动调整？请在下方评论中告诉我们。
