[Support request] Weired CLS issue

[Andrew]

Hi,
I moved to Generate Press because it’s known for fast page speed. But, I’m having an Cumulative Layout Shift (CLS) issue that I’ve tried many different things but it still didn’t work. I’m starting to question that Generate Press might not be the right one for me.

Here is the information:
1) website URL: http://www.nailyourjobinterview.com
2) according to Page Speed Insight, for mobile, CLS is 0.173.
3) Under “Diagnostics”, it showed ” Avoid large layout shifts 5 elements found
These DOM elements contribute most to the CLS of the page”. I have a text only site (no images). And I’m not using a logo at the moments. I remove my “welcome bar” as well as popup plugin, but it still doesn’t work. I’m using the “marketer theme” imported from Generate Press.

I’d really appreciate if someone can tell me what is going on.

Thanks,
Andrew

[Elvin]

Hi Andrew,

You’ll have to tweak your WP Rocket settings to get the best results.

Do you have “Removed unused CSS” and/or Critical CSS enabled? Can you try disabling them and test CLS again?

[Andrew]

I disabled “Removed unused CSS” as you suggested. It resulted in lower Page Speed Insight score for mobile (went down from 86 to 83), and I got an additional warning of “reduce unused CSS”. And the same CLS issue exists (no change in the CLS number).

I wonder if this has something to do with the “search” feature of the “markteter” theme I imported from Generate Press premium …
Andrew

[David]

Hi there,

something not right with how your site is loading, so i ran a web page test on the site with WP Rocket disabled by adding the ?nowprocket query string to the URL

https://www.webpagetest.org/result/211101_BiDcQD_b4e276672c5785110791c5a18d7254ba/

First thing to note on the Summary:

Note: This test had an unusually-high first-byte time. Check for accuracy...

Thats something you need to check with the host/CDN provider.

Then on the Details tab you can see the Waterfall report.
You will notice there are significant delays in the requests being made, and quite a few DNS lookups and SSL negotiations occurring on your CDN.

But most significantly is the large amount of font requests being made and how long its taking your CDN to respond.
After the CDN font are loaded you can see fonts being requests from Google as well.

The main cause of the CLS is the font loading, on initial paint we see one set of fonts that are then being swapped for others, creating those shifts.

You need to address the issue with slow initial server/CDN responses and eliminate any unnecessary fonts.

[Author]

Posts