网站页面性能优化指南

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

百度搜索对用户行为的研究表明，页面首屏的加载时间是1.5几秒钟内的页面将给用户带来流畅快捷的快速体验。最近，我们发现一些网站移动终端页面的第一个屏幕打开速度超过了1.5秒，为了方便开发者优化页面，技术特别总结了问题的主要原因和优化方法供您参考。

慢速的主要原因：

1、关键子资源耗时较严重；

2.页面有额外的跳转；

3、主文档耗时严重

慢速原因1：关键子资源耗时严重

页面打开速度优化建议：

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为缩短首屏渲染时间，在标签内。

优化CSS的使用方式

CSS它是构建渲染树的必要元素。第一次构建网页时，确保任何不必要的元素CSS所有资源都被标记为非关键资源(例如)print），确保关键尽可能减少CSS子资源数量。

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

尽早在HTML指定档中指定所有必要的关键CSS为了尽快找到浏览内核的资源link标记并发出CSS请求下载。

避免使用CSS import指令

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

慢速原因二:主文档耗时

页面打开速度优化建议：

优化和压缩资源，减少总下载文件的大小

优化和压缩资源来最大限度地减小总下载大小，来提高网页加载速度。开发者可以通过简化编码来优化主文档的大小chunk编码，服务器分chunk输出，通过GZIP压缩主文档资源。

慢速原因3：页面有额外的跳转

页面打开速度优化建议：

删除页面的额外跳转

在用户点击打开页面的过程中，一些网站可能会通过额外的跳转向用户显示最终页面。根据研究数据，单次额外跳转将退化性能约600毫秒，这可能会增加600毫秒的延迟体验，因此建议开发人员删除额外的跳转。