I have an app which was built on ionic.
We're using Firebase to handle all our data, with no server for now.
There's a problem we've been experiencing for a long time now - the loading time of the app (exluding render time) is sometimes 4 seconds but sometimes take 30-60 seconds!
I was not able to reproduce this on purpose. Not on our app and not on a clean app.
However, I took snapshots of the network tab at one of the times it did happen, here they are (order is left to right): http://postimg.org/gallery/2aecew7lu/
You can see a long delay (45s?) at screenshot 8. After that the app was "released" and loaded.
I really hope you guys can help. Thank you
Related
I have WordPress shared hosted server with Hostinger and wanted to deploy my react app there. I connected to the server with SFTP and copied and pasted the build folder's contents into public_html/test-gpu-app.
The app works, but I've experienced the strangest issue: when accessing the page, a blank page is displayed for 5 or so seconds, and full render takes nearly 8 seconds.
I've deployed the boilerplate react app to ensure it wasn't something I coded poorly/inefficiently, and it experiences the exact same issue. When deploying to Vercel, the app loads instantly, so it's clearly something to do with the server.
Server usage isn't anywhere close to maxed out, and every other page on the site loads quickly. I'm at a loss, can't figure out where to go from here.
The page:
https://artofpc.com/test-gpu-app/
GTMetrix test:
https://gtmetrix.com/reports/artofpc.com/e9IhhRzi/
Any help would be massively appreciated.
If you run the chrome performance profiler, you will see that the only function calls happening when the content loads are by a script called cmbv2.js, which appears to be a data tracking framework or something like that.
Your app code is downloaded only # 5 seconds or so, likely an arbitrary timeout by the lib. I'm guessing this is something like an analytics framework waiting to display content before JS initializes so that users don't see flashes of content. Do you have settings that automatically defer JS or anything like that by third party libs?
It reminds me of something like a layer that sits between HTML and the end user, auto deferring JS execution or something like that.
Be warned of this smell, future internet folks!
My website is in AngularJS v1.7.2 (using Laravel PHP framework as backend).
Current issue is the website freezes after resizing several times (2-3 or more times). I have checked Google chrome Task Manager Tool and it showing around 100% of CPU usage at the time of freezes. Same issue also occurred while testing the site in mobile by changing orientation several times. I have already tried solution like bind one way, add track by for ng-repeat, using tools like Batarang but no luck yet. Is there any proper solution for the issue. Please let me know.
UPDATE
The website almost finish. Only the freeze issue currently blocking us. The website mainly containing song, album, playlist, artist.
On home page there is banner (4 images) using iosSlider . then there are per category (8 categories) album (5 album each). on right sidebar there are song list. There are other pages like category page, artist page, album page, song page, user profile pages etc. Also there is a customised player using angular soundmanager2 API. Generally while viewing in desktop normally there no issue so far. But if I check using Device Toolbar (CTRL+Shift+M) and switch to other pages and rotate 2-3 times it just freezes. Even can't reload or refresh the page tab. If I check Chrome Task manager (Shift+Esc) it shows around 100% CPU usages
that time. Thing to notice the issue only occurring if I route to other page(forward or backward or both) then rotate 2-3 times. I am using AngularJS Batarang to sort out the issue but with no clue still now
SOLVED
The issue was with iosSlider. After removing the iosSlider no crash issue now.
Scenario:
I have a page which loads additional data when scrolled to the end of the page. Most of the times the Content Download is slow and some times it is fast. Though, the response data is only few kb. This issue is only seen in chrome (Chrome Version: Version 67.0.3396.99 (Official Build) (64-bit)).
What might be the solution here?
In chrome, Content Download takes sometimes shorter time and sometimes longer time for same request.
The requests are to the same API.
As suggested here, that frontend might be doing a lot of work!
So, I checked the profiling and it is not the issue.
Why is there a lot of idle time in the second call? How to reduce the Content Download time?
Edit
When click event is triggered in browser during loading, the content loads faster.
My app features a MapContainer that used to work well in the simulator as well as on the device. However since yesterday (after I sent a build and updated CN1 libs) the simulator has become very sluggish with an app nearly unresponsive (see I can click once on any button or menu and never again since the app does not react any longer). Moreover the MapContainer (GoogleMap ver 19 that was just updated) sometimes shows a 404 page as depicted below :
Even the Network Monitor gets unresponsive and while starting the app I get the following error :
java.lang.NoSuchFieldException: scale
at java.lang.Class.getDeclaredField(Class.java:2070)
at com.codename1.impl.javase.JavaSEPort.isRetina(JavaSEPort.java:188)
at com.codename1.impl.javase.JavaSEPort.<clinit>(JavaSEPort.java:390)
at com.codename1.impl.ImplementationFactory.createImplementation(ImplementationFactory.java:69)
at com.codename1.ui.Display.init(Display.java:467)
at com.codename1.impl.javase.Executor$1.run(Executor.java:112)
Are these 3 issues related to each other, is it linked to the update,a nd what should I do to make my app work again as usual in the simulator ?
Please note that on the device the generated build works well.
Any help appreciated,
I've got fairly large webapp built with React, Redux and React Router. It works fine until I open dev tools in Chrome and it noticeably slows down in 100 times. I've tryed to profile app in Chrome, but when I start profiling again using Chrome it starts working as fast as with dev tools closed and everything is OK.
Checked also Safari and Opera - their dev tools also slow down webapp. Why does React/Chrome affects performance so badly? Does it mean I misuse React or is this common issue for React+Chrome? Is there any workaround?
One thing I noticed today is that React Tools extension can significantly affect the performance of your React app in some cases. Since the purpose of the extension is to provide a realtime view of your React components, it tries to update its representation as your page changes, and on some heavy mutations this adds delays.
In my case I have a table with ~650 rows that can be sorted by clicking on column headers. Without dev tools pane open, all works pretty smoothly (page updates within a second), but once I open dev tools and switch to 'React' tab, the entire tab (both my page and dev tools pane) stays unresponsive to clicks for extra 3-4 seconds after table sort.
Per Igor's comment, I was able to resolve this issue by removing React Dev Tools.
My app generates many blocks of text on a single button click (took upwards of 400+ ms to load the state changes), and removing React Dev Tools brought it back down to practical levels.