如何通过优化网页性能提高用户体验？（干货收藏）

性能优化是一个复杂的话题，涉及的技能很多，如何通过优化网页性能提高用户体验？这意味着我们可以安全地应用压缩算法，比如GZIP（大多数浏览器都能理解）。当然，应该为每个资源定义缓存策略。总之，网站性能优化包含了网站响应的所有方面，如缓存、设置CDN、重构、资源优化等，但所有这些都可以逐步完成。作为一名web开发人员，您应该将本文作为参考，并始终记住在实验前后测量性能。

性能优化是一个复杂的话题，涉及很多技能。 如何通过优化网页性能来提升用户体验？ 今天我就给大家介绍一些常用的方法。

1. 最小化要传输的数据量

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

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

从您的角度来看网站优化方案，您可能希望找到一种更早续订资源的方法，而不是等待资源的到期日期。 将文件的“指纹”嵌入到 URL 中，使本地缓存失效。

当然，应该为每个资源定义一个缓存策略。 有些可能变化很小网站优化方案，或者根本没有变化。 其他国家的变化速度更快。 其中一些包含敏感信息，另一些可能被视为公共信息。 使用“”指令阻止CDN缓存私有数据。 尽管图像请求不会阻止解析或渲染，但 Web 图像也可以进行优化。

2、减少关键资源总量

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

样式表

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

为了进一步改进该过程，还可以内联某些样式。 这至少可以节省我们与服务器之间的一次往返，否则需要获取样式表。

脚本

如上所述，脚本是解析器阻塞的，因为它们可以更改 DOM 和 CSSOM。 因此，不改变它们的脚本不应该进行块解析，从而节省我们的时间。 为了使其工作，所有脚本标签都必须使用 async 或 defer 属性进行标记。

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

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

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

最后，CRP 长度应尽可能缩短。 从某种程度上来说，上面的方法可以做到这一点。

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

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

简而言之，网站性能优化包括网站响应能力的方方面面，比如缓存、设置CDN、重构、资源优化等，但这些都是可以一步一步来完成的。 作为一名 Web 开发人员，您应该使用本文作为参考，并始终记住在实验之前和之后测量性能。