Increase landing page speed with react/react-router/meteor?

I have like 4 massive pngs (4000x8000) on my landing page and inline styles. It is really janky and slow to download.

I’d prefer to not to have to engineer any server-side rending. I guess my first attempts will be to make the images smaller and host them on s3 instead of the public folder.

anything else I can do without having to make the entire app server-side rendered?

not I’m on 1.3/react/react-router

Well you can debug the loading time in the chrome dev tool, but I’m pretty sure the png’s are the culprit. Do they really need to be that large? How many colors do they contain? If they contain gradients for example (or a lot of colors/details) it might be better to use jpeg.

Hosting them outside of your app is also a good idea, s3 would be a good beginning but also consider a cdn as that will have a large effect as well.

You can also optimize the png size, there’s a lot of tools available:
https://tinypng.com/ (online)
https://pnggauntlet.com/ (windows)
https://imageoptim.com/mac (mac)

1 Like

Thanks for the feedback @nlammertyn