谷歌再次更新了它的算法-它是巨大的。 Core Web Vitals更新将于5月推出，重点在于速度和用户体验。 更具体地说,Google将开始测量以下所有方面:最大持续疼痛(LCP)，第一输入延迟(FID)和累积布局偏移(CLS)。
对于这篇博客文章，我们将仅关注以下元素之一：累积布局偏移以及作为前端开发人员可以做些什么来修复它。
如何知道您是否有累积版式偏移
使用Page Speed Insights (页面速度洞察)定量查看您网站的内容转移情况(以及LCP和FID等其他指标)。
由于Core Web Vitals与用户体验有关,因此,使用Airbrake Performance Monitoring这样的工具可能会有所帮助。 借助专为开发人员设计的性能监控工具,您可以通过测量Apdex分数，延迟，查询和路由信息等功能即时了解应用程序的用户体验。
将此与Moovweb相结合,它可以完全优化您的网站速度,您不仅可以测量应用程序的用户体验,还可以保持领先五步。
一旦你知道你的网站的位置,直到它的UX和CLS,它是时候修复它.
前端开发人员如何修复累积布局偏移
你有没有尝试点击网站上的一篇文章,只是让它突然移动,你最终点击了其他的东西? 或者,也许,你正在阅读一篇文章,一切都在下降。 是的，这些是累积布局变动的示例。 当您的网站上的某个元素在其他内容加载后加载时，会发生累积布局偏移。 它可能会让用户非常烦恼。 谷歌不仅会告诉你这个,但你会失去潜在的用户谁宁愿去一个不同的网站,而不是等待你的加载. 通过花时间在CLS问题影响用户之前修复这些问题来防止这种情况。
作为前端开发人员，您可以执行以下四项操作来减少网站上的累积布局偏移：
更新字体
字体为网站添加了字符和个性，但这些专用字体需要付出代价。 由于字体文件的大本质,浏览器倾向于使用FOIT,也称为闪烁的无形文本来补偿。 FOIT可能会严重减慢网页加载时间。
您应该使用”flash of unstyled text”方法(fout)，而不是依赖于FOIT。 将网站文本更改为fout的最简单方法是使用以下方法：
传统上,您可以将字体编码为:@font-face { font-family: Georgia;}
相反,你应该使用以下代码位:@font-face { font-family: Georgia; font-display: swap;}
“Font-display”使用系统字体立即通知API t0显示字体。 一旦您的字体文件已加载,它会将它与您想要在您的网站上的字体交换出来。
遗憾的是，fout方法可能不适用于所有浏览器。 如果没有，则浏览器将恢复为加载字体的默认行为。 您可以使用此工具查看这些行为的详细细分。
第二种消除字体文件加载时间过长的方法适用于所有浏览器,但它并不像更新代码行那么简单。
与上一种方法一样，您将等待默认字体完全加载，然后将其切换为自定义字体。 不同之处在于,您需要深入了解网站的CSS和JavaScript代码。
首先,您需要通过更新CSS来避免在初始页面加载时使用自定义字体。 使用系统字体尽快下载页面上的文本。
通过使用JavaScript代码，您可以实现字体面部观察者。 此代码将在加载网页字体时监控并通知您。 通过使用滚动事件，字体面部观察者可以快速加载字体。 有关完整指南,请查看fontfaceobserver GitHub页面。
作为前端开发人员，您可以进行一些简单的更改，以缩短字体加载时间。
修复您的网站上的图像
网站上的图像加载方式将显著影响和减少累积布局变化。 上传的不带属性的图像往往会导致大量变化。 这就是在向网站添加图像时最好使用以下做法的原因：
对图像和视频元素使用尺寸属性
此次更新之前，向图像添加”宽度”和”高度”属性对您的网站在Google上的排名几乎没有影响。 现在，随着核心生命体征更新，它将产生显著的变化。 您需要花额外的时间从这里添加图片的属性。
当您上传图像时：
例如：<H1>错误监控是Awesome</H1>
<p>快速查找并修复损坏的代码</p>
<img src=”Erron_image.jpg”alt=””>
<p>使用正确的错误监控软件,您可以保持代码没有错误。</p>
会发生以下情况：用户的浏览器将首先读取和下载HTML。 完成此操作后，它将最终下载映像。 当浏览器为图像腾出空间时，最终会在网页上发生内容转移。
解决这个CLS问题很简单：您只需将height和width属性标记添加到映像中即可。
例如：<H1>错误监控是Awesome</H1>
<p>快速查找并修复损坏的代码</p>
width=”450″ height=”450″>
<p>使用正确的错误监控软件,您可以保持代码没有错误。</p>
当您向图像添加宽度和高度时，您会告诉浏览器在下载HTML文档的其余部分时在网页上为其留出空间。
对于不那么严格的方法,您也可以使用CSS纵横比框。
这两种方法都不正确，但您必须使用其中一种方法来防止网站上的累积布局变化。
仔细放置动态广告
广告是可怕的,当谈到内容布局变化. 如果你不小心,他们会把你的内容传遍整个地方。
在您的网站上投放广告时，请使用以下提示以防止内容发生变化：
-
就像图片一样,您需要确保广告在您的网站上有足够的预留空间。
-
不要在网页顶部放置广告。 这可能会导致下面的所有内容发生内容转移。
-
将广告放置在网页的中间或底部附近。
这些是动态广告方面的最佳实践。 它们不仅可以显著改善用户体验，还可以进行累积布局转换。
警惕嵌入式构件
嵌入式小部件是网站游戏规则的改变者。 它们允许您为您的网站创建有趣和可移植的内容,但它们确实有显著的缺点。 与图片和广告不同,在网站上为小部件保留空间是一项挑战。
假设您有一个Twitter的小部件。 有时推文的长度可能只有几个字符;有时,它可能包括图像和链接,所以当所需的空间不断变化时,你如何知道你需要保留多少空间?
您可以通过在网站上保留空间来上传嵌入的占位符来修复此问题。 但如何做到这一点呢？
您需要创建”GlobalKey“并将其分配给您的小部件。 一旦你有一个密钥,你将能够找到你的小部件的大小,并在你的网站上保留适当的空间量为你的小部件。
结论
只有少数几种方法可用于减少网站上的累积布局偏移。 许多与CLS相关的问题都涉及到在您的网站上为图像，广告和小部件保留足够的空间和空间。 您上传字体的方式也将显著影响您网站的速度。
请记住,随着核心网络虚拟大赛在五月的推出,你应该立即开始进行这些更改,以避免下降谷歌的排名。
