LOADING

Core Web Vitals Annotations

Core Web Vitals Annotations0.0.2

使用 Core Web Vitals 注释网站此扩展将在您的网站上叠加注释,以突出显示对 Core Web Vitals 性能指标、首次输入延迟 (FID)、最大内容绘制 (LCP) 和累积布局偏移 (CLS) 产生影响的页面属性。它还使用 Google 推荐的颜色编码阈值报告页面的 Core Web Vital

官方版无广告17

更新日期:2021年 8月 29日分类标签:语言:中文平台:

191KB 1 人已下载 手机查看

简介:
使用 Core Web Vitals 注释网站此扩展将在您的网站上叠加注释,以突出显示对 Core Web Vitals 性能指标、首次输入延迟 (FID)、最大内容绘制 (LCP) 和累积布局偏移 (CLS) 产生影响的页面属性。它还使用 Google 推荐的颜色编码阈值报告页面的 Core Web Vitals 指标。两种类型的注释将覆盖在网页元素上: 1. 具有布局偏移并有助于累积布局偏移得分的元素。根据转变的严重程度,注释将从最低影响到最高影响进行颜色编码 – 黄色 -> 橙色 -> 深橙色 -> 红色。在每个注释的左上角,您会找到移位分数。 2. 具有最大内容绘制的元素将用紫色虚线注释突出显示。它将包括注释左上角的绘制时间。扩展弹出窗口应该打开一个带有 FID、LCP 和 CLS 度量时间的网格。弹出窗口的底部是一个按钮,用于从网站中删除注释。除了最大的内容绘制,核心 Web Vitals 指标是用户启动的。在使用插件和调试网站时,请注意以下几点: – 在用户单击或轻敲网页上的某个键后捕获首次输入延迟。如果您在其中一项操作之前打开扩展程序,那么您会注意到网格中缺少该指标。要获得首次输入延迟,请关闭扩展程序,在页面上执行用户操作,然后重新打开。 – 累积布局偏移是页面上偏移的累积。当您滚动页面时,您可能会看到其他变化,并且扩展程序将动态添加新注释。随着班次的增加,报告总分的弹出式网格也将增加。 – 累积布局移位注释突出显示移动的元素,**不是导致移位的元素**。例如,如果广告在页面上加载较晚,它可能会将其下方的某些元素向下推,从而导致移动。广告下方的元素可能会被突出显示,也可能是广告。 – 鉴于上面的广告示例,页面上的多个元素可能在广告加载后发生了移动。在这种情况下,只会记录一个班次分数,但所有受影响的元素都将用注释突出显示。在这种情况下,您应该在带注释的移位分数旁边看到一个箭头 (↳),它表示一组一起移位的元素。

相关资源

EazyCSS
无需为任何页面编写代码即可将您的设计想法变为现实,并在 CSS 代码中进行更改。 🟥 问题 1:-对于来回发送电子邮件的无代码人员来说,测试新的设计理念或将更改委托给设计师/开发人员将花费时间和金钱。 🟥 问题 2:-即使从开发人员的角度来看,使用来自框阴影生成器的大量不同站点、选择颜色代码以及在代码库和实时
AEM Chrome Tools
这个 Chrome 扩展程序将使您作为 AEM 开发人员的生活更轻松一些。测试于: - 6.3 - 6.4特征: - 环境…这个 Chrome 扩展程序将使您作为 AEM 开发人员的生活更轻松一些。测试于: - 6.3 - 6.4特征: - 环境展示- 此功能可让您轻松识别您正在使用的环境- 组件细节- 此功能将
GitHub 发行版下载
该扩展程序在 GitHub 发行版页面显示下载次数。Initial release blog post: https://addshore.com/2015/04/github-release-download-count-chrome-extensionCode on Github: https://githu
LeetCode/LintCode Helper
当您在 LeetCode/LintCode 上编写代码时,此扩展是一个有用的帮助程序。它会自动搜索您的问题的解决方案在 https://www.leetcode.com 或 http://www.lintcode.com 上编码时,一个方便你的生活的工具。 - 只需单击按钮即可转到问题解决方案。 - 如果找不到自
Formalyse: Debug your web form
分析网站中的 HTML 表单帮助分析网站中的 HTML 表单。 (html-form-tag)特征: - 在网站中查找表单(在鼠标悬停时突出显示网站中的表单或单击标记) - 在 POST / GET 之间切换表单- 显示和编辑“隐藏”输入字段- 取消选择单选按钮- 显示“密码”值- 标记表单在 HTML 站点中的
daily.dev | The Homepage Developers Deserve
获取为您量身定制的最热门的开发者新闻。嗨,忙碌的开发者👋 daily.dev 是发展最快的在线社区,供开发人员及时了解最佳开发人员新闻。从 +400 个来源收集您喜欢的所有内容,集中在一个地方。换句话说,不要再浪费时间寻找高质量的文章了。只需安装 daily.dev,打开一个新选项卡,一切就绪。 😃 为什么要

暂无评论

暂无评论...