improve performance

alexislepresle · alexislepresle · commit c979939d6df5 · 2020-07-27T16:42:40.000+02:00
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -19,6 +19,13 @@ module.exports = {
         accessToken: process.env.SHOPIFY_ACCESS_TOKEN,
       },
     },
+    {
+      resolve: 'gatsby-plugin-purgecss',
+      options: {
+        develop: true,
+        purgeOnly: ['/all.sass'],
+      },
+    },
     {
       resolve: "gatsby-source-shopify",
       options: {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
     "axios": "^0.19.2",
     "bulma": "^0.7.5",
     "dotenv": "^8.2.0",
-    "gatsby": "^2.19.17",
-    "gatsby-cli": "^2.12.59",
+    "gatsby": "^2.24.11",
+    "gatsby-cli": "^2.12.66",
     "gatsby-image": "^2.2.41",
     "gatsby-plugin-apollo": "^3.0.1",
     "gatsby-plugin-apollo-shopify": "^1.0.2",
@@ -23,6 +23,7 @@
     "gatsby-plugin-manifest": "^2.2.41",
     "gatsby-plugin-modal-routing": "^1.1.0",
     "gatsby-plugin-offline": "^2.2.10",
+    "gatsby-plugin-purgecss": "^5.0.0",
     "gatsby-plugin-react-helmet": "^3.1.22",
     "gatsby-plugin-sass": "^2.1.28",
     "gatsby-plugin-sharp": "^2.4.5",
@@ -49,6 +50,7 @@
     "styled-components": "^4.4.1"
   },
   "devDependencies": {
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.10",
     "prettier": "^1.19.1"
   },
   "keywords": [
diff --git a/src/components/ProductList/productBox.js b/src/components/ProductList/productBox.js
@@ -9,6 +9,8 @@ const ProductBox = props => {
                 <Img
                     fluid={product.node.images[0].localFile.childImageSharp.fluid}
                     key={product.node.images[0].localFile.id}
+                    fadeIn={false} 
+                    loading="eager"
                     alt={product.node.title}
                 />
                 <p className="has-text-weight-semibold has-text-black">{product.node.title}</p>
diff --git a/src/components/ProductPage/Gallery.js b/src/components/ProductPage/Gallery.js
@@ -44,7 +44,8 @@ const Gallery = ({ product }) => {
                                     <Img
                                         fluid={x.localFile.childImageSharp.fluid}
                                         alt={product.title}
-                                        loading="auto"
+                                        fadeIn={false} 
+                                        loading="eager"
                                         imgStyle={{ WebkitFilter: "blur(1px)", marginBorder: "10px solid black" }}
                                     />
                                 </ThumbnailBox>
@@ -59,7 +60,8 @@ const Gallery = ({ product }) => {
                                 >
                                     <Img
                                         fluid={x.localFile.childImageSharp.fluid}
-                                        loading="auto"
+                                        fadeIn={false} 
+                                        loading="eager"
                                         durationFadeIn={500 * i}
                                         alt={product.title}
 
@@ -83,6 +85,8 @@ const Gallery = ({ product }) => {
                     fluid={currentImage.localFile.childImageSharp.fluid}
                     key={currentImage.localFile.id}
                     alt={product.title}
+                    fadeIn={false} 
+                    loading="eager"
                     className="imgProduct"
                 />
             </Box>
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -37,7 +37,7 @@ export const query = graphql`
             localFile {
               childImageSharp {
                 fluid(maxWidth: 910) {
-                  ...GatsbyImageSharpFluid_noBase64
+                  ...GatsbyImageSharpFluid_withWebp_noBase64
                 }
               }
             }
diff --git a/src/pages/search.js b/src/pages/search.js
@@ -75,7 +75,7 @@ export const query = graphql`
             localFile {
               childImageSharp {
                 fluid(maxWidth: 910) {
-                  ...GatsbyImageSharpFluid_noBase64
+                  ...GatsbyImageSharpFluid_withWebp_noBase64
                 }
               }
             }
diff --git a/src/templates/productPage.js b/src/templates/productPage.js
@@ -149,7 +149,7 @@ export const query = graphql`
                 localFile {
                   childImageSharp {
                     fluid(maxWidth: 910) {
-                      ...GatsbyImageSharpFluid_noBase64
+                      ...GatsbyImageSharpFluid_withWebp_noBase64
                     }
                   }
                 }
diff --git a/yarn-error.log b/yarn-error.log
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
@@ -37,7 +37,7 @@ export const query = graphql`
`37`	`37`	`localFile {`
`38`	`38`	`childImageSharp {`
`39`	`39`	`fluid(maxWidth: 910) {`
`40`		`- ...GatsbyImageSharpFluid_noBase64`
	`40`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`41`	`41`	`}`
`42`	`42`	`}`
`43`	`43`	`}`
Original file line number	Diff line number	Diff line change
@@ -75,7 +75,7 @@ export const query = graphql`
`75`	`75`	`localFile {`
`76`	`76`	`childImageSharp {`
`77`	`77`	`fluid(maxWidth: 910) {`
`78`		`- ...GatsbyImageSharpFluid_noBase64`
	`78`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`79`	`79`	`}`
`80`	`80`	`}`
`81`	`81`	`}`
Original file line number	Diff line number	Diff line change
@@ -149,7 +149,7 @@ export const query = graphql`
`149`	`149`	`localFile {`
`150`	`150`	`childImageSharp {`
`151`	`151`	`fluid(maxWidth: 910) {`
`152`		`- ...GatsbyImageSharpFluid_noBase64`
	`152`	`+ ...GatsbyImageSharpFluid_withWebp_noBase64`
`153`	`153`	`}`
`154`	`154`	`}`
`155`	`155`	`}`