一般情况下,当我们打开一个浏览页面时,页面加载越快,我们的体验就会越好。如果打开一个目标页面需要很长时间,就会导致体验不佳。为了方便开发者在开发过程中优化页面,总结了以下几点。

一、关键子资源是耗时较严重

1、清除不必要的资源,避免不必要的下载

定期检查网页上的资源是否必要,并评估资源的价值和性能影响。网页往往包含一些冗余资源,这不仅会影响网页的性能,而且不会给网页带来任何价值。可以考虑去掉不必要的资源,避免不必要的资源下载带来的性能消耗。

2、使用代码分割来减少JS负载

有些网站可能会把所有的JS合并成一个大的包,这样加载会影响页面性能。长时间运行的JS可能会阻塞主线程。开发人员可以根据不同的业务需求,对JS的前台页面关键代码进行拆分,使得执行前台页面所必需的少量JS代码可以提前加载,从而缩短页面的加载时间,其余的可以按需加载或者后加载。同时,开发者在首页渲染后优先使用JS,放在body闭标签前面。

3、优化阻塞渲染的JS

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

为了达到最佳性能,可以异步执行页面的JS。建议优先使用defer方法,其次是async方法,并删除关键渲染路径中任何不必要的JS。

如何提升网页性能SEO优化插图

二、延迟解析加载JS

为了尽量减少内核渲染网页的工作量,建议开发者延迟所有不必要的对构建首屏渲染不重要的JS脚本,在body闭标签处优先使用JS。

三、避免长时间运行的JS

长时间运行的JS会阻塞DOM、CSSOM的构造和网页的渲染,所以任何对首屏渲染不重要的初始化逻辑和函数都要延迟。如果你需要运行一个很长的初始化序列,可以考虑把它们分成几个阶段,这样浏览内核就可以每隔一段时间处理其他渲染任务。

四、优化阻塞渲染的CSS

默认情况下,关键的CSS子资源会阻止内核渲染。要精简网页的CSS资源,尽快下载CSS。关键的CSS子资源要先放在head标签里,这样可以缩短第一页的渲染时间。

五、优化CSS的使用

CSS是构建渲染树的基本元素。第一次构建网页时,一定要将任何不必要的CSS资源标记为非关键资源(如print),一定要尽量减少关键CSS子资源的数量。

六、将键CSS放在文档head标签中

尽早在HTML文档中指定所有需要的关键CSS资源,让浏览内核尽早找到链接标签,发出CSS请求下载。

七、避免使用CSS import指令

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

八、有额外的页面跳转,删除页面上多余的跳转

在用户点击到打开页面的过程中,有些网站可能会经过额外的跳转,将最终页面展现给用户。根据调查数据,单个额外的跳转将使性能下降约600毫秒,这可能会给关键的渲染路径增加600毫秒的延迟体验,因此建议开发者移除额外的跳转。

九、主文档耗时

优化和压缩资源并且减少了总的下载文件大小,并对资源进行优化压缩,使总下载量最小,从而提高网页加载速度。开发者可以考虑通过简化编码来优化主文档的大小,同时可以采用组块编码,将服务器分成组块输出,通过GZIP压缩主文档资源。