标签: core-web-vitals
Next.js-水化前、Next.js-水化和 FCP
我想知道是否有人可以解释计时指标Next.js-before-hydration和Next.js-hydration含义，以及它们与 FCP 的关系。这是针对服务器端渲染并在客户端使用钩子的 NextJS 应用程序。
这是“性能”选项卡测量的屏幕截图，该屏幕截图显示将影响反应服务器和 SSR 的新页面加载。这个特定页面的组件在页面稳定下来之前也会在客户端重新渲染多次。我从最初的请求开始放大了该区域，包括 FCP 和 LCP 等最初的核心 Web 重要功能。（TTI 和 TTFB 在屏幕上出现的时间要晚得多。）
看起来它Next.js-before-hydration恰好在服务器请求开始时启动。（幻灯片似乎显示了浏览器中之前页面的缩略图，这似乎是一个开发工具错误，因此请忽略它。）
Next.js-before-hydration在这个例子中持续了 1.48 秒，但是对于这个请求，TTFB 只有 120 毫秒，所以我知道它不仅仅包括服务器响应时间。
我知道 FCP 是“TTFB + 内容加载时间 + 渲染时间”，所以我认为这Next.js-before-hydration一定是其中的一个子集，但我见过其他网站的示例（ticketmaster.com 就是一个例子），其中 的结尾延伸Next.js-before-hydration得很远超出 FP/FCP 甚至Next.js-hydration更晚结束 - 有时就在 onLoad 事件（红色L）之前。
按照电影胶片，内容在我们到达之前开始逐渐显示Next.js-hydration（如图Next.js...dration中标记），这让我认为它已经开始运行挂钩并重新渲染。
Next.js-before-hydration那么当 NextJS 从 过渡到时意味着什么呢？Next.js-hydration？它是否与“第一次”渲染完成（意味着第一次加载每个组件，如 React Profiler 中的第一次渲染）以及钩子何时开始运行有关？
最后，end ofNext.js-hydration意味着什么？这两个指标与 FCP 有何关系？
lighthouse google-chrome-devtools reactjs next.js core-web-vitals
推荐指数
解决办法
查看次数
如何修复 Lighthouse“提供低分辨率图像”
当我使用https://web.dev/measure审核我的网站时得到的建议之一是“以低分辨率提供图像”。
从下面的屏幕截图中可以看到，我显示的图像尺寸与实际尺寸相符。我不知道这里出了什么问题以及预期的大小是多少。
如果我将图像放大，我会收到相反的错误，指出我的图像尺寸不正确，应该减小尺寸。
所有这些图像的明确高度均为 48px，width: auto;以使其具有响应能力。
有什么建议来解决这个问题吗？
提前致谢。
推荐指数
解决办法
查看次数
为什么 PageSpeed Insights 和 Search Console 之间的累积布局变化有所不同？
为什么Google 速度测量工具（例如Lighthouse / PageSpeed Insights）中报告的累积布局移动指标与Search Console中报告的不同？
lighthouse web-performance google-search-console pagespeed-insights core-web-vitals
推荐指数
解决办法
查看次数
标记为核心 Web Vitals 的图像元素没有明确的宽度和高度
我正在检查 PageSpeed Insight 上的 Core Vitals，并注意到它的标记 Image elements do not have explicit width and height和建议Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
我不确定这到底意味着什么以及我可以采取什么措施来解决这个问题，具体针对我的情况
<img src="someimage.jpg" width="100%" height="100%" alt="something" class="img-responsive">
我的页面是响应式的，我对此网页使用 bootstrap v3.x，因为它是旧页面。因为页面是响应式的，并且我使用的是 class="img-responsive" ，它会自动调整图像大小，但这会影响 CLS 等核心要素。
由于布局是响应式的，定义使用图像以避免 CLS 问题的最佳方法是什么。
我注意到 Page Speed Insigh 报告的大部分 CLS 都是针对 owl Carousal
以下是生成图像 CLS 问题的代码副本
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 lc-hp-col">
<div class="owl-carousel owl-theme" data-items="1" data-items-desktop="1" data-items-tablet="[991,1]" data-items-mobile="[767,1]" data-pagination-speed="200" data-auto-play="true" data-stop-on-hover="true">
<div …推荐指数
解决办法
查看次数
如何在启用 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;
有什么办法可以解决吗？
我不想取消选中它，因为收入会下降。
推荐指数
解决办法
查看次数
“最大内容绘制元素错误！”的原因是什么？在 PageSpeed Insights 中？
我在 PSI 中遇到错误，其中最大的内容绘制在网站的多个页面上出现错误。图像尺寸很小（约 22kb），并且页面没有进行明显的更改，但我们最近遇到了 LCP 问题的增加，但无法确定此错误的原因。
我尝试在多个浏览器和隐身模式下运行 PSI 测试，看看是否得到不同的结果，但无济于事。我希望看到解决长 LCP 问题的建议，但没有。
推荐指数
解决办法
查看次数
如何让背景图片加载更快
我的大多数 WordPress 网站的顶部折叠都有一个背景图片。这些图像是页面上最大的内容绘制元素，通常最后加载。我在某处读到“加载页面时背景图像是最后一个被抓取的”。这是真的吗？
使用占位符或图像代替背景图像，然后稍后更改它，以便 LCP 快速加载，如下所示，这是一个好主意吗？
<div class="header-img"><img style="display: none;" src="images/header-img.jpg" alt=""></div>
.header-img {
width: 100%;
height: 500px;
background-size: cover;
background-image: url(images/header-img.jpg);
}
推荐指数
解决办法
查看次数
CLS问题：大于0.25（移动）
Pagespeed 和 lighthouse（即使在慢速 3g 中）都显示出良好的结果（如附件所示）。但是我仍然收到网站管理员的警报。
CLS问题：大于0.25（移动）
网址： https: //gpuzzles.com/mind-teasers/astronauts-key/
页面洞察：
灯塔
现在这有点令人沮丧，不知道该怎么办。
推荐指数
解决办法
查看次数
如何模拟糟糕的首次输入延迟（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 …推荐指数
解决办法
查看次数
如何解决：./src/reportWebVitals.js 语法错误：“导入”和“导出”可能只出现在顶层
我愚蠢地使用了命令 npmauditfix --force 而不备份软件包，现在我在我的反应应用程序中发现了一些错误。
每当我启动应用程序时，我都会收到错误：
./src/reportWebVitals.js 中的错误语法错误：“导入”和“导出”可能仅出现在顶层
我该如何解决这个问题？
我的 reportWebVitals.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;
我的 package.json 如下所示：
{
"name": "duran_supplements_and_workout_equipment",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8000",
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"http-proxy-middleware": "^2.0.1",
"mongoose": "^5.12.13",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^0.9.5",
"socket.io-client": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": …推荐指数
解决办法
查看次数
标签 统计
core-web-vitals ×10
lighthouse ×3
seo ×3
web-vitals ×3
html ×2
css ×1
javascript ×1
next.js ×1
package.json ×1
reactjs ×1
wordpress ×1