|
|
只需在表单中输入URL即可轻松执行。测量结果以 100 分的等级进行评估，并分三个阶段进行颜色编码，以便于理解：90 分或以上为绿色，90 分以下为橙色，50 分以下为红色。此外，您还可以通过“实验室数据”来检查CLS在PC、手机等特定设备以及网络环境下的表现，让您了解每个页面的问题所在和改进措施。灯塔Lighthouse 是 Google 提供的免费工具，可让您测量网页的性能。您可以查看“性能”、“渐进式Web应用程序”、“辅助功能”、“最佳实践”和“SEO”5个项目的评估。有关 Core Web Vitals 的评估测量结果，请查看“性能”。当前的 CLS 分数显示在“指标”列中。与 Google Search Console 类似，LCP 评估以三种颜色清晰显示：绿色（好）、黄色（需要改进）和红色（差）。
Lighthouse 可作为 Google Chrome 的扩展和开 阿富汗手机号码清单 发人员工具。请注意，如果您想使用 Lighthouse 作为开发人员工具，您将需要 Node 版本 5 或更高版本。将 Lighthouse 安装为全局模块后，开发者工具中将出现“Lighthouse”选项卡。网络生命体征Web Vitals 是 Google Chrome 扩展程序之一，可以从官方网站免费下载。您现在可以自动轻松地测量任何网页的三个核心 Web Vitals 元素：CLS、LCP和FID 。Web Vitals 也可以在网站开发阶段使用，因此它可以帮助您在网站上线之前发现问题并帮助您更好地发布。使用起来非常简单，首先从官方页面下载Web Vitals，并将其作为扩展程序添加到Google Chrome中。您只需打开要检查的网页，然后单击浏览器窗口右上角的方形图标即可显示 CLS、LCP 和 FID 测量值。如何提高CLS？如果您网站的 CLS 正在下降，请查找原因并进行纠正和改进。在这里，我们将解释针对图像显示、广告显示和网页字体显示的对策，这些是CLS下降的主要原因。CLS改进指定图像的大小请务必设置图像的“宽度属性”和“高度属性”以指定尺寸。浏览器首先加载轻文本数据，然后还加载图像。在这种情况下，如果未指定图像大小，则浏览器无法确定图像的适当表空间，因此可能会将文本推开并显示较大的图像。通过预先指定图像尺寸，可以在保证图像显示区域的同时加载文本数据，从而防止布局崩溃。还可以使用 CSS 来固定纵横比。如果使用 CSS 预先固定每个窗口尺寸的图像长宽比并确定显示区域的宽度，即使在响应式情况下也可以防止布局崩溃。
优化您的广告展示区域横幅广告有多种尺寸，这可能会导致意外的布局混乱。因此，就像图片一样，您需要提前指定广告的展示区域。另外，一定要设置好广告展示区域，这样即使广告没有投放，空间也会消失，不影响布局。另外，如果可能的话，我想避免在页面顶部设置广告显示区域。如果页面顶部显示的广告打乱了布局，则整个页面的布局将被打乱，CLS 分数将会增加。在页面顶部设置广告展示区域时，请指定一个有足够空间的区域。尽量减少网络字体的使用加载 Web 字体时显示替代字体的称为 FOUT 的机制可能会破坏布局。此外，一种称为 FOIT（不可见文本闪烁）的现象（即在加载 Web 字体之前不会显示文本）也可能导致布局损坏。为了防止由于 FOUT 和 FOIT 导致布局崩溃，请使用 CSS 和 JavaScript 进行调整。名为 font-display 的属性允许您控制 Web 字体的呈现行为。“交换”、“阻止”和“可选”等各种值用于控制操作，但每个值都有自己的优点和缺点，因此在使用它们之前应该仔细检查它们。
|
|
发表于 2024-2-12 13:37:18