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

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

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

如何对图片进行优化

第一步,控制图片大小

(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://zhanzhangpai.com/?p=1728

免责声明:本站部分内容来源互联网整理,如有侵权请联系站长删除。站长邮箱:1245911050@qq.com

(0)
上一篇 2022年3月18日 上午8:33
下一篇 2022年3月18日 上午9:35

相关推荐

  • 移动网页兼容性问题

    近期针对移动页面兼容性问题,百度内部做了专项数据评估和分析,发现一些网站的移动端页面在操作系统的不同版本下,页面浏览效果有较大差异,有些版本下存在排版异常、页面功能失效、页面不美观…

    2022年1月28日
  • 什么是链接诱饵?网站如何设置链接诱饵?

    如果你的网站换链接达到了瓶颈、群发链接已经失效、买卖链接也渐渐没有了太大的操纵空间,那么就在链接诱饵上动动脑筋吧。能够自动扩散你网站链接的方法都可以算做链接诱饵。常见的链接诱饵方式…

    2022年3月20日
  • 什么是关键词?如何用关键词做好谷歌SEO?

    关键词是人们在搜索引擎中输入的可以帮助他们找到所需内容的单词和短语。 例如,如果你想买一件新夹克,你可以在Google中输入“mens leather jacket(男士皮夹克)”…

    2022年1月17日
  • 百度站长平台工具使用手册

    关键词影响力,是百度搜索资源平台针对站点对于关键词数据分析的需求,推出的全新概念。涵盖该关键词下百度搜索可以为站点带来的全部收益指标,包括:排名、百度搜索流量、展现量等。在H5版本…

    2022年12月29日
  • 什么是网站的网状结构?

    网站的网状结构指的是网站的内部链接,比如你的每个页面都有一个随机调用文章的版块,就可以看成简单的网状结构,内页之间互相链接,如果把每个页面看成一个点,摆在一个平面上,然后用他们之间…

    2022年3月15日
  • 蓝天算法详情

    算法名称:蓝天算法算法内容:严厉打击新闻类站点售卖目录发布时间:2016-11-21原文详情: 百度持续打击新闻类站点售卖软文、目录行为,近日百度反作弊团队发现部分新闻类站点售卖目…

    2021年11月5日
  • Canonical标签是什么?Canonical标签如何使用?

    大家如有留意,在百度搜索中搜索某些关键词,经常会出现网站列表或文章分页的非第一页出现在搜索结果中,第一页却无影无踪的情况。相信普通搜索用户对此也会不满,常常需要点击搜索结果后,再点…

    2022年3月10日
  • 谷歌SEO-关键词标签:它是什么?需要使用它吗?

    关键词标签是meta标签中的一种。它可以为搜索引擎提供有关页面内容的更多信息。它可以在网页的HTML源代码中找到,并且对访问者不可见。 下面是关键词标签的示例: <meta …

    2022年2月2日
  • 百度搜索优质内容解读

    什么是优质内容? 如何生产优质内容? 如何让百度搜索选择我的内容? 说起内容生产,每个创作者都有许多“痛”和“懵”。 我们特地邀请了百度搜索产品经理佳岐,为开发者们从优化内容质量的…

    2022年12月30日
  • 网站关键词选择的十大误区

    搜索引擎是网站进行网络营销的重要平台,一方面是通过竞价广告的投放,一方面是针对网站的搜索引擎优化。竞价广告和搜索引擎优化都需要选取关键词,但是在选取关键词中存在了误区,企业往往投放…

    2022年3月15日