云社区 博客 博客详情
云社区 博客 博客详情

【Chrome web.dev Live 2020总结】第一天第2集:Speed Tooling的新功能

华为云官网技术团队 发表于 2020-07-22 14:03:12 07-22 14:03
华为云官网技术团队 发表于 2020-07-22 14:03:12 2020/07/22
0
1

【摘要】 这个章节主要给我们介绍了Chrome在网页打开速度方面增加的一些新指标,包括LCD、FID、CLS等,还有如何使用工具对我们的网页进行有效的调试和优化。

速度测量工具的新动态

这个章节主要给我们介绍了Chrome在网页打开速度方面增加的一些新指标,包括LCD、FID、CLS等,还有如何使用工具对我们的网页进行有效的调试和优化。

§ 三个核心新指标

LCP (Largest Contentful Paint)

FID (First Input Delay)

CLS (Cumulative Layout Shift)

§ LCP

最大内容块绘制时间,比起原来的FCP和FMP,这个指标更加真实地衡量用户看到网站主要内容的时间。

§ FID

首次输入延迟,指浏览器首次收到用户输入,到浏览器响应这个输入的时间

§ CLS

累积布局移位,是视觉稳定性的度量,数值越低,代表网站的视觉移位越小,抖动越小,评分越高

§ 衡量网站整体性能的样本原则

核心性能指标使用页面浏览量的 75% 作为阈值进行评估,也就是说,网页浏览量的至少75%以上达到良好标准,就认为这个网站达到良好标准,这个百分比标准也适用于其他所有的指标。

§ 不同速度工具采集数据的差别

实验环境:在测试环境中收集的实验数据,他们是可以重现的,并且现场调试和看到反馈效果

生产环境:真实环境的情况很复杂,会有不同的设备组合,而且往往是不可重现的数据

(实验环境采集不了FID,因为没有用户输入,所以采集的是TBT)

§ 何时何地使用这些工具

§ Lighthouse V6 评分标准的更新

主要的改动是新增了上面提到的三个新核心指标,并去掉了三个旧指标(FMP、首次CPU空闲和最大潜在FID),去掉这些指标主要是考虑到这些指标的可变性,我们尝试使用能更好衡量网站性能的新指标,从而可以更好地反映用户体验。

译者注:虽然说新增了三个核心指标,但图中并没有看到FID,这个我也没明白

§ 各种速度工具对新指标的支持

§ PageSpeed Insight

§ Search Console

§ Chrome DevTools

§ CrUX Dashboard 和 API

§ web.dev/measure

§ web-vitals的浏览器扩展和NPM库

§ Wordpress插件Site Kit


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 1
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消