Stack performance and bundle optimization (Lighthouse) (#100)

flexpool · Apr 16, 2021 · 12a2b04 · 12a2b04
2 parents 23150a9 + 9917009
commit 12a2b04
Show file tree

Hide file tree

Showing 36 changed files with 445 additions and 235 deletions.
diff --git a/config-overrides.js b/config-overrides.js
@@ -2,5 +2,15 @@ const rewireFrontmatterMarkdown = require('react-app-rewire-frontmatter-markdown
 
 module.exports = function override(config, env) {
   rewireFrontmatterMarkdown(config);
+
+  /**
+   * removes some of the unused dependencies that are not tree shaked by amcharts
+   */
+  config.externals = function (context, request, callback) {
+    if (/xlsx|canvg|pdfmake/.test(request)) {
+      return callback(null, 'commonjs ' + request);
+    }
+    callback();
+  };
   return config;
 };
diff --git a/...components/layout/Hero/world_map_dots.svg → public/illustrations/world_map_dots.svg b/...components/layout/Hero/world_map_dots.svg → public/illustrations/world_map_dots.svg
diff --git a/public/index.html b/public/index.html
@@ -14,6 +14,9 @@
 
     <!-- Icons and theme -->
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="preconnect" href="https://static.flexpool.io" />
+    <link ref="preconnect" href="https://js.intercomcdn.com" />
+    <link rel="preload" as="image" href="/illustrations/world_map_dots.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
 
@@ -61,28 +64,67 @@
     <title>Flexpool.io</title>
 
     <link
+      rel="preconnect"
       href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap"
       rel="stylesheet"
     />
+    <style>
+      /** APP PRELOAD **/
+      .full-page-loader {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+      }
+
+      .full-page-loader > img {
+        height: 70px;
+        animation: 1.8s infinite heartbeat;
+        transition: 0.2s all;
+      }
+
+      @keyframes heartbeat {
+        0% {
+          transform: scale(1);
+        }
+        25% {
+          transform: scale(1.15);
+        }
+        50% {
+          transform: scale(1);
+        }
+        75% {
+          transform: scale(1.15);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+    </style>
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <div id="root">
+      <div class="full-page-loader">
+        <img
+          width="200"
+          loading="lazy"
+          src="https://static.flexpool.io/assets/brand/icon.svg"
+          alt="Flexpool.io logo"
+        />
+      </div>
+    </div>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script
       async
+      rel="preconnect"
       src="https://www.googletagmanager.com/gtag/js?id=G-PWS9985F4X"
     ></script>
     <script>
@@ -95,7 +137,11 @@
       gtag('config', 'G-PWS9985F4X');
     </script>
     <!-- Statuspage Embed -->
-    <script src="https://xtwj9bs7n2j9.statuspage.io/embed/script.js"></script>
+    <script
+      async
+      rel="preconnect"
+      src="https://xtwj9bs7n2j9.statuspage.io/embed/script.js"
+    ></script>
     <!-- Intercom -->
     <script>
       window.intercomSettings = {

diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -17,53 +17,69 @@ import { ThemeProvider } from 'styled-components/macro';
 import { mainTheme } from './styledTheme';
 import { FooterSection } from 'src/sections/Footer.section';
 
-import './init';
 import { usePoolCoins } from 'src/rdx/poolCoins/poolCoins.hooks';
 import { localStorage } from 'src/utils/localStorage';
 import { AppState } from 'src/rdx/rootReducer';
 
 import { AppTheme } from './AppTheme';
 import { SnackViewControl } from 'src/components/Snacks/SnackViewControl';
 
+// import StatisticsPage from '../pages/Statistics/Statistics.page';
+// import MinerDashboardPage from '../pages/MinerDashboard/MinerDashboard.page';
+// import MinersPage from '../pages/Miners/Miners.page';
+// import BlocksPage from '../pages/Blocks/Blocks.page';
+// import GetStartedPage from '../pages/GetStarted/GetStarted.page';
+// import ContactUsPage from '../pages/ContactUs/ContactUs.page';
+// import BrandAssetsPage from '../pages/BrandAssets/BrandAssets.page';
+// import HomePage from '../pages/Home/Home.page';
+// import SupportPage from '../pages/Support/Support.page';
+// import FaqPage from '../pages/Faq/Faq.page';
+// import OpenDataReportsPage from 'src/pages/Reports/OpenDataReports.page';
+// import PartnersPage from 'src/pages/Partners/Partners.page';
+// import BusinessDevelopmentPage from 'src/pages/BusinessDevelopment/BusinessDevelopment.page';
+// import MinerOldUrlSupportPage from 'src/pages/MinerOldUrlSupport/MinerOldUrlSupport.page';
+// import { NotFoundPage } from 'src/pages/NotFound/NotFound.page';
+import { PageLoader } from 'src/components/layout/Page';
+
 /**
- * Pages
+ * Pages code splitting
  */
-// const GetStartedPage = React.lazy(
-//   () => import('../pages/GetStarted/GetStarted.page')
-// );
-// const ContactUsPage = React.lazy(
-//   () => import('../pages/ContactUs/ContactUs.page')
-// );
-// const BrandAssetsPage = React.lazy(
-//   () => import('../pages/BrandAssets/BrandAssets.page')
-// );
-// const StatisticsPage = React.lazy(
-//   () => import('../pages/Statistics/Statistics.page')
-// );
-// const MinerDashboardPage = React.lazy(
-//   () => import('../pages/MinerDashboard/MinerDashboard.page')
-// );
-// const HomePage = React.lazy(() => import('../pages/Home/Home.page'));
-// const SupportPage = React.lazy(() => import('../pages/Support/Support.page'));
-// const MinersPage = React.lazy(() => import('../pages/Miners/Miners.page'));
-// const BlocksPage = React.lazy(() => import('../pages/Blocks/Blocks.page'));
-// const FaqPage = React.lazy(() => import('../pages/Faq/Faq.page'));
-
-import GetStartedPage from '../pages/GetStarted/GetStarted.page';
-import ContactUsPage from '../pages/ContactUs/ContactUs.page';
-import BrandAssetsPage from '../pages/BrandAssets/BrandAssets.page';
-import StatisticsPage from '../pages/Statistics/Statistics.page';
-import MinerDashboardPage from '../pages/MinerDashboard/MinerDashboard.page';
-import HomePage from '../pages/Home/Home.page';
-import SupportPage from '../pages/Support/Support.page';
-import MinersPage from '../pages/Miners/Miners.page';
-import BlocksPage from '../pages/Blocks/Blocks.page';
-import FaqPage from '../pages/Faq/Faq.page';
-import OpenDataReportsPage from 'src/pages/Reports/OpenDataReports.page';
-import PartnersPage from 'src/pages/Partners/Partners.page';
-import BusinessDevelopmentPage from 'src/pages/BusinessDevelopment/BusinessDevelopment.page';
-import { MinerOldUrlSupportPage } from 'src/pages/MinerOldUrlSupport/MinerOldUrlSupport.page';
-import { NotFoundPage } from 'src/pages/NotFound/NotFound.page';
+const StatisticsPage = React.lazy(
+  () => import('../pages/Statistics/Statistics.page')
+);
+const MinerDashboardPage = React.lazy(
+  () => import('../pages/MinerDashboard/MinerDashboard.page')
+);
+const MinersPage = React.lazy(() => import('../pages/Miners/Miners.page'));
+const BlocksPage = React.lazy(() => import('../pages/Blocks/Blocks.page'));
+const GetStartedPage = React.lazy(
+  () => import('../pages/GetStarted/GetStarted.page')
+);
+const ContactUsPage = React.lazy(
+  () => import('../pages/ContactUs/ContactUs.page')
+);
+const BrandAssetsPage = React.lazy(
+  () => import('../pages/BrandAssets/BrandAssets.page')
+);
+const HomePage = React.lazy(() => import('../pages/Home/Home.page'));
+const SupportPage = React.lazy(() => import('../pages/Support/Support.page'));
+const FaqPage = React.lazy(() => import('../pages/Faq/Faq.page'));
+const NotFoundPage = React.lazy(
+  () => import('../pages/NotFound/NotFound.page')
+);
+const BusinessDevelopmentPage = React.lazy(
+  () => import('../pages/BusinessDevelopment/BusinessDevelopment.page')
+);
+
+const OpenDataReportsPage = React.lazy(
+  () => import('../pages/Reports/OpenDataReports.page')
+);
+const PartnersPage = React.lazy(
+  () => import('../pages/Partners/Partners.page')
+);
+const MinerOldUrlSupportPage = React.lazy(
+  () => import('../pages/MinerOldUrlSupport/MinerOldUrlSupport.page')
+);
 
 /**
  * init redux state
@@ -109,7 +125,7 @@ const AppContent = () => {
       <AppTheme />
       <NavBar />
       <SnackViewControl />
-      <React.Suspense fallback={<div>Loading...</div>}>
+      <React.Suspense fallback={<PageLoader />}>
         <Switch>
           <Route
             exact

diff --git a/src/App/init.tsx b/src/App/init.tsx
diff --git a/src/components/Chart/ChartContainer.tsx b/src/components/Chart/ChartContainer.tsx
@@ -4,10 +4,19 @@ import { LoaderOverlayWithin } from '../Loader/LoaderOverlayWithin';
 import { OverlayWithin, OverlayWithinContent } from '../OverlayWithin';
 import { ChartTitle } from '../Typo/ChartTitle';
 import styled from 'styled-components/macro';
-import { AxisRendererY, Chart, Legend } from '@amcharts/amcharts4/charts';
-import { Container } from '@amcharts/amcharts4/core';
+import {
+  AxisRendererY,
+  Chart,
+  Legend,
+  Container,
+  amChartTheme,
+  setTheme,
+} from 'src/plugins/amcharts';
+import { Img } from '../Img';
 
-const EmptyImg = styled.img`
+setTheme(amChartTheme);
+
+const EmptyImg = styled(Img)`
   height: 70%;
   margin-top: 2rem;
 `;

diff --git a/src/components/CoinLogo.tsx b/src/components/CoinLogo.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { getCoinIconUrl } from 'src/utils/staticImage.utils';
 import styled from 'styled-components';
+import { Img } from './Img';
 
 type CoinSize = 'lg' | 'xl';
-const CoinImg = styled.img<{ size?: CoinSize }>`
+const CoinImg = styled(Img)<{ size?: CoinSize }>`
   height: 20px;
   width: 20px;
   margin-right: 0.5rem;

diff --git a/src/components/Form/Select/Select.components.tsx b/src/components/Form/Select/Select.components.tsx
@@ -4,9 +4,9 @@ import { AnchoredPop } from 'src/components/AnchoredPop';
 import { Button } from 'src/components/Button';
 import { PropsOf } from 'src/types/ReactHelp.types';
 
-import SelectArrow from './arrow.svg';
+import { ReactComponent as SelectArrow } from './arrow.svg';
 
-const SelectArrowImg = styled.img`
+const SelectArrowImg = styled(SelectArrow)`
   position: absolute;
   right: 1rem;
   top: 50%;
@@ -39,7 +39,7 @@ export const SelectButton = React.forwardRef<HTMLElement, SelectButtonProps>(
     return (
       <SCSelectButton ref={ref as any} {...rest}>
         {children || <Placeholder>{placeholder}</Placeholder>}
-        <SelectArrowImg src={SelectArrow} />
+        <SelectArrowImg />
       </SCSelectButton>
     );
   }

diff --git a/src/components/Img.tsx b/src/components/Img.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type ImageProps = JSX.IntrinsicElements['img'] & {
+  alt: string;
+  loading?: string;
+};
+
+/**
+ * forces usage of alt
+ * adds loading=laze by default
+ */
+export const Img = React.forwardRef<HTMLImageElement, ImageProps>(
+  ({ alt, loading = 'lazy', ...rest }, ref) => (
+    <img alt={alt} {...rest} ref={ref} />
+  )
+);
diff --git a/src/components/SearchAddressBar/SearchAddressBar.tsx b/src/components/SearchAddressBar/SearchAddressBar.tsx
@@ -122,18 +122,18 @@ export const SearchAddressBar: React.FC<{ showResult?: boolean }> = ({
     <Container>
       <Formik
         onSubmit={async (data, { setSubmitting }) => {
-          await handleSearch(data.search);
+          await handleSearch(data.addrsearch);
           setSubmitting(false);
         }}
-        initialValues={{ search: '' }}
+        initialValues={{ addrsearch: '' }}
       >
-        <Form>
+        <Form autoComplete="off">
           <Wrapper>
             <FieldWrapper>
               <Input
-                name="search"
+                name="addrsearch"
                 spellCheck="false"
-                autoComplete="false"
+                autoComplete="off"
                 placeholder="Search by your mining address"
               />
               {showResult && searchData && searchData.length > 0 && (
@@ -142,7 +142,7 @@ export const SearchAddressBar: React.FC<{ showResult?: boolean }> = ({
                 </ResultWrapper>
               )}
             </FieldWrapper>
-            <SearchButton type="submit">
+            <SearchButton aria-label="Search address" type="submit">
               <FaSearch />
             </SearchButton>
           </Wrapper>

diff --git a/src/components/SectionNotAvailable.tsx b/src/components/SectionNotAvailable.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components/macro';
+import { Img } from './Img';
 
 const Wrapper = styled.div`
   margin-top: 100px;
@@ -7,7 +8,7 @@ const Wrapper = styled.div`
   flex-direction: column;
 `;
 
-const Image = styled.img`
+const Image = styled(Img)`
   height: 240px;
 `;
 
@@ -27,7 +28,7 @@ export const SectionNotAvailable: React.FC<{
   imageAlt?: string;
   description: string;
   title: string;
-}> = ({ imageURL, imageAlt, title, description }) => (
+}> = ({ imageURL, imageAlt = 'not available', title, description }) => (
   <Wrapper>
     <div className="image">
       <Image src={imageURL} alt={imageAlt} />

diff --git a/src/components/SelectCounterTicker.tsx b/src/components/SelectCounterTicker.tsx
@@ -6,8 +6,9 @@ import { useReduxState } from 'src/rdx/useReduxState';
 import { Ticker } from 'src/types/Ticker.types';
 import styled from 'styled-components/macro';
 import { Select } from './Form/Select/Select';
+import { Img } from './Img';
 
-const TickerFlag = styled.img`
+const TickerFlag = styled(Img)`
   height: 20px;
   margin-right: 0.5rem;
 `;
@@ -42,6 +43,8 @@ export const SelectCounterTicker = () => {
         label: (
           <TickerWrapper>
             <TickerFlag
+              width="20"
+              height="20"
               src={`https://static.flexpool.io/assets/countervalues/${item}.svg`}
               alt={`${item.toUpperCase()} Currency Flag`}
             />