Angular8 SSR, First Time Input Latency Slow

Question

I try to build an Angular App with the best performance possible.
This App is very simple:

One Header (with two links), one Footer, the homepage and the about page.
The app is available here

I use LightHouse from Chrome to see the metrics.
Using default metrics:

Device: Mobile
Audits: All
Throttling: Simulated Slow 4G, 4X CPU Slowdown
Clear Storage

Behind that, I use an Nginx proxy to serve all the assets with gzip.

  gzip on;
  gzip_vary on;
  gzip_proxied any;
  gzip_types text/plain application/json text/xml text/css text/js text/javascript application/javascript image/svg+xml;
  gzip_min_length 1000;

And here is the result I get >

Of course, it's not bad, but I want to see if it's possible for Angular to make the First Input Delay below 100ms.

If I remove the clear storage parameter, I am below.
If I don't put any Throttling parameter, I am below.

But I want to make it below 100ms with those parameters. So maybe I miss some parameters when I build in production, the project is based on the Angular SSR hero app.

I saw that when I rendered the website without the JS files, it still work as long as there is no javascript interaction and I'm at 20ms in First input interaction, so maybe there is a way to load the JS script differently. It is working with a timeout >= 1500ms but it's not a good practice.

I would like to know if Angular SSR can be rendered with a First Input Time Delay < 100ms or if this stack is not able to actually.

I understand that the LightHouse audit is based on your computer performance. I obtain almost the same result using Pagespeed insight Except the Speed Index & Time To First byte because of a weak server.

The Github Project: Link removed And the command if you want to test it locally:

# Docker config for nginx with gzip compression
docker run -d --name web-server --network=host nginx:1.17.3-alpine
docker cp nginx.conf web-server:/etc/nginx/nginx.conf
docker exec -ti web-server nginx -s reload

# Build and run the SSR app
yarn
yarn build:ssr && yarn serve:ssr

# Access it at http://localhost

Belt

FYI this website weflat.fr is an Angular 8 PWA with SSR hosted on AWS and has 560ms Max Potential First Input Delay on my computer (2012 Alienware laptop with ADSL connection) with the throttling. – Mong

@Twistingnether I don't see the same result here. developers.google.com/speed/pagespeed/insights/… – Belt

i do not know Angular 8 but I do spend a lot of time optimising load times. Have you looked at your 'view trace' after audit to see whether it is compile script or execute script that is taking the time? It could also be rendering time if you are rendering each item individually (i.e. each one causes a repaint). Finally see how the scripts get called, one monolithic file will actually compile and execute faster than several smaller files most of the time so it could be a simple case of concatenating the files manually to test. – Lashaunda

I'll check on that @GrahamRitchie, do you have any links/documentation about it? – Belt

Disable Zones and you get your speed. They patch all events you have in DOM and some else and this takes a lot of time. However, what user can be irritated by 100 ms delay? I suppose that even 10% of users don't type that fast (just in terms of a tap speed) – Ramonramona

You would be amazed @Ramonramona what 100ms can do to an app conversion rate and retention. Try setting up a fiddle where there is 180ms delay on typing a character and it showing on a screen, or 180ms delays when scrolling. The app feels sluggish and you think your phone is broken. Also 100ms = about 1% increase in bounce rate -> might not seem like a lot but if you are talking £200k turnover that is £2k lost. (sorry for rant - but speed matters!! :-P) – Lashaunda

@GrahamRitchie don't confuse any delay with page bootstrap delay. The latter one occurs only once at a session and is inevitable (you have to load something and then bootstrap it) – Ramonramona

Not sure about it, but there shouldn't be any need of polyfills for such small sized app. – Erminia

@Ramonramona i wasn't clear, I just meant to see what effect 100ms has on perceived speed. The second you have an initial paint on the screen people expect the site to be responsive to touch and typing and the perceived slowness has the same effect as 100ms extra page load time. Sorry I wasn't clear and thanks for pointing that out for anyone else who comes along. – Lashaunda

@GrahamRitchie since you are using SSR I guess you need to find a way to lighten your overall app size and load speed. AFAIK SSR is only for SEO and "first impressions" meanwhile for working it still needs to load an application. Therefore, you need to split your code and make as many things "lazy load" as possible. Also, as I mentioned above you can disable Zones what will decrease build size by 100 KB! and bootstrap time. However, you would have to control the Change Detection by hand (async pipe won't work). – Ramonramona

Also, I wouldn't fully rely on "marks" that you get on measuring tools, because even Google's products don't make it 100% right and still are popular and used by millions – Ramonramona

Yes, you're right @Sergey. And I will check deeply the manual change detection. I found a great article if it interest anyone > blog.angularindepth.com/…. I will post a solution when I will have implement that. Thank you :) – Belt

@Sergey, I disabled zone.js but still, the metrics are the same. I commented out zone.js in polyfill.ts and added ngZone: "noop" in bootstrapModule. Do you do anything else? – Belt

@MathieuLescaudron first you set noop then you comment out in polyfills.ts a line with Zones import. It will load otherwise and kick the metrics. – Ramonramona

@Kardon63, I switched to React :) – Belt

ouch that hurts!, because i was thinking to do the same. Did react help you with perfomance more? – Apothegm