Slow initial rendering (React+Meteor)

help
1

Hey guys,
I’m having an issue with initial slow rendering times on React + Meteor. On mobile devices, the rendering time takes up to 5-7 seconds until the page is ready to use. Due to the graph, the most of the time is being spent on evaluating the script.

5106×1090 688 KB

I already removed some imports with the bundle visualizer and could save about 100kb. But that didn’t fix the issue. Are there any ways to improve this? Would SSR be an option in such cases? The page I’m talking about is https://www.muzica.io

Thanks in advance

2

SSR is a mixed blessing to slow rendering time. Indeed, the 1st visit will get painted instantaneously. And that should avoid your user to think your site is dead or unresponsive. Which is pretty good.

However, your users will still have to wait for React to get re-hydrated into the page. Meaning that your application will not be dynamic until the same 5-7 seconds.

This is where split code and above the fold come into the picture. By deferring JS execution of low priority parts of you’re app, the initial and required interactivity starts faster.

PS: I’m a core contributor of this SSR package: ssrwpo:ssr which should help you in this journey.

PS2: Nice looking app. Bravo :clap:

3

If this is a Cordova app, then my understanding is that code splitting won’t do anything since the entire bundle is already on the phone.

4

At least, it will defer JS execution of non mandatory parts. Even for Cordova apps, your app will get interactive way faster.

1 Like
5

@pierreeric Thanks :grinning:. I’ll try your packages, just found it about 1 month ago. Currently I’m running into

 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

when I try to pass my root component to createRouter({App})

I guess I have to do some refactoring of the structure.