为什么?
您可能已经听说了渐进式 Web 应用技术能为您的网站带来的所有好处。您可能会想要直接添加 PWA 功能。这是可能的,但若能先部署“支持 PWA”效果会更好。
再多的 PWA 魔法都无法修复阻塞 JavaScript 或图片膨胀等问题。PWA 需要坚实的基础
那么,如何检查网站的运行状况呢?第一步是进行网站审核:客观地审核哪些方面做得不错,哪些方面还有改进空间(以及如何改进)。
审核网站或应用将帮助您打造弹性佳、高性能体验,并凸显只需最少签核即可实现的速效方案。审核还为您提供了数据驱动型开发基准。更改是否让事情变得更好?您的网站与竞争对手相比如何?您将获得能够确定工作优先级的指标,并在做出改进后获得确凿的证据。
如果您只有 5 分钟的时间...
在首页上运行 Lighthouse 并保存报告数据。您将获得量化基准和待办事项列表,以改进性能、无障碍功能、安全性和搜索引擎优化 (SEO)。
如果您只有 30 分钟的时间...
Lighthouse 或许仍是最佳起点,但只需再多一点时间,您就可以通过其他工具记录结果:
- Chrome DevTools Security 面板:HTTPS 使用情况。
- Chrome DevTools Network 面板:加载时间;资源大小和 HTML、CSS、JavaScript、图片、字体和其他文件的请求数量。
- Chrome 任务管理器:如果您的网站经常使用大量 CPU 或比其他应用更多的内存,那么您可能需要解决内存泄漏、任务运行或资源加载问题。请务必在可代表用户的设备上测试您的网站。
- WebPagetest:不同位置和连接类型的性能、缓存、首字节时间、CDN 使用情况。
- PageSpeed Insights:加载性能、数据费用和资源使用情况,包括突出显示实际性能统计信息的 Chrome 用户体验报告数据。
- 速度统计信息摘要和影响计算器:将网站速度与类似应用进行比较,并估算提高网站速度所带来的潜在收入机会。
务必以新用户 的身份对网站进行测试以无痕式(私密)窗口打开网站,或使用浏览器工具停用缓存和清理存储空间。这可确保从网络(而不是本地缓存)检索每个资产,因此您可以准确了解首次加载性能。
没有什么优于实际测试了 - 请使用与用户一样的设备和连接测试您的网站,并记录您的主观体验。
如果您觉得各种各样的工具令人感到困惑...
请参阅我们的指南:如何看待速度工具。
如果没有其他问题,只需使用 Lighthouse 检查以下内容:
- HTTPS:每个网站都应采用 HTTPS 传送所有资源。
- 服务器设置:您的网络服务器或 CDN 应正确使用压缩功能、使用 HTTP/2 并包含适当的标头,以便浏览器能够缓存资源。
- 可移动到页面底部和/或被赋予 async 或 defer 属性的脚本元素。
- 可以移除的 JavaScript 和库。
- 未使用的 CSS 和未使用的 JavaScript。
- 可通过较高的压缩率或较小的像素尺寸保存的图片。
- 使用其他格式保存的较小图片文件,例如以 PNG 格式保存的照片。
受众群体、利益相关方、背景信息
重构的优先级取决于您的受众群体、内容和功能。谁访问了您的网站?他们为什么以及如何使用它?您的性能预算是多少?如果您不确定这些问题的答案,请尝试从我们的 PWA 培训资源中收集要求练习:您的受众群体、您的内容和面向所有用户进行设计。
贵公司的利益相关方是谁?他们的优先事务是什么?这会影响您构建、展示和共享审核数据的方式。
如果您无法审核整个网站,请查看网页分析数据,了解应该重点关注哪些方面。跳出率较高、页面停留时间较短和意外退出网页可能是一个很好的指标,可表明从何处开始。托管费用、广告点击和转化次数等业务指标也是如此。从利益相关方那里大致了解什么数据对他们至关重要。
测试、记录、修复、重复
在进行任何更改之前记录网站状态,以便发现问题并为改进或回归设定起点。这样,您就可以获得数据来证明开发工作的合理性,并奖励开发工作。
请务必在您的网站中测试多种网页类型,而不仅仅是首页。对于单页应用,测试不同的组件、路线和用户体验流程,而不仅仅是首次加载体验。