31

About two weeks ago, a Chrome update crippled users of my angular app. I load a lot of data but the entire single page application loaded in < 4 seconds but every single user went to > 40 seconds after updating Chrome 2 weeks ago. I did not experience the problem, but when I upgraded Chrome to 64.0.3282.167 from 63.0.3239.132, the problem also began for me.

Somewhere between Chrome 63.0.3239.132 and 64.0.3282.167, there was a change that basically slowed my Angular app to a crawl. It affects loading and rendering across the board and made the entire app almost unusable. I've been looking for the issue for a few days with no joy.

Does anyone have any insight or recommendation on what could cause such a performance degradation?

Here is a screenshot of my network tab. All of this used to be very fast before the Chrome update and now it just crawls.

enter image description here

If I set:

httpProvider.useApplyAsync(true), it alleviates the problem but my application is huge and this causes a lot of erratic behavior in a 5 year old application.

12
  • Could you add any information about the app? How is it loaded, what modules / libraries used, etc.? Is the content network / computationally heavy? Feb 19, 2018 at 14:58
  • Data is primarily loaded after the user logs in, it is indeed network and computation heavy. Angular - Animate, Chart, routing, etc. ui-bootstrap components. Even a spinner.gif that used to take subseconds to load now takes 20 seconds to load if I look at the Chrome console. Feb 19, 2018 at 15:49
  • That blue line is the "Content Download", and if it takes this long to download, then this might be a server-to-client issue. Any details about the server? Feb 19, 2018 at 16:11
  • Tomcat is the server. The catalyst is definitely the chrome version though or something Chrome doesn't like about the server... Feb 19, 2018 at 17:14
  • On Firefox and Safari this problem isn't happening.... Feb 19, 2018 at 17:15

2 Answers 2

1

I'm not sure if this is still an issue, but I know that Google has continued to ramp up security measures with Chrome. This is especially true with HTTPS and I believe Google is pushing for everything to move to HTTPS. Certificates that are not clean (several criteria for this) present problems and may be requiring extra measures to process. I believe there is an add-on (or built-in) for Chrome dev tools that can break out the TLS processing to show you more detail.

0

A high TTFB reveals one of two primary issues. Either:

  1. Bad network conditions between client and server, or A slowly

  2. responding server application

To address a high TTFB, first cut out as much network as possible. Ideally, host the application locally and see if there is still a big TTFB. If there is, then the application needs to be optimized for response speed. This could mean optimizing database queries, implementing a cache for certain portions of content, or modifying your web server configuration. There are many reasons a backend can be slow. You will need to do research into your software and figure out what is not meeting your performance budget.

If the TTFB is low locally then the networks between your client and the server are the problem. The network traversal could be hindered by any number of things. There are a lot of points between clients and servers and each one has its own connection limitations and could cause a problem. The simplest method to test reducing this is to put your application on another host and see if the TTFB improves.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.