[Resolved] Growing FID on mobile devices

[Kathrin]

Yes, Tom! All the scores are fine, they can’t be better and I’m really happy with them. But when I click into an input field on mobile device there is suddenly a FID of most of the time 225-235 ms but not on every post. And there is no difference if I click on the menu toggle, or the search input field or the comment field. The examples mentioned above have all a high FID when I was testing them (without any throtteling of the speed). And it seems once there was a high FID related to a post, the high FID doesn’t go away anymore. The same posts had no FID with the Standard Wordpres theme with the same settings as with GeneratePress (all Plugins and Analytics turned off) on my dummy-site – just the content was there and the images.

I don’t understand why there is a high FID score at all because the Total Blocking Time and the Time to Interactive are in the green all the time when Page Speed runs. Even the waterfalls don’t show any problem. But in the search console and in the origin data the FID is growing and growing every day. And there is even no difference if JQuery is used or not.

“mousedown” is just the action when clicking with the mouse into an input field for capturing the FID.

Greetings Kathrin

[Tom]

The theme itself doesn’t do anything special on mousedown when it comes to input fields.

Are you sure nothing is captured when you mousedown into an input using one of the default themes? I would be very surprised if this was a GP-only issue, as they’re just regular inputs – nothing crazy.

[Kathrin]

Hi, Tom I’m no expert but I read that mousedown is one of the actions captured by the Web Core Extion for measuring the FID: https://imgur.com/a/vZ9AymR; it is an eventlistener without it the First Input Delay can’t be measured: https://www.afasterweb.com/2018/12/22/when-users-click-tracking-first-input-delay/. It’s like click, keydown, pointerdown, touchstart – just an event that triggers the FID…

FID is a fielddata that can only be captured by a real user interaction as clicking into an input field. The problem behind is that an element of the theme is blocked when rendering the site, so there is a delay until the input field responds to the user.

But when there are all plugins off and there is also no Analytics used, it only can be something related to the theme, even more when the problem is gone when using another theme. There is no First Input Delay when using the WordPress Standard-Theme, but the FID is immediately here, when GeneratePress is active in its plain form.

The fielddata of my sites looks really worse: https://imgur.com/a/gqY58c0. The FID is at 244 ms and that happens to 83% of all visitors of my page. When I’m using a default theme the FID triggered by the action mousedown has a score of about 2ms and not 225ms or 244ms.

Now the FID also started growing on desktop…

It seems I’m not the only one, I tried an URL that I found here in the forum and here is the mobile FID about 197 ms: https://adventuresofmel.com/ https://imgur.com/a/T0lwubf

Greetings Kathrin

[Tom]

I can’t think of anything in GP that would cause a delay like that.

For example, here’s a test of one of our changelogs that has comment inputs at the bottom: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgeneratepress.com%2Fgeneratepress-3-0-3%2F

The FID is 32ms.

In order to really debug what is causing the delay, you would need to start with a blank page and see what the result is from it. If it’s good, then you know it’s your content/something you’re adding to the other pages. If it’s still not good with a blank page, you know it’s something else loading on the site, and you may need to deactivate certain features one by one until the culprit is found.

[Kathrin]

Ok, I will try again. It’s like bewitched that I can’t find the cause… But what I even don’t understand why has the default theme a normal FID with the same content as my GeneratePress Site and on both sites there are no plugins used…That makes no sense.

Greetings Kathrin

[Tom]

Let me know what you find out. I’ve been messing with their dev tools trying to debug small things and the results can certainly be inconsistent. An example of a simple GP page vs a simple Twenty-x page with an input would definitely be the right place to start.

Sometimes, it’s good to test their actual website (web.dev) as well to see if the issue exists there.

[Kathrin]

Tom, that is exactly was what I did. A simple default page compaired to a simple GP page and both without any plugin active. I can’t do something more. I can’t disable anything else. There is nothing left to disable. The result is always the same: default WordPress Theme normal FID, plain GP site high FID.

Greetings Kathrin

[Tom]

Can you link me to the example sites you’re testing this on (default theme and GP theme), so I can run my own tests? May help me pinpoint the issue.

[Kathrin]

Hi Tom, sure can I give you the links. But I think, I have found out something else. When I tested the FID with the Chrome Extension for Web Core Vitals the score was always high on my old posts that I had imported from blogspot.com to wordpress, but the FID seemed to be normal on posts that I had written with Gutenberg and that never had a connection to blogspot.

So I decided to convert the existing layout to blocks and it seems that the FID is gone after doing that. Following that Link: https://www.amire.com.au/blog/first-input-delay/, the FID can also be caused by html elements in connection with images: Since FID arises primarily from the disorganised download of scripts and images, the best way to address the issue is by reordering how the scripts and images are presented to the browser for download. This solution usually entails the use of HTML attributes to manage the way scripts download, image optimisation (i.e., the HTML and images) and getting rid of unnecessary scripts.

After converting the old posts to blocks, I got codes like that:

<div style="text-align: justify;">
<figure><a style="margin-left: 1em; margin-right: 1em;" href="https://b2s8zhuh.myraidbox.de/wp-content/uploads/2019/05/Gartenblog_Topfgartenwelt_Kartoffeln_im_Topf_1328Custom29.jpg"><img class="aligncenter" title="" src="https://b2s8zhuh.myraidbox.de/wp-content/uploads/2019/05/Gartenblog_Topfgartenwelt_Kartoffeln_im_Topf_1328Custom29.jpg" alt="Kartoffelanbau in Töpfen und Kübeln | Kartoffel Pflanztopf | Anleitung - Gartenblog Topfgartenwelt" data-original-height="640" data-original-width="960" width="640" height="426" border="0"></a></figure><div class="separator" style="clear: both; text-align: center;"></div>
<p>Die Sorte <i><b>Vitelotte</b></i> habe ich bereits mehrfach im Topf angebaut. Hierbei handelt es sich um relativ kleine, lila bis violette Kartoffelsorte mit erdig-nussigem Geschmack, die jedoch relativ schwer erhältlich ist. Sie ist eine meiner Favoriten. Wer auf der Suche nach einer bunten Kartoffelsorte ist, ist mit <i><b>Mayan Twilight</b></i> gut beraten. Die Schale ist gelb-rot gefleckt und damit ein Hingucker auf dem Teller.</p>
<div class="separator" style="clear: both; text-align: center;">
</div></div>

A lot of html <figure> elements….

So here are the links:
Live-Site: FID about 217-250 ms https://www.topfgartenwelt.com/kartoffeln-im-topf-anbauen-meine-tipps
Test-Site, Layout converted to Gutenberg-Blocks, FID about 3-4 ms: https://b2s8zhuh.myraidbox.de/kartoffeln-im-topf-anbauen-meine-tipps

Live-Site: FID about 200 ms: https://www.topfgartenwelt.com/zucchini-kartoffel-brei-das-baby-kochbuch
Test-Site: FID about 4 ms, blocks converted: https://b2s8zhuh.myraidbox.de/zucchini-kartoffel-brei-das-baby-kochbuch

Live-Site: Fid 220 ms: https://www.topfgartenwelt.com/bluetenendfaeule-tomaten-kalziummangel-wegen-hitze-was-tun
Test-Site as imported from blogspot.com, FID about 217-250 ms, blocks not converted: https://b2s8zhuh.myraidbox.de/bluetenendfaeule-tomaten-kalziummangel-wegen-hitze-was-tun

Greetings Kathrin

[Tom]

So it seems like all of that leftover HTML from blogspot is the culprit? It’s definitely a good idea to remove as much of that old code as possible, regardless of FID. Once you do that, are your FID numbers back to normal?

[Kathrin]

Hi Tom, on the test-site the FID went back to normal after splitting up that html-code. I haven’t tested it on the live site until now. I would ask you if it is plausible that that code can cause a growing FID?

Greetings Kathrin

[Tom]

I know that adding a lot of style attributes can affect performance – and it may be a case that inline styles on interactive elements like <a> could affect this. However, I’m not 100% sure, and couldn’t find any documentation on it.

Either way, it seems like a win-win to clean up that extra HTML. Glad you found the issue 🙂

[Kathrin]

We will see I’m not really sure if that was the cause…

Greetings Kathrin

[Kathrin]

Hi there, the problem was a CSS File from the theme. It was solved by an professionalist and now it is working really well.

Greetings Kathrin

[Author]

Posts