angular: slow performance on google page speed due to zone.js

Any updates? I have the same issue. Thanks

Hi @JiaLiPassion - I have an open source repo with a demo on github pages with the same issue. Even without SSR polyfills takes a whole second to execute.

Lighthouse says polyfills.js takes a whole second to execute. https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdavidstellini.github.io%2Fkeyscroll%2Fkeyscroll-ng%2F

https://davidstellini.github.io/keyscroll/keyscroll-ng/ https://github.com/davidstellini/keyscroll

In addition, I also have the same issue - though it’s worse, on a production Angular site here: allfront.io Can share the repo privately with you if you still need more examples of the problem.

There isn’t much actionable here and we’re going to close this as it seems like more of a support issue related to application structuring. There are limitations to zonejs in terms of performance, and while there is a future where zonejs is optional, until then there’s nothing actionable here.

This workaround for terrible PageSpeed results is the best for me. Basically just delete all script tags and transfer state for robots. 1.6mb -> 500kb for us (after a large TransferState) and lighthouse score shot up:

import crawlerUserAgents from 'crawler-user-agents';

function isAgentRobot(req) {
  const userAgent = req.headers['user-agent'];

  if (!userAgent) {
    return false;
  }

  const patterns = [...crawlerUserAgents.map(c => c.pattern), 'Lighthouse', 'Google Page Speed Insights'];
  return patterns.some(pattern => new RegExp(pattern).test(userAgent));
}

app.get('*', res.render(indexHtml, { req, res }, async (err, html) => {
  // Remove all script tags for robots
  if (isAgentRobot(req)) {
    html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
  }

  res.send(html);
}));

If Universal has already rendered all of the HTML, why does Google need javascript for a snapshot of the page? All of the re-hydration from Angular just wrecks the results

@jcdsr Nobody wants you to share the production code. Just abstracted code which is simple enough, but still working and demonstrating the problem. How do you imagine that anybody can do anything if there is no code to understand?

@BruneXX Technically React doesn’t handle SSR. Nextjs and other framework take care of that. It is ashamed that Angular haven’t put enough resource in this area. The good news is it seems like it will be from the Angular blog

https://blog.angular.io/angulars-vision-for-the-future-3cfca5e7b448

mlc-mlapis consider that maybe the problem is not so clear so it’s not easy to understand how to reproduce the problem.

For example we have a big app and we have performance problem but we don’t know where exactly. How do you expect we can post some code removing parts of the app?

I understand also that is not easy to try to resolve these problem without code.

@JiaLiPassion That seems to work. The script valuation is now around 1,061 ms

However, I couldn’t find any documentation regarding these zone symbols. How did you find out that was specifically ‘resize’, what if there is another one or I need to exclude another thing as well? how we can debug that? also, my app is SSR as angular 8. Thanks!

I add the code on polyfills like:

is this correct?

if (typeof window !== "undefined") { (window as any).__zone_symbol__UNPATCHED_EVENTS = ['resize']; } import 'zone.js/dist/zone';

It’s frustrating to know that even if you follow all the best practises and performance guides around the world, it will not be enough to have a decent score. I’m not talking fo100%, I mean something bigger than 20-30%…

I think google devs should focus on this because it’s a common problem and have a very big impact on SEO. They suggest us to use Angular but than they penalyze these apps…,

It doesn’t make sense

This is a chronic problem of angular with medium/large apps.

There is no solution. Angular app will be always slower than classic webapp (the hope is that in the future google devs will change something).

A small solution is to develop entire app loading also components in lazy, not only modules. This will make the main bundle smaller, but it will not solve the problem.

The other solution (that is the one we choosed) is to have a service like seo4ajax, prerender.io and similars.

I’m sorry to give you this bad news, but we have been working on this for years, without a definitive solution

Bye

Il giorno ven 29 gen 2021 alle ore 09:01 JiaLiPassion < notifications@github.com> ha scritto:

@jcdsr https://github.com/jcdsr, since zone.js patch all async APIs, so if you load zone.js, all time of event listeners, setTimeout, Promise will be counted on zone.js, so I still need a reproduce repo to find out what is the reason to cause your app slow with zone.js.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/angular/angular/issues/32103#issuecomment-769645596, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHN4NFY4IJKUOKO2S6KBRQ3S4JTOLANCNFSM4ILAJQVQ .

@maxisam I wanted to say NextJs sorry I’ve mispelled that, thanks!

@jcdsr, since zone.js patch all async APIs, so if you load zone.js, all time of event listeners, setTimeout, Promise will be counted on zone.js, so I still need a reproduce repo to find out what is the reason to cause your app slow with zone.js.