创新互联百度小程序教程:优化重点页面

  • 优化重点页面
    • 了解 fmp 的计算方式
      • 整体 fmp 计算公式
      • 需要注意的特殊情况
    • 找到重点页面
      • 步骤1:分析小程序入口页面是哪些
      • 步骤2:对待优化的页面分类
    • 代码优化

    优化重点页面

    了解 fmp 的计算方式

    在我们要优化页面提升 fmp 之前,需要先了解下 fmp 是如何计算的。从前文小程序的启动流程得知 fmp 的起终范围,需要注意的是:

    创新互联专注于企业网络营销推广、网站重做改版、二七网站定制设计、自适应品牌网站建设、H5网站设计商城网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为二七等各大城市提供网站开发制作服务。

    • 在小程序中 a 页面跳转 b 页面这种情况,不会被计算到 fmp 中。fmp 只适用于从小程序外部调起小程序并打开页面的场景(冷启动)。
    • 渲染完首屏内容后,系统内核就会打 fmp 的点,不会等到把整个页面都渲染完成再打点,所以提升 fmp 的关键就是想办法尽早先渲染出首屏需要的内容,并延后其他内容的渲染。

    整体 fmp 计算公式

    整体 fmp 是通过将小程序每个页面的 fmp 值做排序,选取80分位的 fmp 值。我们从开发者平台看到的上屏时长,是通过这种计算方式得出的整体 fmp 值,后续对单页 fmp 的数据,也会开放出来。

    需要注意的特殊情况

    • 白屏:是指因为某种原因,页面6s内没有展示内容,则被判为白屏,此时不会被记录到 fmp 中
    • 空白页面调起 NA 页:比如进入页面后没有内容渲染,直接调起某些 NA 功能页(如刷脸功能),此时不会被记录到 fmp 中
    • 骨架屏:超过一屏幕高度的骨架屏,也不会被当做首屏完成来记录 fmp

    找到重点页面

    步骤1:分析小程序入口页面是哪些

    我们需要找到入口访问量大的页面,这些是影响整体 fmp 的重点页面。从开发者平台中找到目标小程序的【数据分析-行为分析】,按入口页次数排序后,我们就可以看到重点页面。
    重点页面的数量,不同的小程序是不同的,需要从排序后的数据中具体分析。比如,可以计算出占整体 fmp 的90%的页面都有哪些,这些页面都是重点页面。

    步骤2:对待优化的页面分类

    从上一步中,我们分析出了重点页面,现在可以对待优化的页面大致分一下类,这样可以更准确的预估页面的优化收益。一般会分为几种:

    • 内容超出首屏的页面,按常规手段分析即可,一般优化空间较大
    • 内容不足首屏的页面,且页面是直接渲染页面,不需要 setData ,即 fcp 与 fmp 很接近,一般优化空间不大
    • webview 嵌套 h5 的页面,fmp 主要以 h5 渲染完成为准,基本没有优化空间

    代码优化

    除了前文中提到的各种优化手段外,代码优化中还需要注意:

    • 去掉页面渲染过程中没必要的 setTimeout
    • 对每次调用结果都不变的同步端能力,缓存其结果,可考虑存在 storage 中
    • 检查页面中引入的三方代码,可能会存在影响性能的问题

    分享标题:创新互联百度小程序教程:优化重点页面
    网站地址:http://www.hantingmc.com/qtweb/news41/93341.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联