layer5 Added gatsby-loadable-component-ssr plugin

Description

Edit: The use of loadable-components should only be done below the fold components, therefore the flash effect is still present.

With loadable-components (gatsby-ssr-plugin) the components are broken into individual chunks and the size of the main component decreases which in turn makes the page render much faster.

Notes for Reviewers The plugin is not added to all the pages as they are not bulky and just for the sake of adding the components into them doesn't make sense. The best way to analyze which pages should have the loadable-components is by using the webpack-analyzer in the gatsby-config (gatsby-plugin-webpack-bundle-analyser-v2) just set it to disable: false locally and do a make build to know about each bundle size.

Signed commits

[X] Yes, I signed my commits.

Aug 08 '22 18:08 Nikhil-Ladha

🚀 Preview for commit b858e4c76c68dd57d88f50e81a780809a0af0e58 at: https://62f15a4efdd4c507e45953c0--layer5.netlify.app

Aug 08 '22 18:08 l5io

Oh, I see now why I was experiencing a brief flash on some pages and not others.

Aug 08 '22 19:08 leecalcote

Are there any downsides to this plugin? It only seems positive to me.

Aug 08 '22 19:08 leecalcote

Are there any downsides to this plugin? It only seems positive to me.

There seems to be one. That is SEO. I was wondering the same while working on it, and just read through some articles about if it could impact SEO, and I think it might. Though, there isn't any hard/solid proof of that. So, still investigating a bit.

Aug 08 '22 19:08 Nikhil-Ladha

Oh, I see now why I was experiencing a brief flash on some pages and not others.

The reason for that flash is that the Navigation component is rendered earlier than the whole page, and later when the page is rendered the theme value is fetched and then that is updated to the correct theme.

Aug 08 '22 19:08 Nikhil-Ladha

Are there any downsides to this plugin? It only seems positive to me.

There seems to be one. That is SEO. I was wondering the same while working on it, and just read through some articles about if it could impact SEO, and I think it might. Though, there isn't any hard/solid proof of that. So, still investigating a bit.

Thank you, thank you.

Aug 08 '22 23:08 leecalcote

🚀 Preview for commit 879220d3b87e8101993a83290fddf94786ca77ed at: https://62f1f667c4b8946d60535619--layer5.netlify.app

Aug 09 '22 05:08 l5io

🚀 Preview for commit b103a4e3c60b36369b7ff2a0568376945ed4dea0 at: https://62f2186fcd925209ed3a1f69--layer5.netlify.app

Aug 09 '22 08:08 l5io

🚀 Preview for commit 50868c24a7ee473a6611523948de95ab9e3628d1 at: https://62f220671100070ddbe03760--layer5.netlify.app

Aug 09 '22 08:08 l5io

🚀 Preview for commit a002aa969f01ce2892b31826710b3943ff94e089 at: https://62f22c381100071794e03876--layer5.netlify.app

Aug 09 '22 09:08 l5io

🚀 Preview for commit a7406f5a5d3a564537e0e1ea8b16651c36775514 at: https://62f40da0324ac20f4cb7d3b4--layer5.netlify.app

Aug 10 '22 19:08 l5io

I'm certainly curious about the potential SEO impact, while at the same time want to lean into moving forward with the performance increase here.

Aug 17 '22 22:08 leecalcote

I can understand, but I am waiting for a reply from the plugin owner on this issue https://github.com/graysonhicks/gatsby-plugin-loadable-components-ssr/issues/56 that I created regarding the impact on SEO. Once, there is an update on it, we can move ahead accordingly.

Aug 18 '22 03:08 Nikhil-Ladha

🚀 Preview for commit 667634f969b6d5ddb4b8139dbaea33ba6a6f3a73 at: https://631f35f766fcf80b2f975b33--layer5.netlify.app

Sep 12 '22 13:09 l5io

Let's give this a shot. This should help us with the lazy loading of the integrations section images as well in mobile view.

Sep 12 '22 13:09 Nikhil-Ladha