Merge pull request #1150 from ethereum/image-optimization

Add eager loading to hero images
ethereum · Jun 29, 2020 · 714f6c7 · 714f6c7
2 parents b720516 + 27c1ec7
commit 714f6c7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 47 deletions.
diff --git a/src/pages/build.js b/src/pages/build.js
@@ -284,7 +284,7 @@ const BuildPage = ({ data }) => {
         <Button to="https://studio.ethereum.org">
           <Translation id="page-build-try-button" />
         </Button>
-        <Gif src={studioGif} />
+        <Gif src={studioGif} loading="eager" alt="Ethereum Studio preview" />
         <Caption>
           <Translation id="page-build-powered-by" />{" "}
           <Link to="https://superblocks.com">Superblocks</Link>
@@ -326,49 +326,35 @@ const BuildPage = ({ data }) => {
 
 export default BuildPage
 
+export const logoImage = graphql`
+  fragment logoImage on File {
+    childImageSharp {
+      fixed(height: 100, quality: 100) {
+        ...GatsbyImageSharpFixed
+      }
+    }
+  }
+`
+
 export const query = graphql`
   query {
     zeroX: file(relativePath: { eq: "build/0x.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...logoImage
     }
     chainshot: file(relativePath: { eq: "build/chainshot.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...logoImage
     }
     consensys: file(relativePath: { eq: "build/consensys.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...logoImage
     }
     cryptoZombie: file(relativePath: { eq: "build/crypto-zombie.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...logoImage
     }
     oz: file(relativePath: { eq: "build/oz.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...logoImage
     }
     remix: file(relativePath: { eq: "build/remix.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...logoImage
     }
   }
 `
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -310,6 +310,7 @@ const HomePage = ({ data }) => {
       <Hero
         fluid={data.hero.childImageSharp.fluid}
         alt="Ethereum.org hero image"
+        loading="eager"
       />
       <Content>
         {contentVersion > 1.1 && (
@@ -400,35 +401,33 @@ const HomePage = ({ data }) => {
 
 export default HomePage
 
+export const personaImage = graphql`
+  fragment personaImage on File {
+    childImageSharp {
+      fixed(height: 100) {
+        ...GatsbyImageSharpFixed
+      }
+    }
+  }
+`
+
 export const query = graphql`
   query {
     hero: file(relativePath: { eq: "home/hero.png" }) {
       childImageSharp {
-        fluid(maxWidth: 1440, quality: 100) {
+        fluid(maxWidth: 1440) {
           ...GatsbyImageSharpFluid
         }
       }
     }
     individuals: file(relativePath: { eq: "home/cats.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...personaImage
     }
     developers: file(relativePath: { eq: "home/developers.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...personaImage
     }
     enterprise: file(relativePath: { eq: "home/enterprise.png" }) {
-      childImageSharp {
-        fixed(height: 100, quality: 100) {
-          ...GatsbyImageSharpFixed
-        }
-      }
+      ...personaImage
     }
   }
 `