Hi, I can’t understand why my web-app take more than 8 seconds to load for the first time on mobile devices.
While in desktop, it takes les than 3 seconds.
Can anyone explain?
Thanks!
2 Likes
I too have a slow start with react app on mobile 
To be specific in my case is when I use “Add to home screen” on an Android device.
Maybe the browser is just too busy looking at the image? SCNR
1 Like
I need to optimize the app first. In my case, the bundle visualizer is reporting 4MB, react NPM packages are really big and quickly add up. That could explain the slow start, but generally speaking JS execution mobile is much slower then desktop.
Check out Google’s Lighthouse, it should give you some pointers where your blockers are and what you can fix.
Yeah that huge pause after the script bundle is downloaded is a hint. Looks like it’s the time taken to parse, interpret and compile the javascript before it even executes (which triggers the next downloads)
This article explains better than I can:
https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/
Key part:
If the script executes for more than 50ms, time-to-interactive is delayed by the entire amount of time it takes to download, compile, and execute the JS
Any DOM or UI created in JS is not available for use until the script runs
TL;DR: Try and reduce the size of your initial bundle and you’ll get much better ‘time to interactive’.
Hints:
- Use
bundle-vizualiserto find where the weight is coming from and cut unnecessary packages. - Break your app into parts which are lazy loaded with dynamic-imports
- etc.
2 Likes
Thanks! I’ll try to what you suggest.
this is the argument for SSR right?
Yeah, you get first paint a lot quicker because you’re not waiting for the javascript for the DOM to exist. A heavy bundle will still prevent the page from being interactive while waiting for the javascript
1 Like