您可以在此处单击“布局转变区域”。 使用 Google Chrome 开发者工具查找 CLS 问题 如果您随后重新加载页面，CLS 区域将以蓝色背景显示。对于我的博客《互联网个体户》，包括标题在内的整个内部内容部分都标记为蓝色。这很奇怪，特别是因为正如我所说，我不久前停用了滚动导航。所以情况似乎并非如此。 为了更好地识别布局的变化，最好人为地限制互联网速度。这可以在“网络”下的开发者工具中选择“快速 3G”来实现。 最后但并非最不重要的一点是，通过单击“性能”下的圆形箭头按钮开始在加载时截取屏幕截图。这将重新加载页面并截取屏幕截图： 使用 Google Chrome 开发者工具查找 CLS 问题 这里有一个问题，就是导航。
我使用存储在服务器本地的 Google 字体进行导航，在正常使用期 妈妈数据库 间加载速度很快，但在互联网速度较慢时会出现问题。因为首先导航点以不同的步骤类型（Arial）显示。 过了一会儿，当 Google Font 完全加载后，导航字体就会变成它应该的样子。就我而言，这会导致导航变为两行，然后较窄的 Google 字体才能正确显示导航。 我在这里尝试了一些事情，并使用 Chrome 的开发人员工具反复测试了它的作用。 我在标头中构建了一个预加载命令，可以在不同版本中预加载我的 Google 字体。这是一个例子： 我在 CSS 命令中也有用于加载本地Google 字体的命令 字体显示：块； 安装。这可确保只有在实际加载了预期字体后，文本才会显示在浏览器中。
否则，将首先使用 Arial，并在切换到正确字体之前显示文本。这是 CLS 错误的常见原因。 结果是，在 CLS 值为 0.355 后，该工具此后不再检测 CLS 错误。 优化 Google Core Web Vitals 值 - 示例、提示和建议 Chrome 开发者工具测试的屏幕截图看起来也更好。这里不再显示导航的任何更改： 使用 Google Chrome 开发者工具查找 CLS 问题 这应该已经解决了网络上 Self Employed 的 CLS 问题。 冒险桌游优化 在 上，移动版本具有需要针对 CLS 进行优化的元素（橙色），而桌面版本则显示严重的 CLS 错误（红色）。 优化 Google Core Web Vitals 值 - 冒险棋盘游戏 在这里，我也在 Chrome 中查看问题可能出在哪里以及哪些元素被标记为蓝色。