标签: web-vitals
React JS npm start 显示无法编译 web-vitals
无法编译 -/src/reportWebVitals.js 找不到模块：无法解析“web-vitals”。由于刚接触 JS，找不到发生了什么。这是 reportWebVitals.JS 文件。在此先感谢您的帮助。
“/src/reportWebVitals.js 模块未找到：无法解析‘E:\ReactResources\RectProjects\test-app\src’中的‘web-vitals’”
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}};
export default reportWebVitals;
推荐指数
解决办法
查看次数
create-react-app 附带的 web-vitals 是什么？
我刚刚意识到我新创建的 Reactjs 应用程序有一个文件src/reportWebVitals.js，该文件正在 index.js 中被调用。这个文件/代码段的用途是什么？
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
推荐指数
解决办法
查看次数
如何修复 Lighthouse“提供低分辨率图像”
当我使用https://web.dev/measure审核我的网站时得到的建议之一是“以低分辨率提供图像”。
从下面的屏幕截图中可以看到，我显示的图像尺寸与实际尺寸相符。我不知道这里出了什么问题以及预期的大小是多少。
如果我将图像放大，我会收到相反的错误，指出我的图像尺寸不正确，应该减小尺寸。
所有这些图像的明确高度均为 48px，width: auto;以使其具有响应能力。
有什么建议来解决这个问题吗？
提前致谢。
推荐指数
解决办法
查看次数
为 CLS（累积布局偏移）设置 100% 宽度的图像高度
为了处理 Core Web Vitals 的 CLS，我需要找到一种在img图像在屏幕上为 100% 宽度时设置标签高度的方法，因为只要调整窗口大小，图像的高度就会发生变化。我正在开发的网站是基于 WordPress 构建的，并找到了解决方法。所以，我会写一下如何在WordPress上管理它。
推荐指数
解决办法
查看次数
TypeScript 类和 Webpack
假设我有一个包含 10 个方法的打字稿类，并且该文件导出该类的一个新实例作为其默认导出。然后我有另一个文件，例如 React 功能组件，它导入此类并调用该类的一个方法。
这将如何优化？Webpack/Babel 是否可以仅提取所使用方法的代码，或者它是否会包含整个类，而我将有一堆未使用的代码？
避免类并导出每个函数是否更好？
我的目标是使导出的包更小，并且让 Lighthouse 减少对未使用的 JavaScript 的抱怨。
推荐指数
解决办法
查看次数
如何在启用 Google Adsense“让 Google 优化您的移动广告尺寸”的情况下避免 CLS（累积布局偏移）？
由于希望获得更好的 Web Vitals 分数，我没有使用响应式广告。
然而，经过Let Google optimize the size of your mobile ads检查，谷歌似乎仍然会min-height通过将 CSS 属性修改为以下内容来更改/更新其在定义的容器中的广告尺寸：
height: auto !important;
min-height: 0px !important;
有什么办法可以解决吗？
我不想取消选中它，因为收入会下降。
推荐指数
解决办法
查看次数
最大内容绘制 (LCP) 小于首次内容绘制 (FCP)
我的公司要求我向我们的网站添加一些网站速度指标，以帮助识别不太理想的用户体验。使用自定义 HTML Google Tag Manager (GTM) 标签，我为 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP) 添加了 PerformanceObserver(s)。
我根据https://web.dev/user-centric-performance-metrics/的指南实现了观察者
问题是在某些页面上 LCP 低于 FCP。根据我的理解，这不应该发生，因为即使第一个油漆也是最大的油漆，数量应该是相同的。
任何人都可以解释一下这是否可行以及在什么情况下会发生？
推荐指数
解决办法
查看次数
TTFB 是否包括重定向到我的页面的请求的时间？
我正在使用 javascript 库计算页面上的TTFBweb-vitals （第一个字节时间）和其他网络生命周期。
流程是这样的：
- 用户在查看服务器 A 的网页时，单击按钮或其他链接，从而产生发送到服务器 A 的请求。
- 服务器 A 分析请求并返回一个重定向，可能是 303，其中包含指向我的页面（位于服务器 B 上）的链接。
- 浏览器被重定向到服务器 B 上我的页面，该页面已加载内容。
在服务器 B 上的页面中，我测量 TTFB。
我测量的 TTFB 是否包括从服务器 A 获取重定向所需的时间？
推荐指数
解决办法
查看次数
如何模拟糟糕的首次输入延迟（Web Core Vitals）分数？
我需要创建一个将生成错误的首次输入延迟 (FID) 值的网页。
如果您不知道，FID 是 Google Web Core Vitals 的一部分。
我想模拟错误的 FID，因为我正在测试一个网站扫描工具，该工具应该标记错误的 FID 值。因此，我想在网页上模拟一个错误值以确保它有效。
需要明确的是 - 我并不是想修复我的第一次输入延迟。我想创建一个故意给出错误的“首次输入延迟”值的网页。
但我不知道该怎么做。
我有一个 HTML 页面，带有<button id="button">Click Me</button>. 在<head>我添加了这个脚本：
<script type="module">
// Get the First Input Delay (FID) Score
import {onFID} from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
// Get the button element
const button = document.getElementById('button');
// Add a click event listener to the button
button.addEventListener('click', async () => {
// Make a delay
await new Promise((resolve) => setTimeout(resolve, 5000));
// Print the FID score …推荐指数
解决办法
查看次数
Chrome 与 Web Vitals 上的 TTFB 值不同
我注意到 Chrome 网络选项卡中的 TTBF 值与 WebVitals 记录的 TTBF 值不同。理想情况下，它应该是完全相同的值，但有时在某些情况下会出现高达 2-3 秒的巨大差异。
我正在使用 Next.js 并使用reportWebVitals来记录各自的性能指标。
使用performance.timing.responseStart - performance.timing.requestStart返回比依赖 WebVitals TTFB 值更合适的值。
知道可能出了什么问题吗？这是 WebVitals 上的一个错误，我不应该使用它，或者在消费/记录值时犯错误？
推荐指数
解决办法
查看次数
标签 统计
web-vitals ×10
javascript ×4
reactjs ×2
babeljs ×1
css ×1
html ×1
image ×1
lighthouse ×1
next.js ×1
npm-start ×1
redirect ×1
seo ×1
sitespeed ×1
typescript ×1
webpack ×1