《移动落地页体验白皮书4.0》之页面首屏打开速度优化

　　《移动落地页体验白皮书4.0》之页面首屏打开速度优化

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

　　百度搜索对用户行为的研究表明，首屏加载时间小于1.5秒的页面会给用户带来流畅快速的体验。近期发现部分网站部分手机页面首屏打开速度比1.5秒还快。为方便开发者对页面进行优化，技术特总结了问题的主要原因及优化方法，供大家参考。

　　速度慢的主要原因：

　　1、Key 子资源比较耗时；

　　2、页面有额外跳转；

　　3、主文档需要很多时间

　　速度慢的原因之一：关键子资源耗时更严重

　　

　　页面打开速度优化建议：

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

　　网站应定期审查网页上的资源是否必要，并评估资源的价值和性能影响。网页往往收录一些冗余资源，影响网页的性能，无法为网页带来价值。可以考虑移除不必要的资源，避免不必要的资源下载导致性能消耗。

　　移除阻塞渲染的 JS 和 CSS

　　如果想以最快的速度完成首屏渲染，就需要尽量减少网页上关键的JS/CSS子资源的数量，并尽可能地清除这些资源，以尽量减少下载量。

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

　　有些网站可能会将所有的JS组合成一个大包。如果这样加载，页面性能会受到影响。长时间运行的JS可能会阻塞主线程，此时可以考虑使用requestAnimationFrame()或者requestIdleCallback()进行优化。

　　开发者可以根据不同的业务需求，在JS中拆分首屏的关键代码，让首屏所需的少量JS代码提前加载执行，从而缩短首屏的加载时间页面，其余的可以按需加载或者加载后加载，建议开发者优先在第一屏渲染完成之后，并且在关闭的body标签之前使用JS。

　　3、Optimize 阻止渲染的 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脚本，并在body结束标签中优先考虑JS。

　　避免长时间运行的 JS

　　长时间运行的 JS 会阻塞 DOM 的构建、CSSOM 和网页的渲染，所以任何对首屏渲染不重要的初始化逻辑和函数都应该延迟。如果您需要运行较长的初始化序列，请考虑将它们拆分为几个阶段，以便浏览内核可以间隔处理其他渲染任务。

　　4、优化 CSS 以阻止渲染

　　默认情况下，关键 CSS 子资源将阻止内核渲染。请务必精简网页的CSS资源。同时，您需要尽快下载CSS。关键 CSS 子资源优先在 head 标签中，以缩短首屏。渲染时间。

　　优化CSS的使用

　　CSS 是构建渲染树的基本元素。首次构建网页时，请务必将任何非必要的 CSS 资源标记为非关键资源（如打印），并确保尽可能减少关键 CSS 子资源的数量。

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

　　尽早在 HTML 文档中指定所有必要的关键 CSS 资源，以便浏览内核尽快找到链接标签并发出 CSS 请求下载。

　　避免使用 CSS 导入指令

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

　　速度慢的第二个原因：主文档耗时

　　页面打开速度优化建议：

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

　　优化和压缩资源以最小化总下载大小并提高网页加载速度。开发者可以考虑简化编码以优化主文档的大小。同时可以使用chunk编码，服务器可以输出chunk，主要文件资源可以通过GZIP压缩。

　　速度慢的第三个原因：页面有多余的跳转

　　页面打开速度优化建议：

　　去除多余的页面跳转

　　从用户的点击到页面的打开，一些网站在最终页面显示给用户之前可能会经历额外的跳转。根据研究数据，单次额外跳转会使性能下降约600毫秒，这可能会给关键渲染路径增加600毫秒的延迟体验，因此建议开发者移除额外跳转。