搜索引擎 2022年03月18日
0 收藏 0 点赞 426 浏览 995 个字

谁在影响小程序页面的加载速度

在智能小程序开发的过程中,经常需要引入图片资源,如果图片使用不当(图片数量过多、体积过大的图片),在加载时会消耗更多的系统资源,从而影响整个页面的加载时长,因此做好图片优化非常重要。

如何对图片进行优化

第一步,控制图片大小

(1)针对本地图片

由于放置在本地的图片会被直接打包到小程序包内,图片过大会导致包体积过大,加载时间变长,同时图片过大也会导致渲染时间变长,因此开发者需尽可能压缩图片的大小。

开发者可以按照以下思路来优化图片:

  • 对于不需要透明格式的图片,推荐采用 JPEG 格式来代替 PNG格式。
  • 安卓端可使用WebP的图片格式。WebP图片格式在有损压缩的情况下,肉眼不易察觉出压缩前后的变化,但是体积却能明显缩小。
  • (注意:iOS 系统下百度 App 版本 < 11.22 时不支持WebP格式)。
  • 确保小程序包内无冗余和无用的图片资源。
  • 注意默认情况下会加载,但可能之后永远不会渲染的图片,例如“轮播图”,“手风琴”和“图片画廊”。
  • 为了缩短渲染关键图片所需的时间,可以延迟加载不太重要的图片,并在关键图片渲染完成后再加载后续内容。
  • 使用工具对图片进行压缩。

(2)针对网络图片

在智能小程序中,除了小程序的ICON,其他基本都会部署到 CDN 上,对于这样的网络图片,也需要进行压缩。

开发者可以按照以下思路来压缩图片:

  • 通过 CDN 静态资源服务器获取图片资源,并添加图片压缩规则。
  • 使用压缩工具对图片进行压缩后,再上传至 CDN。

第二步:开启图片懒加载

开发者可以使用懒加载优化小程序。智能小程序的image组件提供了lazy-load属性,可以开启图片的懒加载功能:

百度智能小程序的图片怎样优化?如何提升百度小程序页面加载速度?

第三步:谨慎使用耗费性能的属性

image组件的mode属性提供了 13 种模式,其中widthFix模式是其中一种,作用是保持图片宽度不变,高度自动变化,并保持宽高比不变。由于widthFix模式需要动态计算图片的宽度,导致页面的重绘,因此应谨慎使用mode属性中的widthFix模式。

第四步:使用渐进式 JPEG 来优化用户体验

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

以上就是优化小程序页面的图片来提升加载速度的主要方案啦,如果你的小程序页面也存在图片过大的问题,那就快按照以上方法优化下吧~

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.mizhanw.com/blog/seo/3015.html

相关推荐
百度搜索持续打击盗版网文站点公告
发布日期:2023-04-11 百度公司高度重视知识产权保护。近期,百度搜索通过主动摸排,并结合版权方的投诉与反馈,发现部分站点内存在大量涉…
日期:2023-04-14 点赞:0 阅读:320
Google 搜索关于 AI 生成内容的指南
长久以来,Google 一直坚信 AI 蕴含巨大的变革力量,能够提升我们提供实用信息的能力。这篇博文进一步介绍了 AI 生成的内容如何融入我…
日期:2023-03-02 点赞:0 阅读:900
如何增加蜘蛛爬取以及高价值url的发现!
前言: 本文主要增加蜘蛛爬取以及高价值url发现,而非友链外链操作,也可以称低价值url过滤,从而增加蜘蛛爬取。 蜘蛛是受到抓取系统调度影响…
日期:2023-01-31 点赞:0 阅读:635
经常被采集的技术层面处理方法
小站新站被采集,自己网站没收录或者没排名,被权重网站采集,而变成了别人的嫁衣,反馈又没有实质性可以证明自己的内容。注意:即使按照下面的说法做…
日期:2023-01-10 点赞:0 阅读:851
网站被黑处理以及查找本身存在后门方法!
一、网站被黑主要有三个原因造成,如下图。“2.服务器问题”以及“3.环境问题”出现的概率很少,主要讲讲“1.网站问题”。 二、网站存在后门通…
日期:2023-01-10 点赞:0 阅读:833
网站死链处理指南
直播回看地址:http://live.baidu.com/m/media/pc … 937643&source=h5pr…
日期:2023-01-10 点赞:0 阅读:371
发表评论
暂无评论

还没有评论呢,快来抢沙发~