[Resolved] Growing FID on mobile devices

[David]

Looks good to me 🙂
The extra jQuery request is being made by this function: ai_wait_for_jquery()
If you inspect the Source of the site and search for that you’ll see the function near the end of the source code.

The only reference i code find for that function was in the Ad Inserter plugin:

https://pluginarchive.com/wordpress/ad-inserter/v/2-6-6

[Kathrin]

Ok, I have installed AdInserter and you think that JQuery Request is causing the FID? And what about all the different JQuery versions that appear with Complianz and without Complianz. I’m not sure if I ever find the cause for the FID. 🙁

When I tick on optimize CSS everything seems to be ok at first, but on every second loading there is a CLS of 0,022 reported for mobile devices, but none for desktop. When I controll it in DevTools there is a layout shift of 0,06 because of text:

At first there are two dates, a wrong and a right one and than it looks normal – it’s just a flush:

View post on imgur.com

View post on imgur.com

But it also not happens all the time…
The CLS gets worse when I deactivate cash dynamic css in customizer.

How can I avoid that?

These elements are shifting: span class author name and svg viewBox.

Greetings Kathrin

[David]

I cant say whether the extra jquery request is the direct issue with FID… but jQuery makes up for the largest amount of JS… and it also looks like the AdInserter request includes Polyfills which I believe is the cause for this PSI Opportunity being reported:

Avoid serving legacy JavaScript to modern browsers

Best way to test is to temporarily disable the plugin to see if theres an improvement.

For the date issue – GP outputs both the Published Date and Updated Date but only displays one of them.

If you want you can add the PHP Snippet provided here – and it will only output the latest date:

https://docs.generatepress.com/article/generate_post_date_show_updated_only/

This should stop any CLS being related to the two dates.

[Kathrin]

Thank you David, the code helped to reduce the CLS, but there is still one issue:

This is also shifting: <svg viewBox=”0 0 512 512″ aria-hidden=”true” role=”img” version=”1.1″ xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; width=”1em” height=”1em”>

How can I avoid that?

And you are also right, that avoid serving legacy javascript comes from AdInserter. I had already found it out yesterday.

I will ask concerning ai_wait_for_jquery() and FID at AdInserter. Maybe they know something.

Greetings Kathrin

[Kathrin]

I have talked to the developer of AdInserter and he said that JQuery should not be defered. As I understand I should keep it as a render blocking resource. What do you think about that? I have really mixed feelings about this.

Greetings Kathrin

[David]

Best practice is to NOT defer jQuery – as the site may try running scripts that rely on jQuery before it is loaded. This can cause breakages.

[Kathrin]

Ok, thank you very much for your input. I have now excluded it from deferring and hope that things get better. Or the cause is something else…

But maybe you can help me here: This is also shifting: <svg viewBox=”0 0 512 512″ aria-hidden=”true” role=”img” version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” width=”1em” height=”1em”>

How can I avoid that?

Greetings Kathrin

[David]

I can’t actually see the CLS in any of the tests i perform as its only 0.001 – i would ignore it.

[Kathrin]

Ok 🙂 Thank’s for your help!

Is there a file that should be excluded from optimize CSS delivery in WP Rocket because it could lead to problems?

Greetings Kathrin

[David]

The CSS for the terms is loaded via the main.min.css

[Kathrin]

Thank you very much! Should I exclude main.min.css from CSS optimizer in WP Rocket?

I found some way to test the FID with the Web Core Vitals Extensions for the Chrome Browser and the FID is somehow related to the mobile menu: https://imgur.com/a/a2l4G9K and it is connected to “mousedown”. It happens not on every site, but on affected sites the FID is always over 200 ms and sometimes also 280 ms.

When I click into the search field the FID is bad as in the Dropdown-Menu and also connected to “mousedown”: https://imgur.com/a/aZdHepc

For example:
https://www.topfgartenwelt.com/ofenkartoffel-raeucherlachs-dillsauce (but there also articles with Recipe Maker without FID Problems)
https://www.topfgartenwelt.com/kochbuch-original-indisch-buchrezension (I have already tried to disable the Book Review Block Plugin, but there is no change if it is on or off)
https://www.topfgartenwelt.com/automatische-bewaesserung-im-garten-planen-gardena-micro-drip-system-erfahrung (here is no special Plugin used but the FID is also there)

I have tried to disable Complianz and AdInserter, but the FID stays the same even there is no JQuery used. It seems that the FID is coming from the theme itself and one of the two long tasks that are related to the theme. Even I disable all other plugins, the FID stays at over 200 ms on the affected pages.

For example:
https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fba04y21.myraidbox.de%2Fzucchini-kartoffel-brei-das-baby-kochbuch
Total Blocking Time 0, Time to Interactive 1,8, FID 215,92 ms

Can you please solve this? I bought GeneratePress because I wanted a lightweight theme after having a lot of troubles with my old one and now I’m facing a FID that can’t be solved because the theme itself seems to be the problem on mobile devices even the overall scores are brilliant.

Greetings Kathrin

[Kathrin]

Any idea? 🙁

The Problem with the FID is immediately gone when I activate a WordPress Default Theme. And the cause is also not the custom CSS.

Greetings Kathrin

[David]

I am not able to see the FID issue with mobile menu js in my browser developers tools. Every test i perform on your site is reporting a tiny FID value – in most cases around 2ms.

Further to this i have tests multiple GP sites with the same setup and Google Origin / Field Data on average has a FID of 33ms.

Switching Themes – if you have any other scripts such as Google Analytics add to a GP Hook for example, then those scripts will not be present on a different theme – which may give some pointers to an issue with the Total number of scripts being loaded.

Finally – are you still testing your site with a Throttled network and Reduced CPU control – as this will contribute to Origin Data…..

[Kathrin]

Hi David, I didn’t do any test with throtteled data, the tests were all done with the normal speed – just in Chrome Dev Tools modulating a G4 mobile device. I have tested the plain GeneratePress Theme without Google Analytics or any Plugins against the Standard WordPress Theme with the same setting. As I wrote it happens not on every URL…

All my 250 URLs are flagged with need improvement for FID in Google Search Console and in Origin Data and I never had a problem with FID until 3 weeks ago.

Greetings Kathrin

[Tom]

Hi there,

I’m not sure I understand – I’m seeing excellent scores in insights from your site.

When are you experiencing FID, exactly? When tapping into an input field on mobile?

[Author]

Posts