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

近期百度搜索发布一项用户行为研究报告，讲的是网站首屏在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压缩的方式来降低文件的大小。

三、页面存在额外跳转

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