Optimizing app/reduce first, non-cached load time for mobile

[michaelketzer]

As I'm relative new to react/nextjs, I'm wondering what options do I have to optimize my app, so any help is really apperciated, I'm happy to learn new stuff and things ;-)

My target groups are currently mobile users.
As I have a lot of repeating stuff over the pages, I am using the next-redux-wrapper and limited everything to the data that is required to be loaded.
To handle network issues, I am using additionally next-offline to provide a service worker.

My website and the related source code

My only concern is the first, non-cached, page load. For desktop everything appears to be fine, but looking over on mobile devices the page appears to be slow. I have frequently 4s+ load times as the load on the parsing/main-thread work takes too long.

I have reduced the bundle size by over 50% the recent two days just by upgrading antd and removing any icons and replaced them with inline svg's. I have still a lot of weird stuff in my bundle that ships with antd but I am not using (I am using tree shacking), but I think that further reducing will not resolve the issue completely.

I'am mostly wondering whether the opt out from Automatic Static Optimization is causing this issue? Is the optimization that good, that it can change over 4 seconds load time?

I have another page which is using it (no redux) and it has skyrocking performance on mobile devices comparing to this website (I'm only talking about the first, non-cached load).

[Timer]

Yes! The opt-out of Automatic Static Optimization would be the source of your performance delays.

You can try to introduce getStaticProps to all of your pages, or eliminate the Redux Store from _app.