指标 #

1.页面加载时间：页面以多快的速度加载和渲染元素到页面上。

First contentful paint (FCP)： 测量页面开始加载到某一块内容显示在页面上的时间。 Largest contentful paint (LCP)： 测量页面开始加载到最大文本块内容或图片显示在页面中的时间。 DomContentLoaded Event：DOM解析完成时间 OnLoad Event：页面资源加载完成时间

2.加载后响应时间：页面加载和执行js代码后多久能响应用户交互。

First input delay (FID)： 测量用户首次与网站进行交互(例如点击一个链接、按钮、js自定义控件)到浏览器真正进行响应的时间。

3.视觉稳定性：页面元素是否会以用户不期望的方式移动，并干扰用户的交互。

Cumulative layout shift (CLS)： 测量从页面开始加载到状态变为隐藏过程中，发生不可预期的layout shifts的累积分数。

工具 #

根据现状，使用ChromeDevTool作为基础的性能分析工具，观察页面性能情况

Network：观察网络资源加载耗时及顺序

可以发现onload事件被大量媒体资源阻塞了，关于 onload 事件的影响因素，可以参考这篇文章
结论是 浏览器认为资源完全加载完成（HTML解析的资源 和 动态加载的资源）才会触发 onload
结合上图 可以发现加载了图片、视频、iFrame等资源，阻塞了 onload 事件的触发
Network 总结

DOM的解析受JS加载和执行的影响，尽量对JS进行压缩、拆分处理（HTTP2下），能减少 DOMContentLoaded 时间
图片、视频、iFrame等资源，会阻塞 onload 事件的触发，需要优化资源的加载时机，尽快触发onload

Performace：观察页面渲染表现及JS执行情况

Lighthouse：对网站进行整体评分，找出可优化项

作者：腾讯IMWeb团队 链接：https://juejin.cn/post/6994383328182796295 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。