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

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

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

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

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://www.kuaigrowth.com/article/20.html