I've been preparing a blog post about first input delay and did one more test on my Alacatel One phone and see that we have a really long task that happens late when testing https://en.m.wikipedia.org/wiki/Barack_Obama (after onload, the user see all content) that on my phone lasts for 881 ms = the user can't do anything = if the user presses a key etc it causes a first input delay. My guess is that this is the biggest cause of high FID on mobile.
I've collected a trace log (you can drag and drop the trace-1.json file into devtools/performance tab in Chrome to see what it looks like) so you can use it to zoom in and better see where the time is spent.
This point directly to ResourceLoader adding too much CSS at once. It seems like the client-side code is already chunking up CSS for @import calls that need to be at the top, so there is already some logic that could be reused to reduce the size of nextCssBuffer.
https://web.dev/optimize-long-tasks/ might be a helpful reference when working on this task.
- Using a phone, visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog
- Tap an image and verify that the image overlay appears and works.
- Exit out of the image overlay and expand and collapse sections of the article. Verify that the sections can expand and collapse.
- Reload the page, and verify that the sections that you previously expanded appear expanded after reloading the page.
QA Results - Beta
QA Results - Prod