简体繁体 English

如何修复搜索控制台中的累积布局移位 (CLS) 错误

[英]How can i fix Cumulative Layout Shift (CLS) errors in search console

原文 2021-03-04 08:12:38 9 3 css/ responsive/ opencart2.x/ google-search-console/ cumulative-layout-shift

i have a website indiabazaaronline.com that shows Cumulative Layout Shift(CLS) issue >.25 errors in google search console.我有一个网站indiabazaaronline.com显示谷歌搜索控制台中的累积布局移位（CLS）问题 >.25 错误。 Due to this we recently lost 50% organic impressions and click.因此，我们最近失去了 50% 的自然展示次数和点击次数。 i have no idea how this will be fixed.我不知道这将如何解决。 Any clue or tutorial that will lead to fixing this issue will be highly appreciated.任何将导致解决此问题的线索或教程都将受到高度赞赏。 I tried removing the sticky navigation header but still the same error is there.我尝试删除粘性导航 header 但仍然存在相同的错误。

3 个解决方案

You can use Minify JS and CSS you can find it here: matthiasmullie |你可以使用 Minify JS和CSS你可以在这里找到它： matthiasmullie | minify缩小

and for the images you can change the images format to WEBP if you don't know how follow this link: https://stackoverflow.com/a/66439288/7660119对于图像，如果您不知道如何使用此链接，您可以将图像格式更改为WEBP ： https://stackoverflow.com/a/66439288/7660119

There is no one right answer to improving CLS.改进 CLS 没有一个正确的答案。 Rather, you need to run a page speed test and address issues unique to your site.相反，您需要运行页面速度测试并解决您网站特有的问题。

Test your site with Google Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Findiabazaaronline.com%2F使用 Google Page Speed Insights 测试您的网站： https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Findiabazaaronline.com%2F
Click on each "Opportunity" and address any specific recommendations.单击每个“机会”并解决任何具体建议。
Below the "View Tree Map" select "Show Audits Relevant to: CLS" and address any specific recommendations.在“查看树图”select“显示与：CLS 相关的审核”下方并解决任何具体建议。 Selecting "Avoid Large Layout Shifts" for example identifies which DOM elements specifically are causing your layout to shift.例如，选择“Avoid Large Layout Shifts”可以确定哪些 DOM 元素会导致您的布局发生变化。

Specify width and height in your images and remove the propety loading="lazy" if you have it.在图像中指定宽度和高度，如果有的话，删除属性 loading="lazy"。 That work good for me.那工作对我有好处。