Chromium based-browser and vuejs destruction cost - google-chrome

I cope with a problem on a vuejs SPA application. Basically I have a page with a lot of components, and when I click a link that changes the route (either with or this.$router.push), there's a very slow destroy time, before it reloads the components.
Here is the app structure (it's a grid with rows and cells) :
<MainComponent>
<RowComponent v-for="n">
<CellComponent v-for="p"></CellComponent>
</RowComponent>
</MainComponent>
The time is not that huge when I have a low number of row, but when I have more than 100 rows, it take ~3 seconds to destroy (I took the measure with the beforeDestroy and destroy), which is the sum of all CellComponent (each component take few milliseconds to destroy).
For example, it take 3 seconds when I have 111 rows and 5 columns (so 555 cells in total).
The thing is that on Brave, Firefox and Safari, it works perfectly and does not take time.
Sometimes, with Chrome and Edge Chromium the problem disappear after few tests but if we restart the browser, the problem comes back.
At first, we thought it was Segment Analytics, but disabling it does not help. I also tried to disable all external services request (with blocking request feature in Chrome). Also the problem.
Then, we try the UBlock extension, and the problem disappeared when the extension was active. We tried a lot of test to identify which setting in UBlock can help, and we found out that it's the "Peter Lowe’s Ad and tracking server list" (https://pgl.yoyo.org/adservers/) setting that solve my problem.
So i can't understand what this setting does more than just blocking request to ads' servers. I tried to block all the requests from "Peter Lowe’s Ad and tracking server list" directly in my /etc/hosts, but I still have the problem on Chrome.
Does someone already dealt with such a problem ?

Related

How to optimize website for Chrome: waiting and download order of magnitude slower than other browsers

NB: since the answer to this could involve JavaScript or PHP programming, or general networking, or IT systems, I put it here, but if some mod thinks it's better suited for SuperUser or ServerFault, I won't object to it being moved.
I have a landing page to which I'm driving traffic through PPC. I've set up AWS CloudWatch to get RUM data, and the page is performing terribly — an average load time of 9.9s and max of 21.5!
I've done all of the "standard" optimization I can think of or research. The site is built with WordPress, running on Apache on an EC2 server. I've
Upgraded the EC2 instance to ensure I have enough memory
Written a custom plugin to filter out any other plugins that aren't explicitly used on the landing page in question
Customised my theme code so that it sets proper srcset and creates the correct image sizes on upload
Minified all the JS and CSS that I include through plugins or themes I've written
Put the site itself as a distribution to CloudFront
Installed the WP Super Cache plugin, and created a separate CDN distribution on CloudFront for it
Set appropriate cache control headers on CloudFront and told it to gzip everything
Put a facade in place of any videos
The site is blazing fast for me — "load" is less than 1 second. But my RUM says that's not the case for my users. So, I dug a little deeper. 70.2% of my visitors use Chrome, and 27.7% use other, of which almost 1/3rd are Android Browser — which as I understand it is just some sort of "Chrome Lite" — so nearly 80% of my visitors are using some Chrome variant.
Sure enough — if I load the page on Safari (to ensure nothing has expired on CloudFront), clear my browser cache, and reload the page, the first request shows a waiting time of 21.2ms, TTFB of 22.6ms, and download time of 4.8ms. The whole page shows that it's finished loading in 973ms.
Firefox is slightly slower, with the first request taking 100ms total, and the whole load about 1.75s — not blazing fast, but still within the understood "2 second" limit for good user experience.
On the other hand, for Chrome that same first request takes almost 570ms waiting and 208ms download. So, just the first request (which is 36k in size) takes almost as long to load in Chrome as the whole site takes in Safari. And that repeats for every single request, where both the waiting time and the download time are an order of magnitude slower on Chrome than on Safari (on the same device on the same network):
Whereas on Safari:
I would think "waiting" and "download" times would be primarily network driven, but I can repeat this all day long and the results are the same.
I might just assume that Chrome is not optimized for the Mac on which I'm running it, but, as I said, this all started with RUM data, so it's clearly not that. As much as I might like to, I obviously can't force all of my visitors to swap their Android devices for iPhones. Equally obviously, I can't have an average load time of 10 seconds.
So, why is my site so slow on Chrome? What else can I do to optimize this?
The landing page in question is here: https://www.chrisrichardson.info/lp/prague-b/
Note, a lot of the optimization I've done is for that page in particular, so other pages on the site might perform even worse, but I don't care about that, at least at the moment.
Hahahaha.
OK, just leaving this here for posterity's sake. The 10x latency was because Chrome had preserved in devtools from a previous session throttling to 3G. So, if you stumble upon this problem, check your throttling.
That still doesn't address my RUM issue, however, but I'll open that up as a different question.

Chrome stalled about 1 second for initial loading of the site, but zero later on freshring

I have running a site serve both via https and http.
The issue only happen when access via https, steps are
open a chrome, first time to load the only single site in HTTPS, chrome stall this inital connection about 1second.
however any immediate subsequent refreshing the same page, only have zero to couples of milliseconds, can ignore.
put aside the page(don't interact with it, for a short while, may few minutes),  then pick it up to refresh it,  it will repeat from step #1(stall about 1 second, followed by any immediate refresh almost zero stalling)
This only happen when access the site by HTTPS,  don't have this kind of issue when access by HTTP(always almost zero stalling).
Issue only seen in Chrome browser, but not safari and firefox(there is almost no stalled time), all tested in Mac OS
Would any one help to give some idea please? why the first loading introduce 1 second stalling? how to reduce that stalling time please
screenshot
sorry, this is really hard to explain the issue
I think i found the cause now, i was using a self-signed certificate for https connection, though i add it to browser exception list to trust it, it looks like chrome is being more strict on this(than others ), after switching to a trust CA signed cert. The chrome stalled time reduce to jus few millseconds for all request now, i am happy to close this question now

Finding the source of large idle within Chrome dev tools

I'm trying to find the source of some "idle" time within a certain page I'm accessing on our system. The problem is weird though to me, as I cant tell the reason for the delay. I'm running this in a single instance of chrome, no other tabs or anything.
The initial load time looks like this:
So it takes a while. But if I refresh this page within 7-8 seconds it will come back really quickly.
I initially though it was a system process on our end and ran Yii's profiler which came back with:
So, it seemed to be a non "system" issue, so went to Chrome's dev tools and the profile comes back with this:
I've read the other question What causes Chrome Timeline Frame to have so much empty white space also.
I'm trying to understanding if it's possible to identify the problem at all and why the page is rendered quickly if the page is refreshed after a few seconds of loading and why it takes so long if the refesh is called after 7-8 seconds of the initial load?
nb Some of the times might not match up as I've run the various profilers a few times. So they might apply to different page refreshes. But you can see the general trend :)

Loading website in Google Chrome randomly, sporadically results in "Waiting for www..." infinitely

I've been using Google Chrome to visit a website that I manage. The website loads every day without problem as expected. I refresh, it loads fine again, and over and over. But then occasionally, with absolutely no other external input or changes, I will refresh the webpage and randomly Chrome will not load the website under any circumstances. The tab sits with the spinning wheel forever, and the bottom simply says "Waiting on www.mywebsite.com..." ...forever. The site can work for a couple days without incident, but then seconds after it works, it stops.
Let's say I have two tabs open, and one of them is MyWebsite and that tab freezes in this manner. If I'm on google.com in the second tab tab, and I type in mywebsite.com, it will remain on the Google.com page, but show the "waiting for MyWebsite.com..." status update on the bottom endlessly. We've left it for hours before. It's like it gets stuck just requesting the website.
THEN if I wait an arbitrary period of time, usually less than an hour but always longer than about 20 minutes with no other changes, and I refresh or try in a new tab, the website will rapidly load as though nothing has happened.
I'm using the latest version of Chrome, 46.0.2490.86 (64-bit), and on the latest Mac OSX El Capitan 10.11.1
Here's what I've tried:
1) I've been able to verify that it is NOT the website. The website WILL load without incident on Firefox, Safari, mobile browsers, et al while it will not load in Chrome. Additionally, while Chrome is stuck in "waiting for website", pinging, tracert, and website availability tests all show it functional. And I should point out again that the website will work on Chrome all the time, all day, and even for 24 hours, but then the exact same page (it's indiscriminate about WHICH page it freezes on) that loaded sometimes literally 5 seconds ago, will freeze indefinitely.
2) I have no extensions running on Chrome of any kind.
3) I went to google://net-internals -> Socket and flushed all sockets and it makes no difference.
4) A hard refresh makes no difference.
5) This happens at random intervals. The website will load and refresh fine for hours. Then one time, it simply freezes. When it does this, closing the tab and opening a new one makes no difference. Flushing the cache makes no difference. No matter what, if you type in mywebsite.com, it will not load a single element of the site and instead simply do nothing but say waiting for website. We've been absolutely unable to see any pattern as to when it simply stops.
6) I am unable to verify if this happens with other websites, because I do not use other website nearly as frequently, and since the problem is random, it's hard to replicate for another site.
7) Shutting down Chrome entirely and turning it back on makes no difference.
8) This does seem to happen when I'm refreshing the site a lot. Let's say I made a minor css change, or it's a busy day and I've refreshed several times in the last 30 minutes to retrieve the latest ecommerce orders, it tends to happen with more frequency. So my suspicion is something having to do with the cache (though again, clearing the cache doesn't make a difference).
When this happens, usually no code has been changed on the back end, nothing has to have changed about the website itself whatsoever. It's been doing this for weeks and weeks.
Can anyone shine some light on this situation? It's incredibly frustrating.

Chrome - multiple requests

Whenever I send a GET-request to my webapp using chrome, according to my apache access log two identical requests (not always, but most of the times, I can't reproduce it - it's not for the favicon) get send to the sever, although only one is shown in the chrome dev tools. I deactivated all extensions and it's still happening.
Is this https://news.ycombinator.com/item?id=1872177 true and is it a chrome feature or should I dig deeper within my app to find the bug?
I think it's even worse than that. My experience here (developing with Google App Engine), is that Chrome is making all kinds of extra requests.
This is possibly due to the option that is in the Settings, checked by default:
Predict network actions to improve page load performance
Here is a really weird example: my website's page runs a notifications check every 15 seconds (done in javascript). Even after closing all tabs related to my website, I see requests coming from my IP, some random pages but also the notification check request. To me that means that Chrome has a page of my website running in the background and is even evaluating its javascript.
When I request a page, I pretty much always get another request for one of the links in that page. And it also requests resources of the extra pages (.css, .js, .png files). Lots of requests going on.
I have seen the same behavior with the development server that runs locally.
Happens also from another computer / network.
Doesn't happen with Firefox.
Also, see What to do with chrome sending extra requests?