关于前端:页面加载秒打开留住用户快人一步官方推荐页面优化方案

百度搜寻对用户行为的钻研表明，用户对于网站页面的关上加载速度要求越来越高，首屏的加载工夫过长会减速用户的散失。

通过调研，小编发现局部网站站点和智能小程序页面加载速度慢的次要起因别离是页面要害子资源耗时重大和图片体积过大。为了不便开发者进行页面加载性能优化，小编顺便邀请技术同学总结了页面加载速度的优化办法给大家参考。

【站点页面要害子资源耗时重大的优化计划】

页面中往往会蕴含一些冗余资源，影响性能的同时还无奈给用户带来价值，所以站点该当定期检查并革除页面上不必要的资源，防止资源下载带来性能上的耗费。

如果要以最快的速度实现首屏的渲染，开发者还须要最大限度地缩小页面上要害JS/CSS子资源的数量，并尽可能革除这些资源，最大限度地缩小下载量。

开发者能够依据不同的业务需要，将JS中首屏的要害代码拆分进去，以便于提前加载首屏中必要的大量JS代码，从而缩短页面的加载工夫。其余的JS代码能够按需加载或者置后加载，同时倡议开发者将JS优先放在首屏渲染实现之后，body闭标签之前。

JS容许咱们批改页面的同时也会阻止DOM构建，阻塞页面渲染。开发者能够优先思考应用defer的形式，其次是async形式让页面的JS进行异步执行，并去除要害渲染门路中任何不必要的JS。

在默认状况下，JS资源会阻塞解析，强制期待CSSOM并暂停DOM的构建从而大大增加首屏渲染的工夫。异步JS资源则不会阻塞文档解析器，开发者能够思考在首屏渲染后异步加载脚本。

默认状况下，要害CSS子资源会阻塞内核的渲染，倡议开发者精简页面中的CSS资源，尽快将CSS实现下载，并把要害CSS子资源优先放在head标签内，以便缩短首屏渲染的工夫。

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

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

● 对于不须要通明格局的图片，举荐采纳 jpeg 格局来代替 png 格局

● 安卓端倡议应用webp的图片格式。webp格局在有损压缩的状况下，肉眼不易察觉出压缩前后的变动，然而图片体积却会大大减小（留神：iOS 百度 App 版本 < 11.22 时不反对webp格局）

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

● 提早加载不重要的图片，并在要害图片渲染实现后再加载后续内容

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

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

● 通过CDN 动态资源服务器获取图片资源，并增加图片压缩规定

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

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

<image lazy-load="true"/>

image组件mode属性提供了 13 种模式，widthFix模式是其中一种。因为widthFix模式须要动静计算图片的宽度，导致页面重绘，因而应审慎应用mode属性的widthFix模式。

关上渐进式 JPEG 时页面会先展现整个图片的含糊轮廓，随着扫描次数的减少，图片变得越来越清晰。这种格局的次要长处是在网络较慢的状况下，能够预览到图片的轮廓，肯定水平上能够晋升用户体验。

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

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

原文链接：https://www.kuaigrowth.com/article/20.html