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

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

先删除不用的部分，比如JavaScript中不可访问的函数，带有不匹配元素的选择器的样式，以及CSS中总是隐藏的HTML标签。二，删除重复的。然后，我建议设置一个自动还原过程。例如，它应该删除后端服务的注释(但不是源代码)以及不包含其他信息的每个字符(如JS中的空格字符)。完成后，我们剩下的可以是文本。这意味着我们可以安全地应用压缩算法，比如GZIP(大多数浏览器能理解)。然后是缓存。浏览器第 一 次渲染页面的时候，帮助不大，但是在以后的访问中会节省很多。但关键是要记住两件事:

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

从您的角度来看，您可能希望有一种方法可以早地更新资源，而不是等待资源的到期日期。将文件的“指纹”嵌入URL会使本地缓存失效。

当然，应该为每个资源定义一个缓存策略。有些可能变化很小或根本没有变化。其他国 家变化快。其中一些包含敏感信息，而另一些可能被视为公共信息。使用“私有”指令防 止CDN缓存私有数据。Web图像也可以优化，尽管图像请求不会妨碍解析或呈现。

2.减少关键资源的总数

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

样式表

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

为了进一步改进这个过程，一些样式也可以被内联。这为我们节省了一 次到服务器的往返行程，否则将需要获取样式表。

脚本

如上所述，脚本被解析器阻止，因为它们可以改DOM和CSSOM。因此，不改变它们的脚本不应该进行块解析，从而节省我们的时间。为此，脚本标记都要标记为async或defer属性。

标记为async的脚本不会阻止DOM构造或CSSOM，因为它们可以在构建CSSOM之前执行。但是记住，内联脚本无论如何都会阻塞CSSOM，除非你把它们放在CSS之上。相反，标记为“延迟”的脚本将在页面加载结束时进行评估。因此，它们不应该影响文档(否则，将触发重新呈现)。

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

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

CRP的长度应该缩短到尽可能小的值。在某种程度上，上述方法可以做到这一点。

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

我们还没有讨论的是在文件之间重新排列代码的选项。根据新的性能概念，一个网站应该做的第 一件事就是显示ATF内容。ATF代表折叠的顶部，这是一个不需滚动就能看到的区域。因此，可以通过加载所需的样式和脚本来重新安排与呈现相关的一 切，并停止其他一 切—无论是解析还是呈现，并记得在做出更改之前和之后进行测量。

简而言之，网站性能网站优化包括网站响应的各个方面，比如缓存、设置CDN、重构、资源优化等。，但这些都是可以循序渐进的。作为一名web开发人员，您应该将这篇文章作为参考，并记得测量实验前后的性能。