网站性能优化的三种策略

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

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

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

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

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

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

2. 减少关键资源的总数

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

样式表

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

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

脚本

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

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

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

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

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

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

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

总而言之，网站性能优化涵盖了网站响应能力的所有方面，例如缓存、设置 CDN、重构、资源优化等，但所有这些都可以逐步完成。作为一名网络开发人员，您应该将本文作为参考，并始终记住在实验前后衡量性能。

除非注明，否则均为未来可期SEO原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.szsinotech.com/seo_1102.html