抖音小游戏优化首屏渲染时间和可交互时间

Creator 版本:3.8.4
目标平台:抖音小游戏

目前在抖音后台里看到的数据大概是:

首屏渲染平均时间:约 6.4 秒
游戏可交互时间:约 23 秒
首包大小:约 2.5 MB
本地包大小:约 3.45 MB
其中 cocos-js 包大小约 2.75 MB

目前项目里的 resources 资源(包括代码加载需要的预制体、关卡需要的图片、关卡配置json表,音效)已经放到了 CDN 上,本地包里主要是引擎相关代码和脚本文件。图片添加了自动图集。现在主要有两个问题:

第一,进入游戏画面的时间偏长,也就是首屏渲染时间还有点高。
第二,加载界面的等待时间比较长,尤其是新用户首次进入时,游戏可交互时间可能到 20 多秒。

当前启动流程大致如下:

加载场景本身比较小,大概 56 KB。加载场景里只有加载逻辑,没有音效,没有自定义字体,也没有动画。

进入加载页后,会根据用户状态走不同逻辑:

如果是新用户,需要预加载主玩法的预制体、第一关所需关卡配置和图片资源,然后再加载 GameScene,最后进入游戏可交互状态。

如果是老用户,只加载 GameScene,因为大部分资源本地已有缓存,所以进入速度会快很多。

目前新用户需要加载的内容大概包括:

主玩法相关预制体:约 2.6 MB
第一关所需关卡配置和图片资源:在 CDN 上
游戏主场景 GameScene:约 128 KB

因为新用户第一次没有缓存,所以首进时加载时间比较明显。现在想把游戏可交互时间尽量从 23 秒左右优化到 15 秒左右,不知道是否还有比较有效的优化方向。

我目前比较疑惑的点有几个:

  1. cocos-js 目前约 2.75 MB,这部分还有没有比较明显的优化空间?除了功能裁剪、关闭 source map、关闭 debug 之外,还有没有其他建议?

  2. 加载场景只有 56 KB,且没有音频、字体、动画资源,但首屏渲染仍然有 6 秒左右。这个时间主要会受哪些因素影响?是否和引擎初始化、cocos-js 解析执行、小游戏平台环境初始化有关?

  3. 对于新用户首次进入主玩法的情况,是否应该在加载页阶段就把第一关资源全部加载完?还是可以先进入首页/主场景,再异步加载玩法资源?目前因为新用户会自动进入第一关,所以担心延后加载会导致进入玩法时卡住。

  4. CDN 资源加载方面,有没有推荐的优化方式?比如资源拆分粒度、并发数量控制、预加载顺序、图片压缩格式、远程包缓存策略等。

  5. 如果主玩法预制体本身比较大,例如 2.6 MB 左右,有没有办法进一步拆分?比如把主玩法 UI 预制体、关卡卡牌图片、特效资源拆开加载,减少首次进入必须等待的内容。

  6. 抖音小游戏里,“首屏渲染时间”和“游戏可交互时间”这两个指标分别应该重点从哪些方面优化?有没有比较推荐的排查方法?

目前我的理解是:

首屏渲染可能主要受引擎初始化、cocos-js 加载和解析、启动场景加载影响。
游戏可交互时间主要受主玩法预制体、首关资源、CDN 下载、资源反序列化和图片解码影响。

想请教一下大家,这种情况一般应该优先从哪几个方向入手?有没有比较实际的优化经验可以参考?

部分设置如下:


抖音下载管线比微信少一半,所以加载慢还可以检查一下碎图数量,看看是不是需要合图

已经合过图了,现在整个remote文件夹里的文件数量是三百多个,没有合图之前是三千多个

精简思路

第一步

assets 不留,能放子包放子包(subpackages)

1

第二步

忽略子包subpackages ,剩下这些内容,考虑如何减少他们的文件数

2

第三步

只保留抖音官方小游戏文件结构

将内容都合并到 game.js 、game.json、project.config.josn

image

大功告成

现在只有这些文件,assets文件和分包都没有
image

在tt开发者工具中,清完全部缓存后,看看network的时间线,是不是异步处理太久了、亦或者加载太多了。cpu文件总数量300+不算很多
这23s不太像纯加载耗时,太久了

看network,发现一个不知道是什么的json文件2.5MB,花了2.08s,字体文件7.1MB,花了3.61s,背景音乐1.8MB,花了1.21秒,加载一张图集花了1.33s,其他大部分都是毫秒级的了,但我看不出来哪些是异步的哪些是同步的

字体文件和背景音乐会不会太大了点,图集加载花了1.33秒感觉也不小,该压缩压缩该剪切剪切,json估计就是首场景合并json了吧,那个只能说看你场景多复杂了