Gatsby driven Web Application Architecture Design

Gatsby is a React-based open source framework for creating websites and apps. People are using it. It is no doubt a good web framework. But, it has it own limitations which are known by Gatsby. That's why they want companies to buy their Gatsby Cloud solution. That is their USP. They are giving many things free, but when speed matters they want your money.

We are going to understand some pain points and suggestions to overcome the optimization issue using Gatsby framework. 

We were investigating a website build on top of Contentful (a famous e-commerce CMS) and Gatsby. We first checked the request payload, response size & time. There were multiple page-data.json calls. Those calls were because of Gatsby's design. 

Gatsby generates html files on build time, unlike React which has only one html file. Those html files has calls to page-data.json, so we were able to see that. And we cannot get rid of it. We can try to improve other things list below.

1. We use axios calls to for required data.
2. We can lazy load off screens and images.
3. Third-party code can significantly impacting load performance. Call these asynchronously. 
4. Use image formats which has better compression than PNG or JPEG, such as JPEG 2000, JPEG XR and WebP.
5. Used react-window. Reduce DOM size.
6. Use React.memo, PureComponent to avoid re-render.