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

在前端开发中，App或Web Page性能的好坏和响应速度，特别是在App端显得尤为重要，一直是前端头疼的问题。专业测试工具可以知道自己的网页需要优化的部分是什么，总体分数是多少，是否符合用户体验标准。

响应速度

如果响应时间在100毫秒以内，则系统的响应速度更快。响应时间在500-1500毫秒以内，系统的响应速度一般，但可以接受。响应时间超过2000毫秒，系统响应速度慢，客户失去耐心，无法接受

我常用的性能分析工具是从Lighthouse、Lighthouse分析报告中收集开发人员最佳实践的性能指标和观点，使开发人员能够评估页面分析报告以优化和改进网站，提高系统用户体验。

网页主要指标分析

Lighthouse分析网页的主要指标包括Performance、Progress Web App、最佳做法、可访问性和SEO是。以下是生成的掘金棉性能分析报告。

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

“第一次内容绘制”(First Contentful Paint)。换句话说，浏览器在屏幕上的特定时间点首次绘制所有内容，如文本、图像、canvas等。第一次有效绘图(First Meaningful Paint)。测量用户识别页面上主要内容的时间。每个网站的第一个内容都不一样。例如，博客文章、标题和第一个屏幕文本是第一个内容，购物网站上的图片也变得重要。第一个CPU空闲。也就是说，这是页面第一次对输入做出反应的时间点，通常在第一次有效绘图完成后出现。这个指标还在实验阶段。互动时间(Time to Interactive)。指示所有页面内容何时成功加载，以及何时可以快速响应用户的操作。这个指标还在实验阶段。速度指示器(Speed Index)。测量了第一个屏幕上显示的内容在屏幕上的绘制速度。第一次加载页面时，如果尽可能多地显示内容，往往会给用户提供更好的体验，因此速度指标的值越小越好。输入“延迟评估”(Estimated Input Latency)。该指标测量页面对用户输入行为做出反应的速度，基准值必须小于50毫秒。

Opportunities

意味着优化机会。提供详细的建议和文件，说明这个分数的原因，有助于具体的实现和改进。

助攻

指目前存在的问题。为提高性能的实验和调整提供指导，单击下拉按钮快速找到有问题的代码行，并及时更正。

注：下拉箭头内有具体的文档链接地址，使您能够快速查看优化说明意见和方法

访问权限

辅助功能(Accessibility)

访问可访问性分数的分数是从相关指标的加权平均值计算的。您可以在分数详细信息中查看每个指标的具体权重。权重大的指标项目对分数有很大影响。这在实际开发中使用得比较少，理解也有限，所以感兴趣的伙伴可以专门进行研究学习。

最佳实践

最佳实践(优化)

最佳

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 文件不可用时，提供降级措施，页面能显示基本内容而不出现白屏。