问题标签 [web-vitals]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
132 浏览

web-performance - 测量累积布局偏移的新方法

谷歌推出了一种测量累积布局偏移 (CLS) 的新方法。但不知何故,我无法从web.devhttps://web.dev/evolving-cls/上的文章中理解新定义。

任何人都可以用简单的话帮助我理解这一点吗?或建议任何文章或视频?

0 投票
1 回答
369 浏览

core-web-vitals - 如何在启用 Google Adsense“让 Google 优化您的移动广告尺寸”的情况下避免 CLS(累积布局转换)?

由于愿意获得更好的 Web Vitals 分数,我没有使用响应式广告。

但是,在Let Google optimize the size of your mobile ads选中后,Google 似乎仍会min-height通过将 CSS 属性修改为以下内容来更改/更新其在已定义容器中的广告尺寸:

有什么办法可以解决吗?

我不想取消选中它,因为收入会下降。

在此处输入图像描述

Google Adsense - 让 Google 优化您的移动广告的尺寸

0 投票
0 回答
34 浏览

core-web-vitals - 有什么方法可以避免 jQuery 动画对累积布局转换的负面影响?

我有一个在线应用程序。它会触发一个很长的动画来改变容器的高度。然而,目的地高度是不可预测的。这会使所有较低的 DOM 节点都受到 CLS 分数的惩罚。仅供参考:CLS 仅在用户操作后原谅前 500 毫秒的布局转换(在这种情况下单击)。并且动画持续时间超过 15 秒。

因为它是不可预测的,所以我不能min-height像大多数文章建议的那样设置。有什么办法可以避免吗?

坦率地说,我认为这对用户体验没有任何负面影响,因为她/他会看到进度并知道动画完成后何时与页面交互。

0 投票
0 回答
36 浏览

web-performance - 为什么 TBT 在 ChromeDev Tools 中“不可用”?

TBT 可能在 ChromeDev 工具中“不可用”。这是为什么?

在此处输入图像描述

那是因为无法准确计算TTI吗?我想也许性能时间线的记录没有提供足够的信息来找出有一个五分钟的空闲时间来定义为相当窗口。这样对吗?

0 投票
1 回答
154 浏览

redirect - TTFB 是否包括重定向到我的页面的请求的时间?

我正在使用javascript 库计算页面上的TTFB(到第一个字节的时间)和其他网络生命体征。web-vitals

流程是这样的:

  1. 用户在查看服务器 A 的网页时,正在单击按钮或其他链接,从而导致向服务器 A 发出请求。
  2. 服务器 A 分析请求并返回一个重定向,可能是 303,其中包含指向服务器 B 上我的页面的链接。
  3. 浏览器被重定向到我在服务器 B 上的页面,该页面加载了内容。

在我在服务器 B 上的页面中,我测量了 TTFB。

我测量的 TTFB 是否包括从服务器 A 获取重定向所花费的时间?

0 投票
2 回答
41 浏览

pagespeed - 在 pagespeed 中重定向到 index.html 的 URL

当我以 pagespeed 提交我的网站 ( https://www.examplesite.com/ ) 时,它会自动重定向到https://www.examplesite.com/public_html/index.html。可能的原因是什么?

0 投票
1 回答
56 浏览

reactjs - 如何知道 React 组件何时准备好进行交互

只是好奇可以做些什么来测量 React 应用程序的 TTI(网络重要)。由于我们只对特定组件 TTI 感兴趣,因此 lighthouse 将无法在这里提供帮助。

0 投票
1 回答
17 浏览

reactjs - 与 create-react-app 一起使用的 web-vitals 是什么?

我刚刚认识到我新创建的 Reactjs 应用程序有一个文件src/reportWebVitals.js,它在 index.js 中被调用。这个文件/代码是做什么用的?