如何以最快速度加载 H5 页面，考虑网络不佳的情况？

[skyrem]

如题，公司在做一个类似收钱吧的产品

需要用户扫一个二维码，加载微信公众号下的付款页面

页面内容是一个简单的数字键盘，用于输入付款的金额

这个过程有一个微信授权的跳转，大概 200ms 左右

服务器页面的响应大概 400ms 左右

这是正常网络的情况，但是会有弱网络的情况，比如小县城的菜市场

目前是单台服务器， 加载的 js 放了 cdn，然后还有个商家上传的 logo，压缩过

老板的问题是，为什么别人（收钱吧）在（菜市场）打开很快，而我们的很慢？

求教各位大佬，还有什么办法可以加快页面加载速度 ？

阿里云的 SLB 负载均衡+高可用的服务，感觉是为了高并发和弹性扩容设计的，用在提高加载速度上效果是否明显？

[han3sui]

模拟下弱网环境，看下各项加载，针对优化就好了吧

[genesischou]

直接做成小程序

[duduaba]

页面响应 400ms 是不是有点长了

[cyrbuzz]

在网络好的时候，页面响应要 400ms 是不是有些慢？

感觉还是先优化下这块吧，服务器端只是返回一个 HTML 需要 400ms 这问题有点大，只经过 Nginx 怎么会需要这么长时间，弱网下 400ms 还正常一些。另外 TCP 慢启动第一个 TCP 包大小是 14kb，可以想想办法优化到 14kb...

[skyrem]

@chezs66 #20
@genesischou #22
小程序就不考虑了，pwa 这个之前没听过，我去研究下

[skyrem]

@IvanLi127 #13
具体的现场我没去过，是业务人员反映的
主要是想看看还有什么地方可以改进的

[skyrem]

@3dwelcome #14
@cest #18
我查了下 http3 和 quic 需要在浏览器端开启支持，这个对于使用老旧手机的用户而言不太现实
这个 mmtls 是微信浏览器默认支持的吗？

[skyrem]

@coderfuns #23
@cyrbuzz #24
是的，服务器端还有优化的余地，主要公司一开始用了个很旧的框架，这个要改起来很麻烦

[skyrem]

@cyrbuzz #24
慢启动这个概念我也没听过，意思是 14kb 以内可以极大的减少 RTT ？

[cyrbuzz]

@skyrem

可以看下 MDN 上的说明：

https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work#tcp_%E6%85%A2%E5%BC%80%E5%A7%8B_14kb_%E8%A7%84%E5%88%99

[ishalla]

啊这个问题我也遇到了，不过我不是写代码的，而是做架构的，老板让我们想办法，CDN 都换过好几家，后来我就观察了一些别的号，发现其实可能也不是我们自己的页面慢，而是别家打开弹窗跳券。。
跳出来一个优惠券，用户有的会点有的不会点，但自然感觉不到页面加载慢了。。

[ccraohng]

全站加速。
就一个键盘，尽量不要用库。
图片用 secset 用 webp 。
加快后端响应

[towry]

打开控制台看下 network 的 timeline 是哪些部分请求太慢。