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

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

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

如何对图片进行优化

第一步,控制图片大小

(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

免责声明:本站部分内容来源互联网整理,如有侵权请联系站长留言处理。

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

相关推荐

  • 网站代码优化包括哪些内容

    代码优化是页面优化的一个重要环节,也是页面优化的基础,代码优化包括:精简代码,头部优化权重标签优化以及图片优化。页面代码优化包括5大方面: 1、清理垃圾代码。 清理垃圾代码是指删除…

    2022年3月15日
  • 如何降低域名被恶意泛解析的风险

    域名被恶意泛解析是域名安全最常见的问题之一,服务商往往起到决定性作用,那么作为站点自身该做哪些工作呢?SEO从业者洪石陈管理着多个当地媒体站点,虽然他说自己是网站安全领域内的小学生…

    2022年2月7日
  • 什么是链接农场和内容农场?

    现阶段的搜索引擎算法对网站的内容和链接都很注重,所以为了套取搜索引擎流量的站长和EO人员,就抛弃网站为用户服务的本质,而为搜索引擎制造内容和链接,并发明了盛极一时的链接农场和内容农…

    2022年2月28日
  • 【SEO问答】感觉网站流量越来越少了,怎么办?

    感觉网站流量越来越少了,怎么办? 站长1: 1、分析现状与原因,确定是哪个平台,是百度还是搜狗,到底哪个流量减少的比较多(一般是百度) 2、如网站基础较差、数据量很少,那就先做好这…

    2022年3月21日
  • 外链的作用、原理和方向

    网站外链的多少和外链质量的高低,在比较大的程度上决定了这个网站权重的高低,也决定了这个网站能够从搜索引擎中获得排名和流量能力的大小。在本书前文也简单讨论过搜索引擎链接分析的内容。站…

    2022年3月16日
  • Spider再次抓取更新策略?如何提升搜索引擎抓取网页的频率

    Spider把网页抓取到木地,该网页被分析索引并参与了排名,并不意味着Spider针对该网页的工作已经结束了。现在互联网网页内容多是动态变化的,甚至有时网页会被管理者删除。搜索引擎…

    2022年2月22日
  • 飓风算法3.0详情及算法解读

    为了维护健康的移动生态,保障用户体验,保证优质站点/智能小程序能够获得合理的流量分发,百度搜索将在近期对飓风算法进行升级,上线飓风算法3.0。

    2021年11月5日
  • 网站被黑操作指南

    原文标题:网站被黑应该怎么做 — 网站被黑操作指南发布日期:2019-03-21 网站被黑,通常表现为网站中出现大量非本网站发布的类似博彩内容,或网站页面直接跳转到博彩页面。以下是…

    2021年11月5日
  • 谷歌SEO:研究关键词之前需要准备哪些工作?

    关键词研究 了解您的受众想要找到什么。 既然您已经了解了如何出现在搜索结果中,那么让我们确定在您的网站内容中定位哪些战略关键字,以及如何制作该内容以满足用户和搜索引擎的需求。 关键…

    2022年2月19日
  • 谷歌SEO:什么是元描述?如何优化网站标题标签?

    标题标签 页面的标题标签是一个描述性的 HTML 元素,用于指定特定网页的标题。它们嵌套在每个页面的 head 标记中,如下所示: <head> <title&g…

    2022年2月21日