feat: lazy load images and heavy resources

src/collections/careers/how-to-apply.js

@@ -41,7 +41,7 @@ const PositionApply = () => {
     <PositionApplyWrapper>
       <div className="apply-now">
         <div className="apply">
-          <img src={job_icon} alt="job-icon" className="pos-logo"/>
+          <img src={job_icon} alt="job-icon" className="pos-logo" loading="lazy" />
           <h5>How to Apply</h5>
         </div>
         <p>Submit your resume and a short cover letter to:

src/components/Call-To-Actions/CTA_Bottom/index.js

@@ -67,7 +67,7 @@ const CTA_Bottom = ({ alt, button_text, category, content, external_link, image,
         )}
         <Button primary title={category ? Categories[category]["Button_Text"] : (button_text ? button_text : "Join Us")} url={category ? Categories[category]["Link"] : (url ? url : defaultURL)} external={category ? Categories[category]["Link_external"] : (external_link ? true : false)} />
       </div>
-      <img src={category ? Categories[category]["Image"] : (image ? image : image_src)} alt={category ? Categories[category]["Image_Alt"] : (alt ? alt : "Alt Text")} />
+      <img src={category ? Categories[category]["Image"] : (image ? image : image_src)} alt={category ? Categories[category]["Image_Alt"] : (alt ? alt : "Alt Text")} loading="lazy" />
     </CTA_BottomWrapper>
   );
 };

src/components/Call-To-Actions/CTA_FullWidth/index.js

@@ -102,7 +102,7 @@ const CTA_FullWidth = ({ alt, button_text, category, content, external_link, ima
     <CTA_FullWidthWrapper {...props}>
       { category ? (
         <>
-          <img src={Categories[category]["Image"]} alt={Categories[category]["Image_Alt"]} />
+          <img src={Categories[category]["Image"]} alt={Categories[category]["Image_Alt"]} loading="lazy" />
           <div className="cta-content">
             <div>
               <h3>{Categories[category]["Heading"]}</h3>
@@ -113,7 +113,7 @@ const CTA_FullWidth = ({ alt, button_text, category, content, external_link, ima
         </>
       ) : (
         <>
-          <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} />
+          <img src={image ? image : image_src} alt={alt ? alt : "Alt Text"} loading="lazy" />
           <div className="cta-content">
             <div>
               <h3>{heading ? heading : defaultHeading}</h3>

src/components/Case-study-banner/index.js

@@ -215,12 +215,12 @@ const CaseStudyBanner = () => {
               <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
             </div>
             <div className="meshery-and-spire">
-              <img src={MesheryAndSpire} alt="meshery-and-spire" />
+              <img src={MesheryAndSpire} alt="meshery-and-spire" loading="lazy" />
             </div>
           </div>
           <div className="large-screen">
             <div className={`left-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-              <img src={MesheryLogo} alt="meshery-logo" />
+              <img src={MesheryLogo} alt="meshery-logo" loading="lazy" />
             </div>
             <div className={`desc ${hover ? "desc-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
               <h2>Discover how HPE uses Meshery to manage SPIRE</h2>
@@ -229,7 +229,7 @@ const CaseStudyBanner = () => {
               </div>
             </div>
             <div className={`right-img ${hover ? "scale-on-hover" : ""}`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
-              <img src={SpireLogo} alt="spire-logo" />
+              <img src={SpireLogo} alt="spire-logo" loading="lazy" />
             </div>
           </div>
         </BannerWrapper>

src/components/ContactForm/index.js

@@ -52,7 +52,7 @@ const ContactForm = () => {
         >
           <Form className="form" method="post">
             <div className="title">
-              <img className="layer5-logo" src={logo} alt="Layer5 Logo" />
+              <img className="layer5-logo" src={logo} alt="Layer5 Logo" loading="lazy" />
             </div>
             <label htmlFor="firstname" className="form-name">
               First Name <span className="required-sign">*</span>

src/components/FeatureUseCard/index.js

@@ -7,7 +7,7 @@ const FeatureUseCard = (props) => {
     <Col sm={props.sm} md={props.md} lg={props.lg} className={"display-container"}>
       <FeatureUseCardWrapper >
         <div className={"image-container"}>
-          <img src={props.data.image} alt={""}/>
+          <img src={props.data.image} alt={""} loading="lazy" />
         </div>
         <div className={"feature-info-container"}>
           <p className={"feature-title"}>{props.data.heading}</p>

src/components/Features/TwoColLayout.js

@@ -66,29 +66,29 @@ const TwoColLayout = ({ containerRefs, contentRefs }) => {
       <Container ref={(el) => (containerRefs.current[0] = el)}>
         <ImageWrapper>
           <Link to="/solutions/architecture-diagram">
-            <img src={isDark ? DiagrammingImageDark : DiagrammingImageLight} alt="image" />
+            <img src={isDark ? DiagrammingImageDark : DiagrammingImageLight} alt="image" loading="lazy" />
           </Link>
         </ImageWrapper>
         <ContentWrapper ref={(el) => (contentRefs.current[0] = el)}>
           <h2>Visualize and Simplify Platform Engineering</h2>
           <p className="text">Incorporate AWS, GCP and Kubernetes components into Meshery designs for comprehensive and intuitive system mapping, documentation, and orchestration.</p>
           <div className="small-card-container">
             <Link aria-label="aws" className="small-card" to="/cloud-native-management/generate-aws-architecture-diagram">
-              <img alt="aws" src={isDark ? AWSLogoDark : AWSLogoLight} width={40} />
+              <img alt="aws" src={isDark ? AWSLogoDark : AWSLogoLight} width={40} loading="lazy" />
             </Link>
             <Link aria-label="gcp" className="small-card" to="/cloud-native-management/generate-gcp-architecture-diagram">
-              <img alt="gcp" src={GCPLogo} width={40} />
+              <img alt="gcp" src={GCPLogo} width={40} loading="lazy" />
             </Link>
             <Link aria-label="kubernetes" className="small-card" to="/cloud-native-management/generate-kubernetes-architecture-diagram">
-              <img alt="kubernetes" src={KubernetesLogo} width={40} />
+              <img alt="kubernetes" src={KubernetesLogo} width={40} loading="lazy" />
             </Link>
           </div>
         </ContentWrapper>
       </Container>
       <Container ref={(el) => (containerRefs.current[1] = el)}>
         <ImageWrapper>
           <Link to="/orchestration-management">
-            <img src={isDark ? OrchestrationDark : OrchestrationLight} alt="image" />
+            <img src={isDark ? OrchestrationDark : OrchestrationLight} alt="image" loading="lazy" />
           </Link>
         </ImageWrapper>
         <ContentWrapper ref={(el) => (contentRefs.current[1] = el)}>

src/components/Features/index.js

@@ -95,7 +95,7 @@ const Features = (props) => {
           : (<div className="small-card-container">
             {props.redirectLinkWithImage.map((item) => (
               <Link key={item.text} className="small-card" to={item.redirect}>
-                <img src={item.image} width={40} />
+                <img src={item.image} width={40} loading="lazy" />
                 <span>{item.text}</span>
               </Link>
             ))}
@@ -113,18 +113,19 @@ const Features = (props) => {
                 alt=""
                 style={{ position: "absolute" }}
                 className="waveAnimation"
+                loading="lazy"
               />
             )}
-            <img src={getPerson(props.cursor * 2)} alt="" />
+            <img src={getPerson(props.cursor * 2)} alt="" loading="lazy" />
           </SvgRandomWrapper>
           <SvgRandomWrapper
             className="person2"
             style={{ display: props.cursor ? "none" : "" }}
           >
-            <img src={getPerson(props.cursor * 2 + 1)} alt="" />
+            <img src={getPerson(props.cursor * 2 + 1)} alt="" loading="lazy" />
           </SvgRandomWrapper>
           <Link to={props.redirectLink ? props.redirectLink : props.redirectLinkWithImage[0].redirect}>
-            <img src={props.imgLink} alt="image" />
+            <img src={props.imgLink} alt="image" loading="lazy" />
           </Link>
         </ImageWrapper>
       ) : (
@@ -139,18 +140,19 @@ const Features = (props) => {
                 alt=""
                 style={{ position: "absolute" }}
                 className="waveAnimation"
+                loading="lazy"
               />
             )}
-            <img src={getPerson(props.cursor * 2)} alt="" />
+            <img src={getPerson(props.cursor * 2)} alt="" loading="lazy" />
           </SvgRandomWrapper>
           <SvgRandomWrapper
             className="person2"
             style={{ display: props.cursor ? "none" : "" }}
           >
-            <img src={getPerson(props.cursor * 2 + 1)} alt="" />
+            <img src={getPerson(props.cursor * 2 + 1)} alt="" loading="lazy" />
           </SvgRandomWrapper>
           <Link to={props.redirectLink ? props.redirectLink : props.redirectLinkWithImage[0].redirect}>
-            <img src={props.imgLink} alt="image" />
+            <img src={props.imgLink} alt="image" loading="lazy" />
           </Link>
         </ImageWrapperTwo>
       )}

src/components/Inline-quotes/index.js

@@ -105,7 +105,7 @@ const InlineQuotes = ({ person, title, quote,image }) => {
         {(image || person || title) && <hr />}
         {
           image &&
-          <img src={image}></img>
+          <img src={image} loading="lazy"></img>
         }
         <div className="quote-source">
           <h5>{person}</h5>

src/components/Logo-List/index.js

@@ -7,7 +7,7 @@ const LogoList = ({ logos, className }) => {
       <ul>
         {logos.map((logo) => (
           <li key={logo.url}>
-            <img src={logo.url} alt={logo.alt} />
+            <img src={logo.url} alt={logo.alt} loading="lazy" />
           </li>
         ))}
       </ul>

src/components/RelatedPicks/index.js

@@ -11,7 +11,7 @@ const Card = ({ title, imgSrc, redirectLink }) => {
       <Link to={redirectLink}>
         <CardWrapper>
           <CardImageContainer>
-            <Image src={imgSrc} alt="gcp architecture diagram" />
+            <Image src={imgSrc} alt="gcp architecture diagram" loading="lazy" />
           </CardImageContainer>
           <CardTitle>{title}</CardTitle>
         </CardWrapper>

src/components/SocialLinks-Color/index.js

@@ -16,18 +16,18 @@ const SocialLinksColor = () => {
       <Col xs={12}>
         <Row className="social_icons">
           <a href="https://discuss.layer5.io" target="_blank" rel="noreferrer">
-            <img height="30px" src={forum_icon} alt="forum" />
+            <img height="30px" src={forum_icon} alt="forum" loading="lazy" />
           </a>
           <a
             className="mail_icon"
             href="mailto:[email protected]"
             target="_blank"
             rel="noreferrer"
           >
-            <img height="30px" src={mail_icon} alt="mail" />
+            <img height="30px" src={mail_icon} alt="mail" loading="lazy" />
           </a>
           <a href="https://slack.layer5.io/" target="_blank" rel="noreferrer">
-            <img className="slack" height="30px" src={slack_icon} alt="slack" />
+            <img className="slack" height="30px" src={slack_icon} alt="slack" loading="lazy" />
           </a>
           <a
             href="https://twitter.com/layer5"
@@ -43,7 +43,7 @@ const SocialLinksColor = () => {
             rel="noreferrer"
             className="github"
           >
-            <img height="30px" src={github_icon} alt="github" />
+            <img height="30px" src={github_icon} alt="github" loading="lazy" />
           </a>
           <a
             href="https://www.linkedin.com/company/layer5"
@@ -55,6 +55,7 @@ const SocialLinksColor = () => {
               height="30px"
               src={linkedin_icon}
               alt="linkedin"
+              loading="lazy"
             />
           </a>
           <a
@@ -68,6 +69,7 @@ const SocialLinksColor = () => {
               height="30px"
               src={youtube_icon}
               alt="youtube"
+              loading="lazy"
             />
           </a>
           <a
@@ -81,6 +83,7 @@ const SocialLinksColor = () => {
               height="30px"
               src={docker_icon}
               alt="docker"
+              loading="lazy"
             />
           </a>
         </Row>

src/components/SocialLinks/index.js

@@ -19,43 +19,43 @@ const SocialLinks = () => {
             target="_blank"
             rel="noreferrer"
           >
-            <img height="40 px" src={mail_icon} alt="mail" />
+            <img height="40 px" src={mail_icon} alt="mail" loading="lazy" />
           </a>
           <a
             href="https://slack.layer5.io/"
             target="_blank" rel="noreferrer"
           >
-            <img className="slack" height="40 px" src={slack_icon} alt="slack" />
+            <img className="slack" height="40 px" src={slack_icon} alt="slack" loading="lazy" />
           </a>
           <a
             href="https://twitter.com/layer5"
             target="_blank"
             rel="noreferrer"
           >
-            <img className="twitter" height="40 px" src={twitter_icon} alt="twitter" />
+            <img className="twitter" height="40 px" src={twitter_icon} alt="twitter" loading="lazy" />
           </a>
           <a
             href="https://github.com/layer5io"
             target="_blank"
             rel="noreferrer"
           >
-            <img className="github" height="40 px" src={github_icon} alt="github" />
+            <img className="github" height="40 px" src={github_icon} alt="github" loading="lazy" />
           </a>
           <a
             className="youtube_icon"
             href="https://www.youtube.com/c/Layer5io?sub_confirmation=1"
             target="_blank"
             rel="noreferrer"
           >
-            <img className="youtube" height="40 px" src={youtube_icon} alt="youtube" />
+            <img className="youtube" height="40 px" src={youtube_icon} alt="youtube" loading="lazy" />
           </a>
           <a
             className="docker_icon"
             href="https://hub.docker.com/u/layer5/"
             target="_blank"
             rel="noreferrer"
           >
-            <img className="docker" height="40 px" src={docker_icon} alt="docker" />
+            <img className="docker" height="40 px" src={docker_icon} alt="docker" loading="lazy" />
           </a>
         </Row>
       </Col>

src/components/image.js

@@ -6,7 +6,7 @@ const Image = ({ childImageSharp, extension, publicURL, alt, ...rest }) => {
   if (!childImageSharp && extension === "svg") {
     return (
       <div className="old-gatsby-image-wrapper">
-        <img src={publicURL} alt={alt} />
+        <img src={publicURL} alt={alt} loading="lazy" />
       </div>
     );
   }

src/components/service-mesh-patterns-Table/Table.js

@@ -41,9 +41,9 @@ const Table = () => {
                       <span {...column.getSortByToggleProps()}>
                         {column.isSorted
                           ? column.isSortedDesc
-                            ? <img className="service-mesh-icon" src={downicon} alt="down icon" />
-                            : <img className="service-mesh-icon" src={upicon} alt="up icon" />
-                          : <img className="service-mesh-icon" src={alphaicon} alt="alpha icon" />}
+                            ? <img className="service-mesh-icon" src={downicon} alt="down icon" loading="lazy" />
+                            : <img className="service-mesh-icon" src={upicon} alt="up icon" loading="lazy" />
+                          : <img className="service-mesh-icon" src={alphaicon} alt="alpha icon" loading="lazy" />}
                       </span>
                       : <>
                       </>}

src/components/specs/data-card.js

@@ -49,31 +49,31 @@ const DataCard = () => {
         <Col className="col-1" sm={6} lg={6}>
           <ul>
             <li>
-              <img src={List_Icon} alt="Performance Icon" />
+              <img src={List_Icon} alt="Performance Icon" loading="lazy"/>
               <h5>Extensive library of integrations</h5>
             </li>
             <li>
-              <img src={List_Icon} alt="Configuration Icon" />
+              <img src={List_Icon} alt="Configuration Icon" loading="lazy"/>
               <h5>Infrastructure orchestration</h5>
             </li>
             <li>
-              <img src={List_Icon} alt="Performance Icon" />
+              <img src={List_Icon} alt="Performance Icon" loading="lazy"/>
               <h5>Multi-player editing</h5>
             </li>
           </ul>
         </Col>
         <Col className="col-1" sm={6} lg={6}>
           <ul>
             <li>
-              <img src={List_Icon} alt="Performance Icon" />
+              <img src={List_Icon} alt="Performance Icon" loading="lazy"/>
               <h5>Ready-to-use templates</h5>
             </li>
             <li>
-              <img src={List_Icon} alt="Configuration Icon" />
+              <img src={List_Icon} alt="Configuration Icon" loading="lazy"/>
               <h5>Visual drag & drop</h5>
             </li>
             <li>
-              <img src={List_Icon} alt="Performance Icon" />
+              <img src={List_Icon} alt="Performance Icon" loading="lazy"/>
               <h5>Operate with No Code</h5>
             </li>
           </ul>

src/reusecore/Blockquote/Blockquote-image/index.js

@@ -10,7 +10,7 @@ const Customers = (props) => {
         <section className="bq-section">
           <div className="type-one-wrapper type-one-wrapper-boxed">
             <div className="bq-quote type-one-quote">
-              <div className="type-one-quote-userpic"><img src={props.image}></img></div>
+              <div className="type-one-quote-userpic"><img src={props.image} loading="lazy"></img></div>
               <div className="type-one-quote-qmark">
                 &#10077;
               </div>
@@ -41,7 +41,7 @@ const Customers = (props) => {
                   </div>
                 </div>
 
-                <div className="type-two-quote-userpic"><img src={props.image}></img></div>
+                <div className="type-two-quote-userpic"><img src={props.image} loading="lazy"></img></div>
 
                 <div className="type-two-quote-base">
                   <blockquote className="type-two-quote-text">
@@ -71,7 +71,7 @@ const Customers = (props) => {
                     {props.quote}
                   </blockquote>
                   <div className="type-three-quote-meta">
-                    <div className="type-three-quote-userpic"><img src={props.image}></img></div>
+                    <div className="type-three-quote-userpic"><img src={props.image} loading="lazy"></img></div>
                     <div className="type-three-quote-meta-info">
                       <div className="type-three-quote-author"><cite>{props.person ? props.person : ""}</cite></div>
                       <div className="type-three-quote-source"><span>{props.title ? props.title : ""}</span></div>