干货,教你从这几个方面提升网站首屏加载速度?

干货,教你从这几个方面提升网站首屏加载速度?

近期百度搜索发布一项用户行为研究报告,讲的是网站首屏在1秒内加载完成,能极大地提升用户浏览体验,近期大兵发现很多站点首屏加载时间都超过了1秒,为此,特地为大家总结了影响网站首屏加载速的原因及优化方法给大家,供大家参考。

影响网站首屏加载时间的原因:

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

1、网站页面加载速度优化建议:
1)清除影响网站加载速度的JS/CSS资源

清除网站页面中不必要的JS/CSS资源,避免每次在打开网站时不断重复加载这些资源,影响网站速度,建议站长定期审核网站上这些资源是否有必要存在,并评估这些资源的价值和对网站性能的影响。
如果你想要1秒内完成网站首屏加载,就必须要减少网站页面里的JS/CSS资源,最大限度的减少这些资源的下载量。

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

网站长时间运行JS资源,很有可能会导致主线程阻塞,此时建议大家考虑使用requestAnimationFrame() 或 requestIdleCallback() 标签来进行优化。
根据不同的用户需求,建议站长们拆分首屏中的JS代码,这样可以提前加载首屏中必须的少量JS代码,达到缩短首页加载时间的目的,剩下的JS代码按需要加载或置后加载,同时建议将JS代码放于首屏加载完成后,简单地讲就是放于body闭标签前面。

3、优化阻塞渲染的JS

为了实现网站速度的最佳性能,可将JS异步执行,优先考虑defer方式,其次是async方式,去除关键渲染路径中任何不必要的JS资源。

1)优先使用异步JS资源

通常情况下,JS资源会阻断页面解析,强制等待CSSOM并暂停DOM构建,从而导致延长了网站首屏的加载时间。
如果使用JS异步执行,就不会出现这种情况,如果脚本属性为defer/async,也就意味着这些JS资源并非是网站首屏加载所必需的,可以考虑将这些JS资源进行置后加载。

2)延迟解析加载JS

为了减少网站页面渲染的工作量,对首屏演染无关的JS资源设置延迟加载非常有必要,将这些JS资源放于body闭标签处。

3)避免长时间运行的JS

JS运行时间过长会阻塞构建DOM、CSSOM及延长网页的渲染时间,所以,对于任何影响首屏渲染的JS资源都应设置置后加载。
如果确实需要加载较长时间的JS资源,建议大家将它们分成若干阶段,以便于浏览器内核可以间隔处理其它的渲染文件。

4)优化阻塞渲染的CSS

CSS子资源,默认情况下是会阻塞网页渲染的,因此,建议大家一定要精简CSS资源,同时要将必要的CSS资源尽快完成加载,其它的CSS资源放于head标签内于,以便于缩短网站首屏的加载时间。

(1)优化CSS使用方式

CSS是网站渲染的必备资源,网站首屏在渲染时,要确保非必要CSS资源都要标记成为非关键资源(比如print),而且还要确保尽可能减少CSS子资源的数量。

(2)将关键CSS放在文档head标签内

html文档中要尽早指定必要的CSS资源,以便于浏览器内核可以尽早地识别到link标记并向CSS资源发出加载请求。

(3)避免使用CSS import指令

一个CSS样式表可以通过import指令调用另一外样式表的内容,不过不建议大家使用这个指令,因为这会增加CSS资源加载的往返次数,增加首屏的加载时间。

二、主文档耗时

1)优化和压缩资源,减小总下载文件大小
优化和压缩资源,尽可能地减小样式资源的文件大小,来提高网站的加载速度,大家可以考虑通过简化编码的方式来优化资源文件的大小,还可以通过采用chunk编码和chunk输出方式,以及通过GZIP压缩的方式来降低文件的大小。

三、页面存在额外跳转

用户从点击到打开网站的这个过程,某些网站可能要经过跳转才会将页面呈现在用户眼前,这样也会延长网站页面的加载进间,因此,建议大家去除网站中跳转路径。

原创文章:《干货,教你从这几个方面提升网站首屏加载速度?》,作者:林云SEO,如若转载,请注明原文及出处:https://www.tang-seo.com/10523.html

发表评论

登录后才能评论