快速页面转换对于用户如何看待渐进式 Web 应用 (PWA) 性能至关重要。即使网速较慢,过渡效果也应简洁明快。
建议
如需查找缓慢的页面转换效果,请使用模拟的慢速网络浏览您的 Web 应用。若要在 Chrome 中执行此操作,请执行以下操作:
[comment]: <>(前两个列表项是来自 web.dev 的短代码,但它并没有从英语翻译成任何语言。)
1. 按 Control+Shift+J
(在 Mac 上,按 Command+Option+J
)即可打开开发者工具。
2. 点击网络标签页。
3. 在节流下拉列表中,选择慢速 3G。
每次点按应用中的链接或按钮时,请检查网页是否通过以下两种方式之一立即响应:
- 页面会立即转换到下一个屏幕,并在等待来自网络的内容时显示加载屏幕。
- 当应用等待网络响应时,页面会显示一个加载指示器。
如果您使用的是客户端渲染的单页应用,请立即将用户转换到下一页并显示骨架屏幕。 请确保在加载其余内容的同时立即显示网页标题或缩略图等已有的内容。