审核性能

为什么和什么?

您可能已经听说过渐进式 Web 应用技术可以为您的网站带来诸多好处。您可能会想直接开始添加 PWA 功能。这可能,但如果您先让应用“准备好使用 PWA”,效果会更好。

无论 PWA 多么神奇,也无法解决屏蔽 JavaScript 或图片膨胀等问题。PWA 需要坚实的基础。

那么,如何检查网站的健康状况?第一步是进行网站审核:客观地审核哪些方面做得好,哪些方面(以及如何)可以改进。

对网站或应用进行审核有助于您打造具有弹性且高性能的体验,并突出显示可在最少审批的情况下实现的快速改进。审核还可为数据驱动型开发提供基准。问题是否有所改善?您的网站与竞争对手相比如何?您可以获得有助于确定优先事项的指标,并在取得改进后获得具体的证据来炫耀一番。

如果您只有 5 分钟时间…

在您的首页上运行 Lighthouse,然后保存报告数据。您将获得量化的基准和待办事项列表,以便改进性能、无障碍功能、安全性和 SEO。

如果您只有 30 分钟…

Lighthouse 可能仍然是最佳起点,但如果您有更多时间,也可以记录其他工具的结果:

  • Chrome 开发者工具“安全”面板:HTTPS 使用情况。
  • Chrome 开发者工具“网络”面板:加载时间;HTML、CSS、JavaScript、图片、字体和其他文件的资源大小和请求数量。
  • Chrome 任务管理器:如果您的网站持续使用大量 CPU 或比其他应用使用更多内存,则可能需要修复内存泄漏、任务运行或资源加载问题。请务必在代表用户的设备上测试您的网站。
  • WebPagetest:不同位置和连接类型的性能、缓存、首次收到字节所用时间、CDN 使用情况。
  • PageSpeed Insights:加载性能、数据流量费用和资源使用情况,包括突出显示实际性能统计数据的 Chrome 用户体验报告数据。
  • 速度统计信息摘要和影响计算器:将网站速度与同行网站进行比较,并估算提高网站速度带来的潜在收入机会。

请务必以初次访问者视角测试您的网站。在无痕式(私密)窗口中打开相应网站,或使用浏览器工具停用缓存并清除存储空间。这样可确保从网络(而非本地缓存)检索每个资源,以便您准确了解首次加载性能。

没有什么比实际测试更能体现真实情况了。请使用与用户相同的设备和网络连接来试用您的网站,并记录您的主观体验。

如果您对各种工具感到困惑…

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

如无其他问题,只需使用 Lighthouse 检查以下问题即可:

受众群体、利益相关方、情境

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

您的利益相关方是谁?他们的优先事项是什么?这会影响您构建、呈现和共享审核数据的方式。

如果您无法审核整个网站,请查看网页分析,了解要重点关注哪些方面。跳出率高、网页停留时间短和意外的退出网页都可能是从哪里着手改进的良好指标。同样,您还可以查看托管费用、广告点击次数和转化次数等业务指标。从利益相关方那里大致了解对他们而言重要的数据。

测试、记录、修正、重复

进行任何更改之前,记录网站的状态,以便发现问题并确定改进或回归的起点。这样,您就可以获得数据来证明和奖励开发工作。

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

反馈