1. 尽量减少需要传输的数据量

首先，删除所有未使用的部分，例如 中不可访问的函数、选择器从不匹配任何元素的样式，以及 CSS 中永远隐藏的 HTML 标签。其次，删除所有重复项。然后，我建议设置一个自动最小化过程。例如网站模板，它应该删除来自后端服务的所有注释（但不是源代码）以及每个不包含其他信息的字符（例如 JS 中的空格字符）。完成后，剩下的就可以是文本了。这意味着我们可以安全地应用压缩算法，例如 GZIP（大多数浏览器都能理解）。最后，还有缓存。这在浏览器第一次呈现页面时不会有太大帮助，但在后续访问中会节省很多。但关键是要记住两件事：

如果您使用 CDN，请确保支持缓存并正确设置。

您可能希望从自己的角度更早地更新资源，而不是等待资源的到期日期。将文件的“指纹”嵌入 URL 中以使本地缓存无效。

当然，应该为每种资源定义缓存策略。有些资源可能很少更改，或者根本不更改。有些资源更改得更快。有些资源包含敏感信息，有些资源可能被视为公开信息。使用“”指令可防止 CDN 缓存私人数据。Web 图像也可以进行优化，尽管图像请求不会阻止解析或渲染。

2.减少关键资源的总数

“关键”仅指页面正确呈现所需的资源。因此，我们可以跳过所有不直接参与此过程的样式以及所有脚本。

样式表

为了告诉浏览器不需要特定的 CSS 文件seo优化，我们应该为引用样式表的所有链接设置 属性。使用这种方法，浏览器将仅根据需要处理与当前媒体（设备类型、屏幕尺寸）匹配的资源，同时降低所有其他样式表的优先级（它们将被处理，但不会成为关键渲染路径的一部分）。例如，如果您向引用打印页面样式的 标签添加 = "" 属性，则当介质未打印时（即，当页面显示在浏览器中时），这些样式不会干扰关键渲染路径。

为了进一步改善流程网站优化，一些样式也可以内联。这至少为我们节省了一次往返服务器的次数，否则就需要往返服务器来获取样式表。

脚本

如上所述，脚本会阻塞解析器，因为它们可以更改 DOM 和。因此，不会更改它们的脚本不应被解析为块，从而节省我们的时间。为了实现这一点，所有脚本标签都必须标有或属性。

标记为“”的脚本不会阻止 DOM 构建或“”，因为它们可以在构建之前执行。但请记住，内联脚本无论如何都会阻塞，除非您将它们放在 CSS 之上。相反，标记为“”的脚本在页面加载结束时进行评估。因此，它们不应该影响文档（否则它们会触发重新渲染）。

换句话说，使用时，脚本直到页面加载事件触发才会执行，同时允许脚本在解析文档时在后台运行。

3.缩短关键渲染路径长度

最后，应尽量减少CRP长度。在一定程度上，上述方法可以实现这一点。

媒体查询作为样式标签的属性将减少必须下载的资源总数。脚本标签属性和将防止相应脚本阻塞解析。使用 GZIP 最小化、压缩和存档资源将减少传输数据的大小（从而减少数据传输时间）。内联某些样式和脚本可以减少浏览器和服务器之间的往返次数。

我们还没有讨论过在文件之间重新排列代码的选项。根据最新的最佳性能理念，网站应该最快完成的第一件事是显示 ATF 内容，ATF 代表首屏以上，即无需滚动即可立即看到的区域。因此，最好重新排列与渲染相关的所有内容，以便首先加载所需的样式和脚本，然后停止其他所有内容 — 既不解析也不渲染，并且始终记住在进行更改之前和之后进行测量。

简而言之网站优化，网站性能优化包括网站响应的各个方面，例如缓存、设置 CDN、重构、资源优化等，但所有这些都可以逐步完成。作为 Web 开发人员，您应该将本文作为参考，并始终记得在实验前后测量性能。