From bec251c4e6c92ee184a83b59c11e10bc28fbbdae Mon Sep 17 00:00:00 2001
From: Olavi Haapala <olavi.haapala@futurice.com>
Date: Sat, 2 Nov 2019 21:14:32 +0200
Subject: [PATCH] Fix some performance issues

* Remove render blocking stripe JS that seems unnecessary
* Use native lazy loading of images
  - Truly a progressive enhancement, only affects browsers that support it
  - Causes a warning: [Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323, which can not be easily fixed
* Render content first, hydrate after that
---
 components/Feed.tsx    |  2 +-
 components/Footer.tsx  |  1 +
 components/Members.tsx | 10 +++++++++-
 package.json           |  1 -
 pages/_document.tsx    |  2 +-
 pages/index.tsx        |  9 +++++----
 styles/style.styl      |  8 --------
 yarn.lock              |  5 -----
 8 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/components/Feed.tsx b/components/Feed.tsx
index 55eb438..23ca275 100644
--- a/components/Feed.tsx
+++ b/components/Feed.tsx
@@ -34,7 +34,7 @@ export default class Feed extends React.Component {
 
   render() {
     const messages = this.state.messages.map((message, i) => {
-      let image = <img src={message.image} alt="" />;
+      let image = <img src={message.image} alt="" loading="lazy" />;
 
       if (message.imageLink) {
         image = (
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 7f90e08..bb4b194 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -14,6 +14,7 @@ const SponsorLink = ({ href, name }: Props) => (
       src={`/static/images/sponsors/${name.toLowerCase()}.svg`}
       alt={name}
       className={`sponsor sponsor__${name.toLowerCase()}`}
+      loading="lazy"
     />
   </a>
 );
diff --git a/components/Members.tsx b/components/Members.tsx
index 17130a0..8112fc4 100644
--- a/components/Members.tsx
+++ b/components/Members.tsx
@@ -23,7 +23,15 @@ export default class Members extends React.Component {
     const members = this.state.members.map((member) => {
       const src = `${member.avatar_url}&s=120`;
       return (
-        <img className="member" key={member.avatar_url} src={src} alt="" />
+        <img
+          className="member"
+          key={member.avatar_url}
+          src={src}
+          alt=""
+          width={30}
+          height={30}
+          loading="lazy"
+        />
       );
     });
 
diff --git a/package.json b/package.json
index 558c911..4cb683e 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-ga": "^3.1.2",
-    "react-stripe-checkout": "^2.6.3",
     "react-time-ago": "^6.0.1",
     "stylus": "^0.54.7",
     "twitter-text": "^3.0.0"
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 715894e..262ff40 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -34,11 +34,11 @@ class MyDocument extends Document {
           <div className="site">
             <div className="container">
               <Main />
-              <NextScript />
             </div>
             <Footer />
           </div>
           <Fader />
+          <NextScript />
         </body>
       </Html>
     );
diff --git a/pages/index.tsx b/pages/index.tsx
index 240ce1e..980c8ef 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -50,7 +50,7 @@ const IndexContent = () => (
             -yhteisöömme
           </h3>
           <div className="form">
-            <InviteForm />
+            <InviteForm/>
           </div>
           <p className="code-of-conduct">
             Ennen liittymistä yhteisöömme varmista, että olet lukenut yhteisön{" "}
@@ -88,6 +88,7 @@ const IndexContent = () => (
                 <img
                   src="/static/images/slack.png"
                   alt="Slack app at Koodiklinikka"
+                  loading="lazy"
                 />
               </a>
             </div>
@@ -200,7 +201,7 @@ const IndexContent = () => (
         </div>
       </section>
       <div id="feed">
-        <Feed />
+        <Feed/>
       </div>
     </div>
   </>
@@ -211,8 +212,8 @@ const Index = () => (
     <Head>
       <title>Koodiklinikka</title>
     </Head>
-    <Hero />
-    <IndexContent />
+    <Hero/>
+    <IndexContent/>
   </React.Fragment>
 );
 
diff --git a/styles/style.styl b/styles/style.styl
index 27928ab..fff4240 100644
--- a/styles/style.styl
+++ b/styles/style.styl
@@ -185,14 +185,6 @@ section:first-child
   height 70px
   margin auto
 
-.stripe-form
-  margin 20px 0px
-  .name
-    margin-top 20px
-    text-align left
-    display block
-    color rgba(0, 0, 0, 0.4)
-
 @keyframes drop
   0%
     transform rotateX(90deg)
diff --git a/yarn.lock b/yarn.lock
index e3eac11..6796cb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4868,11 +4868,6 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-stripe-checkout@^2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/react-stripe-checkout/-/react-stripe-checkout-2.6.3.tgz#3173a870b04e5a3c321a06d24cd53c6030111c45"
-  integrity sha1-MXOocLBOWjwyGgbSTNU8YDARHEU=
-
 react-time-ago@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-time-ago/-/react-time-ago-6.0.1.tgz#b84bd67d796a6e220739fc6ad3d46eaa305ac3c2"