XF 2.1 Google Core Web Vitals: CLS Issue

[tonmo]

Search Console seems to have a new report; Core Web Vitals. My report shows many pages have a CLS issue.



Reference:

Cumulative Layout Shift (CLS)

Any suggestions to improve layout using the transform CSS property?

 

[Agentos]

Any plans to fix this? As mobile speed becomes more important on ranking, a 55 score is not acceptable. This really should be priority for Xenforo.

View attachment 245493

They don't have to do this because they have a brand for keywords

 

[Agentos]

@dash besides, why do you always measure the speed of the home page? Do you have traffic thanks to threads or the home page?

 

[Kirby]

Is there anything new since the last messages? This interests me a lot!

Proper optimization can give you good results

https://developers.google.com/speed/pagespeed/insights/?url=https://www.amerika-forum.de
Custom widgets as index route; data for those widgets pulled off WordPress

https://developers.google.com/speed/pagespeed/insights/?url=https://www.das-hamsterforum.de
Standard/3rd party widgets as index route

https://developers.google.com/speed/pagespeed/insights/?url=https://www.kigasite.de
Standard XF forum list as index route

https://developers.google.com/speed/pagespeed/insights/?url=https://www.spieleforum.de
Custom widgets as index route; data for those widgets pulled off article forums)

 

[deslocotoco]

Proper optimization can give you good results

https://developers.google.com/speed/pagespeed/insights/?url=https://www.amerika-forum.de
Custom widgets as index route; data for those widgets pulled off WordPress

https://developers.google.com/speed/pagespeed/insights/?url=https://www.das-hamsterforum.de
Standard/3rd party widgets as index route

https://developers.google.com/speed/pagespeed/insights/?url=https://www.kigasite.de
Standard XF forum list as index route

https://developers.google.com/speed/pagespeed/insights/?url=https://www.spieleforum.de
Custom widgets as index route; data for those widgets pulled off article forums)

Dear Kirby, I'm getting a lot of punches from Google because my XF site is giving me a very poor result in Core Web Vitals (just 15 points).

Many of then, are about not optimized images. Do you have any tips for that?

And, what do you mean with "as index route", how i implement this solution for all the list that you showed? Any tutorials around?

Thanks man.

 

[Kirby]

Many of then, are about not optimized images. Do you have any tips for that?

Well, the obvious tip would be: Optimize the images

There used to be an Add-on from ThemeHouse, but I think it has been removed.
Another option would be https://xenforo.com/community/resources/tl-image-optimizer-for-xf-2-x.6030/

And, what do you mean with "as index route"

Index Route is a XenForo setting that lets you define which content/page you want to show as ... index, hence the name index route.
https://yourdomain.com/admin.php?options/groups/basicBoard/#indexRoute

how i implement this solution for all the list that you showed?

Follow best best practices and the recommendations given by tools like Pagespeed Insights, Web PageTest, etc.

Any tutorials around?

Plenty. Google for keywords like "Web Performance", "Web Vitals", etc.

You might also want ot try https://xenforo.com/community/resources/font-awesome-manager.8407/ which usually dose improve the scores a bit, but do not expect miracles - everything needs to be properly optimized, not just fonts.

 

[djbaxter]

Core Web Vitals report - Search Console Help

Fix poor user experiences on your siteThe Core Web Vitals report shows how your pages perform, based on real world usage data (sometimes called field data).

support.google.com

Minimize layout shift | Google Publisher Tag | Google for Developers

developers.google.com

What is Cumulative Layout Shift (CLS) and How to Optimize It?

Improve user experience and SEO rankings by optimizing for Cumulative Layout Shift (CLS). Learn how to minimize CLS issues and create a seamless web browsing experience.

www.searchenginejournal.com

 

[dking]

I changed the google ads that I had been on the site for years with newly created ads and the results changed within a week..

 

[dethfire]

I got CLS issues that appear to stem from my navigation. No real idea how to fix it. Does anyone have ideas?

WebPageTest

View this on WebPageTest.org...

www.webpagetest.org

 

[spk100]

Bumping this to see if there are any solutions to this.

 

[tonmo]

It depends on the source of your CLS, it could be anything. I see I have the following in my extra.less:

/* CLS fix 2023 */
.reaction--small .reaction-image {
width: 16px;
height: 16px;
}

... I do use some custom reactions so this helped address that. Generally, fixing image params can help address, but there could be other causes. Pasting your viewsource or devtools output into AI helps a lot with troubleshooting something like this.