页面加载秒打开,留住用户快人一步(官方推荐页面优化方案)

百度搜索对用户行为的研究表明，用户对于网站页面的打开加载速度要求越来越高，首屏的加载时间过长会加速用户的流失。

通过调研，小编发现部分网站站点和智能小程序页面加载速度慢的主要原因分别是页面关键子资源耗时严重和图片体积过大。为了方便开发者进行页面加载性能优化，小编特地邀请技术同学总结了页面加载速度的优化方法给大家参考。

【站点页面关键子资源耗时严重的优化方案】

1.清除不必要的资源及阻塞渲染的JS/CSS

页面中往往会包含一些冗余资源，影响性能的同时还无法给用户带来价值，所以站点应当定期检查并清除页面上不必要的资源，避免资源下载带来性能上的消耗。

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

2.通过代码拆分减少JS负载

开发者可以根据不同的业务需求，将JS中首屏的关键代码拆分出来，以便于提前加载首屏中必要的少量JS代码，从而缩短页面的加载时间。其余的JS代码可以按需加载或者置后加载，同时建议开发者将JS优先放在首屏渲染完成之后，body闭标签之前。

3.优化阻塞渲染的JS及JS的使用方式

JS允许我们修改页面的同时也会阻止DOM构建，阻塞页面渲染。开发者可以优先考虑使用defer的方式，其次是async方式让页面的JS进行异步执行，并去除关键渲染路径中任何不必要的JS。

在默认情况下，JS资源会阻塞解析，强制等待CSSOM并暂停DOM的构建从而大大增加首屏渲染的时间。异步JS资源则不会阻塞文档解析器，开发者可以考虑在首屏渲染后异步加载脚本。

4.优化阻塞渲染的CSS及CSS的使用方式

默认情况下，关键CSS子资源会阻塞内核的渲染，建议开发者精简页面中的CSS资源，尽快将CSS完成下载，并把关键CSS子资源优先放在head标签内，以便缩短首屏渲染的时间。

CSS是构建渲染树的必备元素，首次构建页面时，开发者应确保将任何非必需的CSS资源都标记为非关键资源（比如print），并尽可能减少关键CSS子资源的数量。

【百度智能小程序图片体积过大的优化方案】

1.控制图片大小

（1）针对本地图片

本地图片过大会导致小程序包体积过大，加载时间变长，因此开发者需尽可能地压缩图片大小：

● 对于不需要透明格式的图片，推荐采用 jpeg 格式来代替 png 格式

● 安卓端建议使用webp的图片格式。webp格式在有损压缩的情况下，肉眼不易察觉出压缩前后的变化，但是图片体积却会大大减小（注意：iOS 百度 App 版本 < 11.22 时不支持webp格式）

● 确保小程序包内没有冗余和无用的图片资源

● 延迟加载不重要的图片，并在关键图片渲染完成后再加载后续内容

● 使用工具对图片进行压缩

（2）针对网络图片

在智能小程序中，对于部署到 CDN 上的网络图片，也需要进行压缩：

● 通过CDN 静态资源服务器获取图片资源，并添加图片压缩规则

● 使用图片压缩工具对图片进行压缩后，再上传至 CDN

2.开启图片懒加载

智能小程序的image组件提供了lazy-load属性，开发者可以开启图片的懒加载功能进行优化：

<image lazy-load="true"/>

3.谨慎使用耗费性能的属性

image组件mode属性提供了 13 种模式，widthFix模式是其中一种。由于widthFix模式需要动态计算图片的宽度，导致页面重绘，因此应谨慎使用mode属性的widthFix模式。

4.使用渐进式 JPEG 来优化用户体验

打开渐进式 JPEG 时页面会先展示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以预览到图片的轮廓，一定程度上可以提升用户体验。

以上便是百度搜索资源平台为大家整理的有关网站站点和百度智能小程序页面加载速度的优化方法啦，你学会了吗～

原文作者：百度搜索资源团队&认真的胡小鱼

原文链接：https://mp.weixin.qq.com/s/XKt34jRFYX85Ex4oLeUvXg