Merge pull request #7693 from kanishksingh23/fix/home-page-performance

Performance: Improved home page performance(layer5.io)

Author: saurabhraghuvanshii

gatsby-config.js

@@ -480,7 +480,9 @@ module.exports = {
           {
             resolve: "gatsby-plugin-purgecss",
             options: {
-              printRejected: true,
+              printRejected: false,
+              develop: false,
+              purgeOnly: ["src/"],
             },
           },
         ]

src/sections/Home/Banner-1/index.js

@@ -13,31 +13,44 @@ import Banner1SectionWrapper from "./banner1.style";
 
 const Banner1 = (props) => {
   return (
-    <Banner1SectionWrapper {...props} >
-      <Container >
-        <img loading="eager" alt="hero-image" src={Backgroundsvg} className="background-svg" />
+    <Banner1SectionWrapper {...props}>
+      <Container>
+        <img
+          loading="eager"
+          fetchPriority="high"
+          alt="hero-image"
+          src={Backgroundsvg}
+          className="background-svg"
+        />
         <Row>
           <Col $sm={8} $lg={8} className="section-title-wrapper">
-
             <SectionTitle
               className="section-title"
               $leftAlign={true}
               $UniWidth="100%"
             >
               <h1>Cloud Native Management</h1>
               <h2>
-              of <span>developer</span>-defined infrastructure
+                of <span>developer</span>-defined infrastructure
               </h2>
             </SectionTitle>
-            <p>
-            an open source-first community of cloud native engineers
-            </p>
+            <p>an open source-first community of cloud native engineers</p>
             <span className="vintage-box-container">
               <VintageBox $right={true} $vintageOne={true}>
-                <Button $primary className="banner-btn one" title="Join in" $url="/community">
+                <Button
+                  $primary
+                  className="banner-btn one"
+                  title="Join in"
+                  $url="/community"
+                >
                   <FaMapMarkedAlt size={21} className="icon-left" />
                 </Button>
-                <Button $primary className="banner-btn two" title="See Meshery" $url="/cloud-native-management/meshery">
+                <Button
+                  $primary
+                  className="banner-btn two"
+                  title="See Meshery"
+                  $url="/cloud-native-management/meshery"
+                >
                   <FiDownloadCloud size={21} className="icon-left" />
                 </Button>
               </VintageBox>

src/sections/Home/Partners-home/index.js

@@ -21,32 +21,41 @@ const settings = {
   responsive: [
     {
       breakpoint: 1400,
-      settings: "unslick"
-    }
-  ]
+      settings: "unslick",
+    },
+  ],
 };
 
 const LazyPartnerImage = ({ partner }) => {
   const [imageSrc, setImageSrc] = useState("");
 
   useEffect(() => {
-    partner.imageLink().then(module => {
+    partner.imageLink().then((module) => {
       setImageSrc(module.default);
     });
   }, [partner.imageLink]);
 
-  if (!imageSrc) return null;
-
   return (
-    <img
-      className="partner-image"
-      id={partner.name}
-      loading="lazy"
-      src={imageSrc}
-      alt={partner.name}
-      width={partner.imageWidth}
-      height={partner.imageHeight}
-    />
+    <div
+      style={{
+        width: partner.imageWidth,
+        height: partner.imageHeight,
+        display: "inline-block",
+        flexShrink: 0,
+      }}
+    >
+      {imageSrc && (
+        <img
+          className="partner-image"
+          id={partner.name}
+          loading="lazy"
+          src={imageSrc}
+          alt={partner.name}
+          width={partner.imageWidth}
+          height={partner.imageHeight}
+        />
+      )}
+    </div>
   );
 };