百度搜寻对用户行为的钻研表明，用户对于网站页面的关上加载速度要求越来越高，首屏的加载工夫过长会减速用户的散失。
通过调研，小编发现局部网站站点和智能小程序页面加载速度慢的次要起因别离是页面要害子资源耗时重大和图片体积过大。为了不便开发者进行页面加载性能优化，小编顺便邀请技术同学总结了页面加载速度的优化办法给大家参考。
【站点页面要害子资源耗时重大的优化计划】
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