Merge pull request #76 from Codebrahma/website-perf-improvements

Kameshwaran · web-flow · commit 69a48b44eb3d · 2021-05-24T23:42:22.000+05:30
Website perf improvements
diff --git a/font-preload-cache.json b/font-preload-cache.json
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -10,6 +10,7 @@ module.exports = {
     siteUrl: `https://codebrahma.com`
   },
   plugins: [
+    `gatsby-plugin-preload-fonts`,
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-react-helmet-canonical-urls`,
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "gatsby-plugin-mdx": "^1.0.56",
     "gatsby-plugin-netlify": "^2.1.3",
     "gatsby-plugin-offline": "^2.1.1",
+    "gatsby-plugin-preload-fonts": "^2.5.0",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-react-helmet-canonical-urls": "^1.2.0",
     "gatsby-plugin-sharp": "^2.1.3",
@@ -60,6 +61,7 @@
     "serve": "gatsby serve",
     "docz:dev": "docz dev",
     "docz:build": "docz build",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
+    "preload-fonts": "gatsby-preload-fonts"
   }
 }
diff --git a/posts/completing-react-as-a-mvc-part-1-models/images/Controller-views.png b/posts/completing-react-as-a-mvc-part-1-models/images/Controller-views.png
diff --git a/src/components/image.js b/src/components/image.js
@@ -20,7 +20,7 @@ const Image = () => (
         placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
           childImageSharp {
             fluid(maxWidth: 300) {
-              ...GatsbyImageSharpFluid
+              ...GatsbyImageSharpFluid_withWebp_noBase64
             }
           }
         }
diff --git a/src/components/projects.js b/src/components/projects.js
@@ -10,7 +10,7 @@ export const RipplingProject = () => {
       ) {
         childImageSharp {
           fluid(maxWidth: 500, quality: 100) {
-            ...GatsbyImageSharpFluid
+            ...GatsbyImageSharpFluid_withWebp_noBase64
             presentationWidth
           }
         }
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -139,7 +139,7 @@ export const query = graphql`
     ) {
       childImageSharp {
         fluid(maxWidth: 550, quality: 100) {
-          ...GatsbyImageSharpFluid
+          ...GatsbyImageSharpFluid_withWebp_noBase64
           presentationWidth
         }
       }
@@ -151,7 +151,7 @@ export const query = graphql`
     ) {
       childImageSharp {
         fluid(maxWidth: 550, quality: 100) {
-          ...GatsbyImageSharpFluid
+          ...GatsbyImageSharpFluid_withWebp_noBase64
           presentationWidth
         }
       }
diff --git a/src/pages/open-source-contributions.js b/src/pages/open-source-contributions.js
@@ -166,15 +166,15 @@ export const query = graphql`
     serverless: file(relativePath: { eq: "open-source/serverless.png" }) {
       childImageSharp {
         fixed(width: 48, height: 48) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
     }
     multiSelect: file(relativePath: { eq: "open-source/multi-select.png" }) {
       childImageSharp {
         fixed(width: 60, height: 60) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
@@ -184,47 +184,47 @@ export const query = graphql`
     ) {
       childImageSharp {
         fixed(width: 64, height: 64) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
     }
     reactForms: file(relativePath: { eq: "open-source/react-forms.png" }) {
       childImageSharp {
         fixed(width: 80, height: 35) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
     }
     liteUi: file(relativePath: { eq: "open-source/react-lite-ui.png" }) {
       childImageSharp {
         fixed(width: 60, height: 64) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
     }
     reduxAction: file(relativePath: { eq: "open-source/redux-action.png" }) {
       childImageSharp {
         fixed(width: 80, height: 80) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
     }
     csvToGraphql: file(relativePath: { eq: "open-source/csv-graphql.png" }) {
       childImageSharp {
         fixed(width: 100, height: 40) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
     }
     gatsbyBlog: file(relativePath: { eq: "open-source/gatsby-blog.png" }) {
       childImageSharp {
         fixed(width: 66, height: 64) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
@@ -233,7 +233,7 @@ export const query = graphql`
     menubar: file(relativePath: { eq: "open-source/menu-bar.png" }) {
       childImageSharp {
         fixed(width: 65, height: 65) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
@@ -244,7 +244,7 @@ export const query = graphql`
     ) {
       childImageSharp {
         fixed(width: 64, height: 50) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
@@ -253,7 +253,7 @@ export const query = graphql`
     flexibleSlidingMenu: file(relativePath: { eq: "open-source/react-flexible-sliding-menu.png" }) {
       childImageSharp {
         fixed(height: 95, width: 68) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
@@ -262,7 +262,7 @@ export const query = graphql`
     multiLevelSelector: file(relativePath: { eq: "open-source/multi-level-selector.png" }) {
       childImageSharp {
         fixed(height: 54, width: 80) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
@@ -271,7 +271,7 @@ export const query = graphql`
     reactStatelessModal: file(relativePath: { eq: "open-source/react-stateless-modal.png" }) {
       childImageSharp {
         fixed(height: 70, width: 70) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
diff --git a/src/pages/solutions.js b/src/pages/solutions.js
@@ -135,50 +135,50 @@ export const query = graphql`
     angularLogo: file(relativePath: { eq: "logos/angular.png" }) {
       childImageSharp {
         fixed(width: 128, height: 128) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
     }
     financeLogo: file(relativePath: { eq: "logos/finance.png" }) {
       childImageSharp {
         fixed(width: 128, height: 128) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
     }
     nodejsLogo: file(relativePath: { eq: "logos/nodejs.png" }) {
       childImageSharp {
         fixed(width: 128, height: 128) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
     }
     pwaLogo: file(relativePath: { eq: "logos/pwa.png" }) {
       childImageSharp {
         fixed(width: 128, height: 128) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
     }
     railsLogo: file(relativePath: { eq: "logos/rails.png" }) {
       childImageSharp {
         fixed(width: 128, height: 128) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
     }
     reactLogo: file(relativePath: { eq: "logos/react-colored.png" }) {
       childImageSharp {
         fixed(width: 128, height: 128) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
       publicURL
     }
     serverlessLogo: file(relativePath: { eq: "logos/serverless.png" }) {
       childImageSharp {
         fixed(width: 128, height: 128) {
-          ...GatsbyImageSharpFixed
+          ...GatsbyImageSharpFixed_withWebp_noBase64
         }
       }
     }
diff --git a/src/pages/work.js b/src/pages/work.js
@@ -80,7 +80,7 @@ export const query = graphql`
     ) {
       childImageSharp {
         fluid(maxWidth: 500, quality: 100) {
-          ...GatsbyImageSharpFluid
+          ...GatsbyImageSharpFluid_withWebp_noBase64
           presentationWidth
         }
       }
@@ -90,7 +90,7 @@ export const query = graphql`
     ) {
       childImageSharp {
         fluid(maxWidth: 500, quality: 100) {
-          ...GatsbyImageSharpFluid
+          ...GatsbyImageSharpFluid_withWebp_noBase64
           presentationWidth
         }
       }
@@ -101,7 +101,7 @@ export const query = graphql`
     ) {
       childImageSharp {
         fluid(maxWidth: 500, quality: 100) {
-          ...GatsbyImageSharpFluid
+          ...GatsbyImageSharpFluid_withWebp_noBase64
           presentationWidth
         }
       }
diff --git a/src/templates/fonts.css b/src/templates/fonts.css
@@ -462,18 +462,22 @@ code.language-text.css-0 {
 @font-face {
   src: url("../fonts/TiemposTextWeb-Regular.woff") format("woff");
   font-family: "TiemposText";
+  font-display: swap;
 }
 @font-face {
   src: url("../fonts/TiemposTextWeb-RegularItalic.woff") format("woff");
   font-family: "TiemposItalic";
+  font-display: swap;
 }
 @font-face {
   src: url("../fonts/TiemposTextWeb-Bold.woff") format("woff");
   font-family: "TiemposBold";
+  font-display: swap;
 }
 @font-face {
   src: url("../fonts/TiemposHeadlineWeb-Regular.woff") format("woff");
   font-family: "TiemposHeadline";
+  font-display: swap;
 }
 
 a {
diff --git a/src/templates/header.js b/src/templates/header.js
@@ -1,8 +1,8 @@
 import PropTypes from "prop-types"
 import React from "react"
 import { Nav } from 'bricks'
-import { Logo } from '../components/logo'
 import { Link } from 'gatsby'
+import { Logo } from '../components/logo'
 
 const links = [
   {title: 'Work', link: '/work'},
@@ -12,8 +12,7 @@ const links = [
   {title: 'Contact', link: '/contact'},
 ]
 
-const Header = ({ siteTitle }) => {
-  return (
+const Header = ({ siteTitle }) => (
   <header>
     <div>
       <Nav 
@@ -24,7 +23,6 @@ const Header = ({ siteTitle }) => {
     </div>
   </header>
 )
-}
 
 Header.propTypes = {
   siteTitle: PropTypes.string,
diff --git a/src/templates/layout.js b/src/templates/layout.js
@@ -192,39 +192,39 @@ const Layout = ({ children }) => {
           facebook: file(relativePath: { eq: "logos/facebook.png" }) {
             childImageSharp {
               fixed(width: 33, height: 33) {
-                ...GatsbyImageSharpFixed
+                ...GatsbyImageSharpFixed_withWebp_noBase64
               }
             }
           }
 
           twitter: file(relativePath: { eq: "logos/twitter.png" }) {
             childImageSharp {
               fixed(width: 32, height: 32) {
-                ...GatsbyImageSharpFixed
+                ...GatsbyImageSharpFixed_withWebp_noBase64
               }
             }
           }
 
           linkedin: file(relativePath: { eq: "logos/linkedin.png" }) {
             childImageSharp {
               fixed(width: 32, height: 32) {
-                ...GatsbyImageSharpFixed
+                ...GatsbyImageSharpFixed_withWebp_noBase64
               }
             }
           }
 
           github: file(relativePath: { eq: "logos/github.png" }) {
             childImageSharp {
               fixed(width: 36, height: 36) {
-                ...GatsbyImageSharpFixed
+                ...GatsbyImageSharpFixed_withWebp_noBase64
               }
             }
           }
 
           instagram: file(relativePath: { eq: "logos/instagram.png" }) {
             childImageSharp {
               fixed(width: 32, height: 32) {
-                ...GatsbyImageSharpFixed
+                ...GatsbyImageSharpFixed_withWebp_noBase64
               }
             }
           }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ module.exports = {`
`10`	`10`	siteUrl: `https://codebrahma.com`
`11`	`11`	`},`
`12`	`12`	`plugins: [`
	`13`	+ `gatsby-plugin-preload-fonts`,
`13`	`14`	`gatsby-plugin-react-helmet`,
`14`	`15`	`{`
`15`	`16`	resolve: `gatsby-plugin-react-helmet-canonical-urls`,
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ const Image = () => (`
`20`	`20`	`placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {`
`21`	`21`	`childImageSharp {`
`22`	`22`	`fluid(maxWidth: 300) {`
`23`		`- ...GatsbyImageSharpFluid`
	`23`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export const RipplingProject = () => {`
`10`	`10`	`) {`
`11`	`11`	`childImageSharp {`
`12`	`12`	`fluid(maxWidth: 500, quality: 100) {`
`13`		`- ...GatsbyImageSharpFluid`
	`13`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`14`	`14`	`presentationWidth`
`15`	`15`	`}`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
@@ -139,7 +139,7 @@ export const query = graphql`
`139`	`139`	`) {`
`140`	`140`	`childImageSharp {`
`141`	`141`	`fluid(maxWidth: 550, quality: 100) {`
`142`		`- ...GatsbyImageSharpFluid`
	`142`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`143`	`143`	`presentationWidth`
`144`	`144`	`}`
`145`	`145`	`}`
@@ -151,7 +151,7 @@ export const query = graphql`
`151`	`151`	`) {`
`152`	`152`	`childImageSharp {`
`153`	`153`	`fluid(maxWidth: 550, quality: 100) {`
`154`		`- ...GatsbyImageSharpFluid`
	`154`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`155`	`155`	`presentationWidth`
`156`	`156`	`}`
`157`	`157`	`}`
Original file line number	Diff line number	Diff line change
@@ -166,15 +166,15 @@ export const query = graphql`
`166`	`166`	`serverless: file(relativePath: { eq: "open-source/serverless.png" }) {`
`167`	`167`	`childImageSharp {`
`168`	`168`	`fixed(width: 48, height: 48) {`
`169`		`- ...GatsbyImageSharpFixed`
	`169`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`170`	`170`	`}`
`171`	`171`	`}`
`172`	`172`	`publicURL`
`173`	`173`	`}`
`174`	`174`	`multiSelect: file(relativePath: { eq: "open-source/multi-select.png" }) {`
`175`	`175`	`childImageSharp {`
`176`	`176`	`fixed(width: 60, height: 60) {`
`177`		`- ...GatsbyImageSharpFixed`
	`177`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`178`	`178`	`}`
`179`	`179`	`}`
`180`	`180`	`publicURL`
@@ -184,47 +184,47 @@ export const query = graphql`
`184`	`184`	`) {`
`185`	`185`	`childImageSharp {`
`186`	`186`	`fixed(width: 64, height: 64) {`
`187`		`- ...GatsbyImageSharpFixed`
	`187`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`188`	`188`	`}`
`189`	`189`	`}`
`190`	`190`	`publicURL`
`191`	`191`	`}`
`192`	`192`	`reactForms: file(relativePath: { eq: "open-source/react-forms.png" }) {`
`193`	`193`	`childImageSharp {`
`194`	`194`	`fixed(width: 80, height: 35) {`
`195`		`- ...GatsbyImageSharpFixed`
	`195`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`196`	`196`	`}`
`197`	`197`	`}`
`198`	`198`	`publicURL`
`199`	`199`	`}`
`200`	`200`	`liteUi: file(relativePath: { eq: "open-source/react-lite-ui.png" }) {`
`201`	`201`	`childImageSharp {`
`202`	`202`	`fixed(width: 60, height: 64) {`
`203`		`- ...GatsbyImageSharpFixed`
	`203`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`204`	`204`	`}`
`205`	`205`	`}`
`206`	`206`	`publicURL`
`207`	`207`	`}`
`208`	`208`	`reduxAction: file(relativePath: { eq: "open-source/redux-action.png" }) {`
`209`	`209`	`childImageSharp {`
`210`	`210`	`fixed(width: 80, height: 80) {`
`211`		`- ...GatsbyImageSharpFixed`
	`211`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`212`	`212`	`}`
`213`	`213`	`}`
`214`	`214`	`publicURL`
`215`	`215`	`}`
`216`	`216`	`csvToGraphql: file(relativePath: { eq: "open-source/csv-graphql.png" }) {`
`217`	`217`	`childImageSharp {`
`218`	`218`	`fixed(width: 100, height: 40) {`
`219`		`- ...GatsbyImageSharpFixed`
	`219`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`220`	`220`	`}`
`221`	`221`	`}`
`222`	`222`	`publicURL`
`223`	`223`	`}`
`224`	`224`	`gatsbyBlog: file(relativePath: { eq: "open-source/gatsby-blog.png" }) {`
`225`	`225`	`childImageSharp {`
`226`	`226`	`fixed(width: 66, height: 64) {`
`227`		`- ...GatsbyImageSharpFixed`
	`227`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`228`	`228`	`}`
`229`	`229`	`}`
`230`	`230`	`publicURL`
@@ -233,7 +233,7 @@ export const query = graphql`
`233`	`233`	`menubar: file(relativePath: { eq: "open-source/menu-bar.png" }) {`
`234`	`234`	`childImageSharp {`
`235`	`235`	`fixed(width: 65, height: 65) {`
`236`		`- ...GatsbyImageSharpFixed`
	`236`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`237`	`237`	`}`
`238`	`238`	`}`
`239`	`239`	`publicURL`
@@ -244,7 +244,7 @@ export const query = graphql`
`244`	`244`	`) {`
`245`	`245`	`childImageSharp {`
`246`	`246`	`fixed(width: 64, height: 50) {`
`247`		`- ...GatsbyImageSharpFixed`
	`247`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`248`	`248`	`}`
`249`	`249`	`}`
`250`	`250`	`publicURL`
@@ -253,7 +253,7 @@ export const query = graphql`
`253`	`253`	`flexibleSlidingMenu: file(relativePath: { eq: "open-source/react-flexible-sliding-menu.png" }) {`
`254`	`254`	`childImageSharp {`
`255`	`255`	`fixed(height: 95, width: 68) {`
`256`		`- ...GatsbyImageSharpFixed`
	`256`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`257`	`257`	`}`
`258`	`258`	`}`
`259`	`259`	`publicURL`
@@ -262,7 +262,7 @@ export const query = graphql`
`262`	`262`	`multiLevelSelector: file(relativePath: { eq: "open-source/multi-level-selector.png" }) {`
`263`	`263`	`childImageSharp {`
`264`	`264`	`fixed(height: 54, width: 80) {`
`265`		`- ...GatsbyImageSharpFixed`
	`265`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`266`	`266`	`}`
`267`	`267`	`}`
`268`	`268`	`publicURL`
@@ -271,7 +271,7 @@ export const query = graphql`
`271`	`271`	`reactStatelessModal: file(relativePath: { eq: "open-source/react-stateless-modal.png" }) {`
`272`	`272`	`childImageSharp {`
`273`	`273`	`fixed(height: 70, width: 70) {`
`274`		`- ...GatsbyImageSharpFixed`
	`274`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`275`	`275`	`}`
`276`	`276`	`}`
`277`	`277`	`publicURL`
Original file line number	Diff line number	Diff line change
@@ -135,50 +135,50 @@ export const query = graphql`
`135`	`135`	`angularLogo: file(relativePath: { eq: "logos/angular.png" }) {`
`136`	`136`	`childImageSharp {`
`137`	`137`	`fixed(width: 128, height: 128) {`
`138`		`- ...GatsbyImageSharpFixed`
	`138`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`139`	`139`	`}`
`140`	`140`	`}`
`141`	`141`	`}`
`142`	`142`	`financeLogo: file(relativePath: { eq: "logos/finance.png" }) {`
`143`	`143`	`childImageSharp {`
`144`	`144`	`fixed(width: 128, height: 128) {`
`145`		`- ...GatsbyImageSharpFixed`
	`145`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`146`	`146`	`}`
`147`	`147`	`}`
`148`	`148`	`}`
`149`	`149`	`nodejsLogo: file(relativePath: { eq: "logos/nodejs.png" }) {`
`150`	`150`	`childImageSharp {`
`151`	`151`	`fixed(width: 128, height: 128) {`
`152`		`- ...GatsbyImageSharpFixed`
	`152`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`153`	`153`	`}`
`154`	`154`	`}`
`155`	`155`	`}`
`156`	`156`	`pwaLogo: file(relativePath: { eq: "logos/pwa.png" }) {`
`157`	`157`	`childImageSharp {`
`158`	`158`	`fixed(width: 128, height: 128) {`
`159`		`- ...GatsbyImageSharpFixed`
	`159`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`160`	`160`	`}`
`161`	`161`	`}`
`162`	`162`	`}`
`163`	`163`	`railsLogo: file(relativePath: { eq: "logos/rails.png" }) {`
`164`	`164`	`childImageSharp {`
`165`	`165`	`fixed(width: 128, height: 128) {`
`166`		`- ...GatsbyImageSharpFixed`
	`166`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`167`	`167`	`}`
`168`	`168`	`}`
`169`	`169`	`}`
`170`	`170`	`reactLogo: file(relativePath: { eq: "logos/react-colored.png" }) {`
`171`	`171`	`childImageSharp {`
`172`	`172`	`fixed(width: 128, height: 128) {`
`173`		`- ...GatsbyImageSharpFixed`
	`173`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`174`	`174`	`}`
`175`	`175`	`}`
`176`	`176`	`publicURL`
`177`	`177`	`}`
`178`	`178`	`serverlessLogo: file(relativePath: { eq: "logos/serverless.png" }) {`
`179`	`179`	`childImageSharp {`
`180`	`180`	`fixed(width: 128, height: 128) {`
`181`		`- ...GatsbyImageSharpFixed`
	`181`	`+ ...GatsbyImageSharpFixed_withWebp_noBase64`
`182`	`182`	`}`
`183`	`183`	`}`
`184`	`184`	`}`
Original file line number	Diff line number	Diff line change
@@ -80,7 +80,7 @@ export const query = graphql`
`80`	`80`	`) {`
`81`	`81`	`childImageSharp {`
`82`	`82`	`fluid(maxWidth: 500, quality: 100) {`
`83`		`- ...GatsbyImageSharpFluid`
	`83`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`84`	`84`	`presentationWidth`
`85`	`85`	`}`
`86`	`86`	`}`
@@ -90,7 +90,7 @@ export const query = graphql`
`90`	`90`	`) {`
`91`	`91`	`childImageSharp {`
`92`	`92`	`fluid(maxWidth: 500, quality: 100) {`
`93`		`- ...GatsbyImageSharpFluid`
	`93`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`94`	`94`	`presentationWidth`
`95`	`95`	`}`
`96`	`96`	`}`
@@ -101,7 +101,7 @@ export const query = graphql`
`101`	`101`	`) {`
`102`	`102`	`childImageSharp {`
`103`	`103`	`fluid(maxWidth: 500, quality: 100) {`
`104`		`- ...GatsbyImageSharpFluid`
	`104`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`105`	`105`	`presentationWidth`
`106`	`106`	`}`
`107`	`107`	`}`