Amphtml: amp-list rendering FID issue: longer than 300ms (mobile)

Created on 24 Jan 2020 · 17Comments · Source: ampproject/amphtml

Hello all,
I apologize for adding this ticket here. From my experience, I cannot get an answer to the following issue in stackoverflow or google's webmaster community.

About two weeks ago, or so, in the search console, our Mobile Usability and AMP countdown was dropped suddenly. After that, our page search impressions count dropped as well. All the pages pass all AMP verification tests, including an offline AMP benchmark test(https://github.com/ampproject/ampbench) and others. Testing live URL shows that it is valid but this is just wrong.

The only clue is the new 'Speed Enhancement' report in the search console, which indeed showed many pages in Error status due to "FID issue: longer than 300ms (mobile)".
Trying to test some of these pages in PageSpeed Insights shows the problem:https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdeal.guide%2Fcategory%2Fsmartwatch.html

Please ignore the content or the business case. The page was stripped down from all of our core features just in order to minimize and find the problem and we have not launched yet...

After a lot of lighthouse tests, it looks like amp-list rendering is causing the problem. Even after stipping down most of the content and binding in each item, we are still higher than 300ms, which is a problem.
We have tried to cahange amp-list binding to binidng=no/refresh but it doesnt help.

So - was there any change to amp-list/mustach lately? is there any recommendation on how to avoid FID while processing amp-list?

Any help will do. Let us know if we are doing something wrong...

How do we reproduce the issue?

Run the page speed insights test and review the amp-list in the page.
The problematic amp-list is the one with id="mainList". Rendering just a small json caues FID higher than 300ms.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdeal.guide%2Fcategory%2Fsmartwatch.html
The full url is : https://deal.guide/category/smartwatch.html

What browsers are affected?

All browsers, test in mobile mode/Page Speed Insights

Which AMP version is affected?

2001141706210

I apologize in advance if this is not a bug, but I'm clueless on how to solve this issue.
Thanks in advance for any help.

High Priority Bug performance

Source

dkhan11

Most helpful comment

@dkhan11 You don't have to use the JS based AMP Optimizer. An alternative are the GO transformers. @matthiasrohmer recently created an integration for Django which might help as a starting point.

sebastianbenz on 30 Jan 2020

❤2

All 17 comments

//cc @kristoferbaxter

sebastianbenz on 24 Jan 2020

@dkhan11 Can you provide an example URL?

kristoferbaxter on 24 Jan 2020

@dkhan11 Can you provide an example URL?

Hi, I apologize, I thought that it was clear from the page speed insight link. Here is the URL used in the above speed test: https://deal.guide/category/smartwatch.html

dkhan11 on 24 Jan 2020

Awesome! I'll take a look.

kristoferbaxter on 25 Jan 2020

Awesome! I'll take a look.

My search console enhancement report recognizes fewer and fewer pages as AMP or Mobile. Might this error explain this situation?

dkhan11 on 28 Jan 2020

Sorry, I don't have an answer on how search identifies documents. However, I can look into any issues causing the page to have a lower FID measurement.

kristoferbaxter on 29 Jan 2020

Sorry, I don't have an answer on how search identifies documents. However, I can look into any issues causing the page to have a lower FID measurement.

Ok. I just thought that the two issues might be related. Please let me know if you can find what causes the FID error.

dkhan11 on 29 Jan 2020

@dkhan11 - Would it be possible to move over to use @ampproject/toolbox-optimizer on the canonical domain here?

Tracing thru the site, it looks like some early work could be avoided.

kristoferbaxter on 29 Jan 2020

@dkhan11 - Would it be possible to move over to use @ampproject/toolbox-optimizer on the canonical domain here?

Tracing thru the site, it looks like some early work could be avoided.

It won't be easy. Do you think it might reduce the time it takes to render amp-list items?

dkhan11 on 30 Jan 2020

Converting a static document over to try it out will give you a good idea.

It wont fix all the performance concerns, but it puts you on the right path for #26544 which I just filed.

kristoferbaxter on 30 Jan 2020

As for the time spent in amp-list right now, here's the vast majority on a Nokia 2 (my low-end hardware of choice).

This method is called during the microtask loop here.

Screenshot from 2020-01-29 15-15-14

This is where sanitization is happening for the contents of the mustache template used in this amp-list.

I prototyped removing sanitization (something we may not be able to do), and found the following results on much higher end hardware.

| Before | After |
| --- | --- |
| 670ms | 270ms |

kristoferbaxter on 30 Jan 2020

@kristoferbaxter, Thanks for the update. Looks like removing sanitization can really help. I will try to optimize my pages, but I have a python backend so it is harder to integrate it into my build.

dkhan11 on 30 Jan 2020

sebastianbenz on 30 Jan 2020

❤2

@sebastianbenz thanks, will take a look. I'm using Flask but it might be a good starting point.

dkhan11 on 30 Jan 2020

Thanks, @sebastianbenz for getting me into this 🙂@dkhan11: that shouldn't hurt. The basic transformation functionality and the Go-C-Python magic is happening here: amp.utils.Transformer.

Unfortunately this util indeed currently has a dependency to Django by checking for a key in the settings. I'll try to decouple this somewhen today then you should be good to give this a try in your setup if you want.