【url地址怎么查】web网页性能分析系列

在前端开发中，App或Web Page性能的好坏和响应速度，尤其是在App端显得尤为重要，一直是前端头疼的问题。

响应速度

• 响应时间在100ms内，系统的响应速度比较快；
• 响应时间在500-1500ms内，系统的响应速度一般，但是还可以接受；
• 响应时间在超过2000ms，系统的响应速度慢，客户失去耐心而无法接受

我自己常用的性能分析工具是Lighthouse，Lighthouse分析报告里面收集关于开发人员最佳实践的性能指标和见解，让开发人员评估页面分析报告来进行网站优化和完善，提高系统用户体验。

分析网页的关键指标

Lighthouse分析网页的关键指标有Performance、Progress Web App、 Best practices、 Accessibility 、SEO；下面是生成的掘金面的性能分析报告。

实验室数据性能指标红色箭头代表耗时严重需要优化

• 首次内容绘制（First Contentful Paint）。即浏览器首次将任意内容（如文字、图像、canvas 等）绘制到屏幕上的时间点。
• 首次有效绘制（First Meaningful Paint）。衡量了用户感知页面的主要内容（primary content）可见的时间。对于不同的站点，首要内容是不同的，例如：对于博客文章，标题及首屏文字是首要内容，而对于购物网站来说，图片也会变得很重要。
• 首次 CPU 空闲（First CPU Idle）。即页面首次能够对输入做出反应的时间点，其出现时机往往在首次有效绘制完成之后。该指标目前仍处于实验阶段。
• 可交互时间（Time to Interactive）。指的是所有的页面内容都已经成功加载，且能够快速地对用户的操作做出反应的时间点。该指标目前仍处于实验阶段。
• 速度指标（Speed Index）。衡量了首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容，往往能给用户带来更好的体验，所以速度指标的值越小越好。
• 输入延迟估值（Estimated Input Latency）。这个指标衡量了页面对用户输入行为的反应速度，其基准值应低于 50ms。

Opportunities

指的是优化机会，它提供了详细的建议和文档，来解释该评分的原因，帮助我们具体进行实现和改进。

Diagnostics

指的是现在存在的问题，为进一步改善性能的实验和调整给出了指导意见，点击下拉可快速定位出现问题的代码行，及时修改。

注意： 下拉下箭头里面有具体的文档链接地址，可快速查看优化指导意见和方法

访问无障碍

访问无障碍（Accessibility）

访问无障碍评分的分值由相关指标的加权平均值计算而来。可以在评分详情查阅每项指标的具体权重。较大权重的指标项对分数的影响较大。由于这个在实际开发中用得比较少，理解上有限制，有兴趣的伙伴可以专门进行研究学习。

最佳实践

最佳实践（优化）

最佳实践评分的分数区间为0-100。影响这项评分的指标项的权重都是相同的，里面评测的维度比较广，在代码的安全，书写规范，元素的属性声明，命名等方面给出一定的指导建议。

seo分析

搜索引擎优化（SEO）

这个是运营伙伴的天下，这里不做过多说明，个人愚见是代码的规范和W3C规范一定要熟悉，比如在页面的标题，描述，关键字优化，页面图标等方面做努力，可以让搜索引擎能爬到这个网站。

pwa分析

PWA（Progressive Web App）

这是大家听得最多的 也许可能是最模糊的，下面是我收集的PWA的粗略理解，仅供参考学习。PWA是可被发现、易安装、可链接、独立于网络、渐进式、可重用、响应性和安全的用户体验，有以下几个特点，这个是参考的链接。PWA渐进式应用

• 快速可靠：页面在移动网络条件（网络不好的情况下）下能够快速加载。在离线条件下页面能够返回状态码200。可以通过 Service Worker 来实现离线可用。mani文件，它指定了用户打开该 PWA 时加载的 URL。
• 可安装：始终使用 HTTPS。注册 Service Worker 来缓存页面以及 start_url。使用 manifest 文件来实现安装 PWA 的需求，浏览器能够主动通知用户将应用添加到桌面，增加留存率。
• PWA 优化：将 HTTP 流量重定向到 HTTPS。配置自定义启动画面。设置地址栏主题颜色。页面内容针对视口大小自适应，对移动用户的展示更友好。使用了 <meta name="viewport"> 标签，并设置了 width 或 initial-scale 属性。当 JavaScript 文件不可用时，提供降级措施，页面能显示基本内容而不出现白屏。