当前位置: 首页> 优化经验> 网站页面性能优化注意事项
网站页面性能优化注意事项
发布日期:2020-05-14 11:00:00

速度慢的主要原因:

缓慢的原因1:关键的子资源需要更多的时间

页面打开速度优化建议:

一、消除不必要的资源并避免不必要的下载

网站应定期检查网页上的资源是否必要,并评估资源的价值和性能影响。网页中往往含有一些冗余的资源,这些资源在影响网页性能的同时,又不能给网页带来价值。我们可以考虑消除不必要的资源,以避免不必要的资源下载导致的性能消耗。

如果你想以最快的速度完成第一个屏幕渲染,你需要最小化网页上的JS/CSS子资源的数量,并尽可能减少这些资源的下载量。

一些网站可能会将所有的JS组合成一个大的包,如果以这种方式加载,页面性能将受到影响。长时间运行的JS可能会阻塞主线程,因此可以考虑使用requestanimationframe()或requestidlecallback()进行优化。

根据不同的业务需求,开发人员可以将JS中第一个屏幕的关键代码进行拆分,以便提前加载和执行第一个屏幕所需的少量JS代码,从而缩短页面的加载时间。其余的可以按需加载或稍后加载。同时,建议开发人员在第一次屏幕渲染后优先使用JS,并将其放在体前封闭标签。

JS允许我们修改网页,但它也阻止了DOM的构建和网页的呈现。默认情况下,JS的执行会阻塞内核渲染:无论是使用外部链还是嵌入式JS,当文档中遇到JS脚本时,都会暂停DOM的构建,将控制权交给JS,在执行完脚本后继续构建DOM来处理剩余的HTML文档。如果是外部JS文件,则需要停止浏览内核,等待从磁盘、缓存或远程服务器获取JS脚本,这可能会给关键渲染路径增加数十到数百毫秒的延迟。

为了获得最佳性能,我们可以使页面的JS异步执行。建议优先使用defer,然后使用async,并删除关键呈现路径中任何不必要的JS。

优化JS的使用,优先使用异步JS资源

默认情况下,JS资源块解析,强制cssom等待并暂停DOM构建,从而大大延迟了第一个屏幕的呈现。异步JS资源不会阻塞文档解析器。如果脚本可以使用defer/async属性,则意味着第一次屏幕渲染不需要它。您可以考虑在第一次屏幕呈现之后异步加载脚本。

为了尽可能减少内核渲染网页的工作量,建议开发人员延迟所有对构建第一个屏幕渲染不重要的不必要的JS脚本,并在body closed label中优先使用JS。

长时间运行的JS会阻塞DOM、cssom和web页面的呈现,因此任何与第一个屏幕呈现无关的初始化逻辑和函数都应该延迟。如果需要运行长的初始化序列,请考虑将它们分成几个阶段,以便浏览内核可以每隔一段时间处理其他渲染任务。

默认情况下,关键CSS子资源将阻止内核呈现。请务必简化网页的CSS资源。同时,你需要尽快下载CSS。关键CSS子资源首先放置在head标签中,以缩短第一个屏幕的呈现时间。

CSS是构建呈现树的必要元素。首次构建网页时,请确保将任何不必要的CSS资源标记为非关键资源(如打印),并确保将关键CSS子资源的数量最小化。

尽早在HTML文档中指定所有必要的关键CSS资源,以便浏览内核能够尽早发现链接标签并发出CSS请求下载。

一个样式表可以使用cssimport指令从另一个样式表文件导入规则。但是,应该避免使用这些指令,因为它们会增加关键路径中的往返次数,并影响第一个屏幕渲染性能。

慢原因2:主文档耗时

页面打开速度优化建议:

优化和压缩资源以最小化总下载大小并提高页面加载速度。开发人员可以考虑通过简化编码来优化主文档的大小。同时,它们可以使用块编码、服务器块输出和gzip压缩主文档资源。

缓慢的原因3:页面有额外的跳跃

页面打开速度优化建议:

在用户点击打开页面的过程中,一些网站可能会通过附加跳转向用户显示最终页面。根据调查数据,一次额外的跳跃将使性能降低约600毫秒,这可能会增加关键渲染路径600毫秒的延迟体验。因此,建议开发人员删除额外的跳转。

在线咨询 电话咨询