[Support request] “Ensure text remains visible during webfont load” Core Web vitals error

[Andrew]

Sure, see the link below which is a screen print of one I ran just now, FCP and LCP both failing

Thanks

[David]

I can see a diagnostic titled: Minimize main-thread work on your screenshot.
That generally is an issue when theres a LOT of Scripts or styles being thrown at the page. Scripts can tie up the browser stopping it from doing stuff, like render the page.

Could be a script on the page thats causing the google bot simulator to lose the plot.

The fact that its sporadic could point the finger at the way WP Rocket is optimizing CSS / Scripts.
You may want to check with their support to see if they have any insight on that.

[Andrew]

Thanks David – much appreciated!

[David]

You’re welcome – let us know if you find anything !

[Andrew]

Hi David

After some investigation into this, I have found that jQuery is not loading – when we run pages through Developer tools – we get the error message: jQuery is not a function

Any ideas what might be causing that from a theme perspective

Thanks
Andrew

[Fernando]

Hi Andrew,

See here for Tom’s response with regards to an issue like this: https://generatepress.com/forums/topic/uncaught-typeerror-jquery-is-not-a-function/#post-1213514

Upon viewing your website, the issue indeed seems to be sporadic. If I add ?nowprocket to the URL, I get this error: https://share.getcloudapp.com/E0ug7Y9j

This may mean the WP Rocket isn’t the cause of the issue. If you have other optimization mechanism, you’ll need to check those as well.

Moreover, here is an article by Kinsta discussing other potential causes of the issue: https://kinsta.com/blog/jquery-is-not-defined/#potential-causes-of-the-jquery-is-not-defined-error

This article also includes steps on how to address the issue.

Hope this clarifies. 🙂

[Andrew]

Hi Fernando

Thanks for the info – after a bit more digging around and speaking to Kinsta today, I have identified that the problem is not being caused by WP Rocket, but for some reason on posts only (not on elemntor pages like the home page) the jQuery is not being called upon.

I have removed some jQuery from the header which was used for the menu, which stops the error message of “jQuery not defined” but still no jQuery is loading on posts: e.g. https://staging-standoutcv.kinsta.cloud/blogs/cv-writing-advice-blog/115702276-example-of-a-good-cv

And if you look at the source code, you can see that there are no jquery scripts are appearing – whereas on elementor pages like the homepage: https://staging-standoutcv.kinsta.cloud – they do appear

I’ve tried disabling every plugin but the error keeps happening – I also tried changing the posts from classic editor to guttenburg – made no difference

What could be causing the jquery to be called on elementor pages, but not on normal posts?

Thanks
Andrew

[David]

GeneratePress doesn’t use or enqueue jQuery unless you use the Sticky Navigation option.
If you have a plugin that requires jQuery then it should make the request.
If you have a custom function that is dependent on jquery then you can enqueue it manually:

https://generatepress.com/forums/topic/infinite-scroll-on-single-post-load-more-button-on-blog-post-archive-category/#post-2055406

However, on that URL you provided I do not see any errors in the console or any jQuery dependencies in the source.

[Andrew]

Thanks David, are you saying that the posts are not loading jQuery because they do not use them?

[David]

Correct.
WordPress does not automatically load jQuery.
GeneratePress does not automatically load jQuery.

It requires a plugin or custom function to make the jQuery request.

But as I said I do not see any errors or jquery dependencies no this URL:

https://staging-standoutcv.kinsta.cloud/blogs/cv-writing-advice-blog/115702276-example-of-a-good-cv

[Andrew]

Ok so the reason that no jQuery scripts load on posts like that is simply because they aren’t needed – not because there is an issue with the posts right?

[David]

simple answer : Yes

[Andrew]

Thanks David, sorry I missed the fact you said “correct” at the beginning 🙂

Ok, so going back to the original reason for starting this thread (trying to reduce FCP and LCP) – I’ve stopped the generatepress fonts loading, I’ve removed all jQuery from the posts… but we are still getting high FCP and LCP on all posts, even when there is little to no content on the page… like this: https://staging-standoutcv.kinsta.cloud/uncategorized/test-for-j

Can you see any obvious reason why we’re getting high FCP and LCP there?

[David]

I ran two webpage tests:

1. From. Virginia US

https://www.webpagetest.org/result/220311_BiDc12_C15/1/details/#waterfall_view_step1

2. From London UK

https://www.webpagetest.org/result/220311_AiDc8M_DGP/1/details/#waterfall_view_step1

Both show a really slow initial connection time.
Might be worth asking the Host to do some investigations on that.

[Andrew]

Hi David

Thanks, that is the staging site so it is a lot slower than the live site – hosting is on Kinsta so is pretty fast.

Apparently we have a lot of fonts loading on the site, so I checked the typography and we seem to have lots of “font family” options appearing, see pic in link.

I couldn’t find anything in your documentation about these – I assume they are different variations of the font, but how do they work and does the site really need all of them loading? I tried to remove them, but when I came back to the typography settings, they were all back again.

Could getting rid of some or all of these speed up the pages? And if so, how do I do it?

Thanks
Andrew

[Author]

Posts