Archived topic
CLS Issue on most Pages since migrating to Flexbox
7 replies · Started by Gonzalo on March 15, 2023
Hi,
I recently updated the site to "flexbox" on general setting and on individual pages I migrated the layout from the legacy system to the new system.
Since doing that I am experiencing CLS issues on most pages. I had another thread open related to SVG logo width and height since I thought this was causing the CLS, but this was fixed and the CLS issue still present. So it was not the logo creating the CLS.
For example the following page:
https://svpremier.com/downtown-san-diego/real-estate/
It has a pretty significant CLS and I cannot figure out what is causing it. Any help with the layout settings are much appreciated!
Thanks
Hi Gonzalo,
It seems the reason for this is "FOUT" or flash of unstyled text.
The time it loads the font Poppins is causing the CLS. Try hosting Poppins locally to load it faster. Reference: https://docs.generatepress.com/article/adding-local-fonts/
Hi Fernando,
I did all the steps to host Google fonts locally but the CLS issue still present unfortunately.
I see. Can you try preloading your font as well? See David's instructions here: https://generatepress.com/forums/topic/local-font-pagespeed-insights/#post-1534803
Make sure to replace the URL in the code with your locally hosted font's URL.
I am so sorry to keep bothering
But I did that too and still having issues
I feel like doing al that made it worse actually.
Now the home page which was one of the few pages without CLS issues also has CLS issues on Desktop.
CLS is doing better from my end upon testing: https://share.getcloudapp.com/wbuD0lgJ
It's more of the JS and other resources from your plugins + Google Tag.
Google Tag on its own is very heavy on a site.
It's causing a significant slowdown in your site.
I would suggest using a CDN to make the delivery of these resources a bit faster as well: https://www.wpbeginner.com/showcase/best-wordpress-cdn-services/
Thanks so much for your help Fernando, much appreciated.
But this was working ok before changing to flexbox and migrating from legacy system and then I also had Google Tag, etc. I didn't change anything on the site to the exception of the GP layout.
For example, on the home page (as it is on most pages that have CLS issues)
svpremier.com
It seems the CLS is being caused by page elements that have text inside it seems (as Page Speed Insights indicated). See image below:
https://svpremier.com/wp-content/uploads/2023/03/Screen-Shot-2023-03-15-at-7.20.00-PM.png
Also, for some reason CLS in mobile testing seems ok but desktop does not...
It is my understanding that on page speed insights testing environment mobile is only 4g, so in any case mobile should be slower to load and if the Google Tag is causing the issues due to slow load then in mobile the CLS should be worse than on desktop and that is not the case.
I am sure Google Tag is slowing down my website in general, but I really do not think it is causing the CLS issues.
So sorry to keep on it, but I would love to figure out what the problem is.
