Improving index page load speed (#220)

* added `defer` to smartpy scripts

* compressed images

* loading smartpy scripts async

* Fixed gatsby-browser.js prod error

* removed debugger

* added comments to explain the functionality

Co-authored-by: Bhaskar Singh <allstarbhaskarkumar@gmail.com>

gatsby-browser.js

@@ -15,6 +15,7 @@ export const onClientEntry = () => {
 
 import React from 'react';
 import { Provider } from 'jotai';
+
 import { BeaconProvider } from './src/context/beacon-context';
 
 export const wrapRootElement = ({ element }) => {
@@ -24,3 +25,47 @@ export const wrapRootElement = ({ element }) => {
     </BeaconProvider>
   );
 };
+
+const addScript = url => {
+  const script = document.createElement('script');
+  script.src = url;
+  script.async = true;
+  script.type = 'text/javascript';
+  script.charSet = 'utf-8';
+  document.body.appendChild(script);
+};
+
+export const onRouteUpdate = ({ location, prevLocation }) => {
+  /* 
+    1. Check if the URL contains 'module-02' or 'module-03'
+    2. If the URL has the keywords, check if SmartPy script is added or not.
+    3. If SmartPy script isn't added -> add the necessary scripts.
+  */
+  if (
+    location.pathname.indexOf('module-02') != -1 ||
+    location.pathname.indexOf('module-03') != -1
+  ) {
+    // checking is '/smartpyio.py' script is added or not.
+    const scripts = Array.from(document.querySelectorAll('script'));
+    const srcVals = scripts
+      .filter(sc => typeof sc.attributes.src != 'undefined')
+      .map(sc => sc.attributes.src.value);
+    const hasSmartpy = srcVals.indexOf('/smartpyio.py');
+
+    if (hasSmartpy == -1) {
+      // adding the necessary scripts
+      addScript('/execute.js');
+      addScript('/smartjs/smart.js');
+      addScript('/smartjs/smartmljs.bc.js');
+
+      const script = document.createElement('script');
+      script.src = '/smartpyio.py';
+      script.type = 'text/python';
+      document.body.appendChild(script);
+      if (typeof window.brython != 'undefined') {
+        // Initialize brython
+        brython({ debug: 1, indexedDB: false, pythonpath: '/' });
+      }
+    }
+  }
+};

src/html.js

@@ -24,42 +24,50 @@ export default function HTML(props) {
           type="text/javascript"
           charSet="utf-8"
           async
+          defer
         ></script>
         <script
           src={withPrefix('sodium-sumo-master.js')}
           type="text/javascript"
           charSet="utf-8"
           async
+          defer
         ></script>
+        {/*
         <script
           src={withPrefix('execute.js')}
           type="text/javascript"
           charSet="utf-8"
           async
+          defer
         ></script>
         <script
           src={withPrefix('smartjs/smart.js')}
           type="text/javascript"
           charSet="utf-8"
           async
+          defer
         ></script>
         <script
           src={withPrefix('smartjs/smartmljs.bc.js')}
           type="text/javascript"
           charSet="utf-8"
           async
-        ></script>
+          defer
+        ></script> */}
         <script
           src={withPrefix('brython/brython.js')}
           type="text/javascript"
           charSet="utf-8"
           async
+          defer
         ></script>
         <script
           src={withPrefix('brython/brython_stdlib.js')}
           type="text/javascript"
           charSet="utf-8"
           async
+          defer
         ></script>
         {props.headComponents}
       </head>
@@ -71,7 +79,7 @@ export default function HTML(props) {
           dangerouslySetInnerHTML={{ __html: props.body }}
         />
         {props.postBodyComponents}
-        <script type="text/python" src={withPrefix('smartpyio.py')}></script>
+        {/* <script type="text/python" src={withPrefix('smartpyio.py')}></script> */}
       </body>
     </html>
   );

src/pages/tezos/index.js

@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
-import { Link} from 'gatsby';
+import { Link } from 'gatsby';
 import NavBar from '../../components/NavBar';
 import Button from '../../components/Buttons';
 import Footer from '../../components/Footer';
 import PlayButton from '../../components/LandingPage/playbutton';
 
-import hero from '../../images/hero.png';
+import hero from '../../images/hero.webp';
 import cryptobots from '../../images/cryptobots.png';
 import earnWhileYouLearn from 'src/assets/videos/earn while you learn-anim.mp4';
 import createCurrency from 'src/assets/videos/anim-create-currency.mp4';
-import FinanceIllustration from 'src/assets/wealth.png';
+import FinanceIllustration from 'src/assets/wealth.webp';
 import { MdClose } from 'react-icons/md';
 
 const FeatureGrid = ({