Merge pull request #7708 from layer5io/revert-7693-fix/home-page-performance

Revert "Performance: Improved home page performance(layer5.io)"

Author: leecalcote

gatsby-config.js

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

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

@@ -13,44 +13,31 @@ import Banner1SectionWrapper from "./banner1.style";
 
 const Banner1 = (props) => {
   return (
-    <Banner1SectionWrapper {...props}>
-      <Container>
-        <img
-          loading="eager"
-          fetchPriority="high"
-          alt="hero-image"
-          src={Backgroundsvg}
-          className="background-svg"
-        />
+    <Banner1SectionWrapper {...props} >
+      <Container >
+        <img loading="eager" 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,41 +21,32 @@ 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 (
-    <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>
+    <img
+      className="partner-image"
+      id={partner.name}
+      loading="lazy"
+      src={imageSrc}
+      alt={partner.name}
+      width={partner.imageWidth}
+      height={partner.imageHeight}
+    />
   );
 };