江苏省|网站页面性能优化指南江苏省

为了更好地提升用户的浏览体验，《移动落地页体验白皮书4.0》中规定：页面的首屏内容应在1.5秒内加载完成。

百度搜索对用户行为的研究表明，页面首屏的加载时间在1.5秒以内的页面，会带给用户流畅快捷的极速体验。近期我们发现有部分站点移动端页面首屏打开速度多于1.5秒，为了方便开发者对页面进行优化，技术特地总结了问题的主要原因以及优化方法给大家进行参考。
慢速主要原因：
1、关键子资源耗时较严重；
2、页面存在额外跳转；
3、主文档耗时较为严重
慢速原因一：关键子资源耗时较严重
页面打开速度优化建议：
1、清除不必要的资源，避免进行不必要的下载
站点应当定期审核网页上的资源是否是必需的，并评估该资源的价值与性能影响。网页中往往会包含一些冗余资源，影响网页性能的同时还无法给网页带来价值，可以考虑清除不必要的资源，避免不必要的资源下载带来性能上的消耗。
清除阻塞渲染的JS和CSS
如果要以最快速度完成首屏渲染，需要最大限度地减少网页上关键JS/CSS子资源的数量，并尽可能清除这些资源，最大限度地减少下载量。
2、使用代码拆分减少JS负载
有的网站可能将所有的JS组合成一个大型的组合包，以这种方式加载的话页面性能会受到影响。长时间运行的JS可能会阻塞主线程，这时可以考虑使用requestAnimationFrame() 或 requestIdleCallback() 来进行优化。
根据不同的业务需求，开发者可以将JS中首屏的关键代码拆分出来，这样可以提前加载执行首屏中必需的少量JS代码，从而缩短页面的加载时间，其余的可以按需加载或者置后加载，同时建议开发者将JS优先放在首屏渲染完成之后，放在body闭标签前面。
3、优化阻塞渲染的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
为了最大限度减少内核渲染网页的工作量，建议开发者延迟所有非必需的、对构建首屏渲染无关紧要的JS脚本，将JS优先放在body闭标签处。
避免长时间运行的JS
运行时间长的JS会阻塞构建 DOM、CSSOM以及网页的渲染，所以任何对首屏渲染无关紧要的初始化逻辑和功能都应延后执行。如果需要运行较长的初始化序列，请考虑将它们拆分为若干个阶段，以便浏览内核可以间隔处理其它的渲染任务。
4、优化阻塞渲染的CSS
默认情况下，关键CSS子资源是会阻塞内核渲染的，请务必精简网页的CSS资源，同时需要将CSS尽快地完成下载，关键CSS子资源优先放在head标签内，以便缩短首屏渲染的时间。