Home Blogs 前端开发人员如何修复累积布局偏移
Applications

前端开发人员如何修复累积布局偏移

About The Author

Outline

谷歌再次更新了它的算法,这是很大的。 Core Web Vitals 更新将于5月推出,所有更新都与速度和用户体验有关。 更具体地说,Google将开始测量以下所有项目:最大内容难题(LCP),首次输入延迟(FID)和累积版式偏移(CLS)。

在这篇博客文章中,我们只关注其中一个元素:累积版式偏移,以及作为前端开发人员,您可以做些什么来修复它。

如何知道是否有累积布局偏移

使用 Page Speed Insights 可定量查看您网站的内容转移情况(以及LCP和FID等其他指标)。

由于核心Web虚拟化是关于用户体验的,因此拥有一个像Airbruck Performance Monitoring这样的工具可能会有所帮助 。 借助专为开发人员设计的性能监控工具,您可以通过测量Apdex评分,延迟,查询和路由信息等功能,即时了解应用程序的用户体验

结合Moovweb,它完全优化您的网站速度,您将在一个很好的地方,不仅测量您的应用程序的用户体验,但保持领先的五个步骤。

一旦你知道你的网站站在哪里,它的UX和CLS,它的时间来修复它.

前端开发人员如何修复累积布局偏移

你有没有尝试过点击一个网站上的一篇文章,只是让它突然移动,你最终点击了别的东西? 或者,也许,你正在阅读一篇文章,所有的东西都下降了。 是的,这些是累积布局偏移的示例。 当您的网站上的元素在其他所有内容加载后加载时,会发生累积布局偏移。 对用户来说,这可能非常烦人。 Google不仅会将你的这个,但你会失去谁愿意去一个不同的网站,而不是等待你的加载的潜在用户。 通过花时间在CLS问题影响您的用户之前修复这些问题来防止这种情况。

作为前端开发人员,您可以采取以下四种措施来减少网站上的累积布局偏移:

更新字体

字体为网站添加了字符和个性,但这些专业字体需要付出一定的代价。 由于字体文件的大特性,浏览器倾向于使用FOIT(又称不可见文本的闪存)进行补偿。 FOIT可能会严重减慢网页加载时间。

您应该使用”非样式文本闪存”方法(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代码,您可以实现Font Face Observer。 加载网页字体时,此代码将监视并通知您。 通过使用滚动事件,Font Face Observer可以快速加载字体。 有关完整的指南,请查看 fontfaceobserver GitHub页面。

作为前端开发人员,您可以进行一些简单的更改,以缩短字体加载时间。

修复您的网站上的图像

图像在网站上的加载方式将显著影响和减少累积布局偏移。 上传的无属性图像往往会导致大量偏移。 这就是为什么在向网站添加图像时最好使用以下做法的原因:

对图像和视频元素使用大小属性

在此更新之前,向您的图像添加”宽度”和”高度”属性对您的网站在Google上的排名几乎没有影响。 现在,随着核心生命体征更新,它将产生显著的变化。 您需要花额外的时间将图像的属性包含在这里。

当您上传图像时:

例如: <H1>错误监控为Awesome</ H1>

<p>快速查找和修复损坏的代码</p.>

<img src=” Erron_image.jpg”alt=””>

<P>使用正确的错误监控软件,您可以保持代码无错误。<>

发生以下情况:用户的浏览器将首先读取和下载HTML。 完成后,它将最终下载映像。 最终发生的是网页上的内容转移,因为浏览器会为图像腾出空间。

解决这个CLS问题很简单:你需要做的就是把高度和宽度属性标签添加到你的图像中。

例如: <H1>错误监控为Awesome</ H1>

<p>快速查找和修复损坏的代码</p.>

width=”450″ height=”450″>

<P>使用正确的错误监控软件,您可以保持代码无错误。<>

向图像添加宽度和高度时,您告诉浏览器在下载其余HTML文档时在网页上为其留出空间。

对于不太严格的方法,您也可以使用 CSS宽高比框

这两种方法都不正确,但您必须使用其中一种方法来防止网站上的累积布局变化。

小心放置动态广告

广告是可怕的,当涉及到内容布局变化. 如果你对他们不谨慎,他们会让你的内容遍布各地。

在您的网站上投放广告时,请使用以下提示来防止内容发生变化:

  • 就像图片一样,您需要确保广告在您的网站上有足够的预留空间。

  • 不要将广告放在网页的顶部。 这可能会导致下面所有内容的内容发生变化。

  • 将广告放置在靠近网页中间或底部的位置。

这些是动态广告的最佳实践。 它们不仅可以显著改善用户体验,还可以累积布局变化。

警惕嵌入式构件

嵌入式构件是网站的游戏规则改变器。 它们允许您为您的网站创建有趣和可移植的内容,但它们确实有显著的缺点。 与图片和广告不同,在您的网站上为小工具保留空间可能会很有挑战性。

假设你有一个推特小部件。 有时一个推文可能只有几个字符长;其他时候,它可能包括图像和链接,所以你怎么知道你需要保留多少空间,当所需的空间不断变化?

您可以通过在网站上保留空间来上传嵌入的占位符来解决此问题。 “怎么招?

您需要创建”GlobalKey“并将其分配给小组件。 获得密钥后,您将能够找到小组件的大小,并在网站上为小组件保留适当的空间量。

结论

您只能使用几种方法来减少网站上的累积布局偏移。 许多与CLS相关的问题涉及到空间和在您的网站上为图像,广告和小部件保留足够的空间。 您上传字体的方式也会显著影响网站的速度。

请记住,随着Core Web Vitals在5月的推出,您应该立即开始进行这些更改,以避免在Google的排名中下降。