审核性能

为什么?是什么?

您可能已经听说了渐进式 Web 应用技术能够为您的网站带来诸多好处。您可能会想要直接添加 PWA 功能。是有可能实现的,但如果您先“支持 PWA”,效果会好很多。

再多的 PWA 魔法都无法修正问题,例如阻塞 JavaScript 或图片臃肿。PWA 需要坚实的基础。

那么,如何检查网站的运行状况呢?第一步是进行网站审核:客观地审视哪些方面做得不错,哪些方面有待改进。

审核网站或应用有助于您打造弹性佳的高性能体验,并强调只需少量签核即可快速实现的成效。审核还可以为您提供数据驱动型开发的基准。某项更改是否让情况变得更好?您的网站与竞争对手相比如何?你可以通过指标数据来确定工作的优先级,还可以获得确凿的证据来宣传自己完成改进后的表现。

如果你只有 5 分钟时间...

在主页上运行 Lighthouse保存报告数据。您将获得量化基准和待办事项列表,以提升性能、无障碍功能、安全性和 SEO 效果。

如果时间只有 30 分钟...

Lighthouse 或许仍是最佳选择,不过您多花一点时间也可以记录其他工具的结果:

  • Chrome 开发者工具 Security 面板:HTTPS 使用情况。
  • Chrome DevTools Network 面板:加载时间;资源大小和 HTML、CSS、JavaScript、图片、字体和其他文件的请求数。
  • Chrome 任务管理器:如果您的网站经常占用大量 CPU 或比其他应用更多的内存,那么您可能需要解决内存泄漏、任务运行或资源加载问题。请确保在可代表用户的设备上测试您的网站。
  • WebPagetest:针对不同位置和连接类型、缓存、首字节传输时间、CDN 使用情况的性能。
  • PageSpeed Insights:加载性能、数据费用和资源使用情况,包括突出显示实际性能统计信息的 Chrome 用户体验报告数据。
  • 速度计分卡和影响计算器:将网站速度与类似应用进行比较,并估算提高网站速度的潜在收入机会。

请务必以新用户访问的方式测试您的网站。在无痕式(无痕)窗口中打开网站,或使用浏览器工具停用缓存和清除存储空间。这可确保从网络(而不是从本地缓存)检索每个资源,以便您准确了解首次加载性能。

没有什么能比实际测试更胜一筹 - 使用与用户相同的设备和连接来测试您的网站,并记录您的主观体验。

如果您发现各种工具令人眼花缭乱...

请查看我们的指南:如何看待速度工具

如果没有其他问题,只需使用 Lighthouse 检查:

受众群体、利益相关方、背景

重构的优先级取决于您的受众群体、内容和功能。谁访问您的网站?他们为什么以及如何使用这些数据?您的性能预算是多少?如果您不确定这些问题的答案,请尝试从我们的 PWA 培训资源中收集以下练习:您的受众群体、您的内容面向所有用户进行设计

谁是利益相关方?他们的优先要务是什么?这将影响您设计、呈现和共享审核数据的方式。

如果您无法审核整个网站,请查看网页分析,以了解应关注哪些方面。高跳出率、页面停留时间较短以及退出页不符合预期是确定从何处入手的理想指标。同样,托管费用、广告点击次数和转化次数等业务指标也是如此。从利益相关方那里大致了解他们看重的数据。

测试、记录、修复、重复

在进行任何更改之前记录网站的状态,以便发现问题并为改进或回归奠定基础。从而为您提供数据来证明开发工作的合理性并予以奖励。

请务必对您的网站内的多种网页类型(而不仅仅是首页)进行测试。对于单页应用,应测试不同的组件、路由和用户体验流程,而不仅仅是首次加载体验。

反馈