首页- 百度SEO技巧- 网站性能优化的三种策略

网站性能优化的三种策略

来源:seo优化 发布时间:2022-08-06 14:00:00

性能优化是一个复杂的主题,涉及许多技能。如何通过优化网页性能来改善用户体验?今天我将介绍一些常用的方法。

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

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

从您的角度来看,您可能需要一种更早更新资源的方法,而不是等待资源的过期日期。将文件的“指纹”嵌入URL以使本地缓存无效。

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

“关键”仅指正确呈现网页所需的资源。因此,我们可以跳过流程中未直接涉及的所有样式以及所有脚本。

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

为了进一步改进流程,还可以内联一些样式。这为我们节省了至少一次到服务器的往返,否则获取样式表就需要这样做。

如上所述,解析器会阻止脚本,因为它们可以更改DOM和cssom。因此,不改变它们的脚本不应该被阻塞解析,从而节省我们的时间。要实现这一点,所有脚本标记都必须标记为async或defer属性。

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

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

最后,CRP长度应减少到尽可能低的值。在某种程度上,上述方法可以做到这一点。

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

我们没有讨论的是在文件之间重新排列代码的选项。根据性能概念,网站应该做的首件事就是显示ATF内容。ATF表示折叠上方的区域,无需滚动即可立即看到。因此,通过首先加载所需的样式和脚本来重新安排与渲染相关的所有内容,其他所有内容都将停止—既不进行解析也不进行渲染,并且始终记住在进行更改之前和之后进行测量。

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

文章标签:重庆网站优化策略

Copyright © 2015-2020. 未经许可,不可拷贝或镜像 pasun.cn