FOUT issue on Newspaper theme

Hi there,

I have had a very high cumulative layout shift on desktop view for every post (homepage excluded.) Below is an example URL that you can use as a reference.

https://victorytale.com/best-sat-prep-courses-to-learn-online/

All page speed tools would not be able to detect this issue. Still, Google Search console, Cloudflare, and Core Web Vital plugins can pick this up. You can also see the issue here on this video on GTMetrix https://gtmetrix.com/reports/victorytale.com/XK0MgpW3/ (Please select the “video” bar to view it.)

In my opinion, there is a significant shift because of FOUT.

Weirdly, if I refresh the same page manually without visiting other pages, the problems completely disappeared.

Could you please tell me how to solve this?

Any response?

Hi, I have looked to your page when throtteling the speed in chrome dev tools down to 100 kb/s download, 25 kb/s upload and 150 ms latency, as I can see the font is changing (FOUT), but that’s not all

the image collage board is not loaded with the correct placeholder and it shifts between the text. I had that problem too – try to insert the picture with a classic block if you use the Core Editor of WordPress / Gutenberg. And also the image description jumps around from center to left. And the second block in the sidebar is jumping around.

https://imgur.com/a/KlX8Eaw
https://imgur.com/a/1NBpZeY

Another Element that causes CLS:
webpushrwppromptbox2_wrapper –> this one causes a high CLS.

Greetings Kathrin

Topfgartenwelt, thank you for your insights. I realize that as well. I will deal with those after FOUT.

I have tried many ways to solve this. Unfortunately, nothing works. So I wait for someone from Tagdiv to help me on this forum.

Hello Vlad,

Thank you for your answer. After changing fonts, CLS starts to drop from 0.65 to 0.40.
I also have two questions to ask.

1. Will all fonts used in the website load in the background, though I did not use some of them on a specific page?

2. How many fonts should I use on the website?

Hello Vlad,

After making massive changes, I think my website now has only 1 font. This change pushes CLS down around 30%.

However, the FOUT issue still exists. Based on the GTMetrix video above, I think the fallback font that loads first is Serif. Is there any method to change this to Sans Serif?

Furthermore, I also notice that CLS varies according to the number of texts. In other words, long articles (especially, 5,000 words+) will have more CLS than a shorter one (2,000 words) and so on.

The bottom line: Is there any way to decrease CLS even further? The number is ok in short articles, but for the long ones, CLS is still 0.8-0.9, which is way more than what Google recommends.

Hello Vlad,

Please try this post. https://victorytale.com/best-keyword-research-tools/

In terms of CLS, I think you need to use the Web Vitals Extension to see that it’s that high. This data seems to coincide with my Google Search Console account.

Can images also be the culprit? I add some images and see the CLS increases. I also tried to add images, as Topfgartenwelt said, by using the classic editor. Unfortunately, it increases CLS at the same rate as adding them by regular blocks.

Hello Vlad,

Thank you for your response. Please tell developers that CLS measured these sources below vary wildly in recent weeks. In early January, both provide similar values, but now they are vastly different.

1. All page speed tools and lighthouse —-> My site’s CLS is still almost 0 in this case.
2. Core Web Vital extension/Google Search Console ——-> My site’s CLS becomes very high (0.15-0.9) in recent weeks. I managed to decrease it by 30%-40% after eliminating redundant fonts. However, they are still much higher than Google’s recommended values.