diff --git a/src/collections/careers/how-to-apply.js b/src/collections/careers/how-to-apply.js
index 7e2f116ea4ed..40b208548a85 100644
--- a/src/collections/careers/how-to-apply.js
+++ b/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:
diff --git a/src/components/Call-To-Actions/CTA_Bottom/index.js b/src/components/Call-To-Actions/CTA_Bottom/index.js
index d4e250e19ace..6e156ac5c5a7 100644
--- a/src/components/Call-To-Actions/CTA_Bottom/index.js
+++ b/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>
   );
 };
diff --git a/src/components/Call-To-Actions/CTA_FullWidth/index.js b/src/components/Call-To-Actions/CTA_FullWidth/index.js
index b76e75d217b3..d8cc8897b31a 100644
--- a/src/components/Call-To-Actions/CTA_FullWidth/index.js
+++ b/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>
diff --git a/src/components/Case-study-banner/index.js b/src/components/Case-study-banner/index.js
index 16645981289f..c11e1d4f3ee7 100644
--- a/src/components/Case-study-banner/index.js
+++ b/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>
diff --git a/src/components/ContactForm/index.js b/src/components/ContactForm/index.js
index 27721f586e03..d77d56197b45 100644
--- a/src/components/ContactForm/index.js
+++ b/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>
diff --git a/src/components/FeatureUseCard/index.js b/src/components/FeatureUseCard/index.js
index dbd7766ed70c..419b1cdbaa5b 100644
--- a/src/components/FeatureUseCard/index.js
+++ b/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>
diff --git a/src/components/Features/TwoColLayout.js b/src/components/Features/TwoColLayout.js
index 29e18c823e03..6fb5cd432326 100644
--- a/src/components/Features/TwoColLayout.js
+++ b/src/components/Features/TwoColLayout.js
@@ -66,7 +66,7 @@ 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)}>
@@ -74,13 +74,13 @@ const TwoColLayout = ({ containerRefs, contentRefs }) => {
           <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>
@@ -88,7 +88,7 @@ const TwoColLayout = ({ containerRefs, contentRefs }) => {
       <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)}>
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
index 248ecb6d8bad..8099be770a4a 100644
--- a/src/components/Features/index.js
+++ b/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>
       )}
diff --git a/src/components/Inline-quotes/index.js b/src/components/Inline-quotes/index.js
index 0f91be9d1659..c160e5c2b7dc 100644
--- a/src/components/Inline-quotes/index.js
+++ b/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>
diff --git a/src/components/Logo-List/index.js b/src/components/Logo-List/index.js
index ed518c4aa1e7..4fc45b9f0e99 100644
--- a/src/components/Logo-List/index.js
+++ b/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>
diff --git a/src/components/RelatedPicks/index.js b/src/components/RelatedPicks/index.js
index ce4f0e644fe4..273ffb00ae5f 100644
--- a/src/components/RelatedPicks/index.js
+++ b/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>
diff --git a/src/components/SocialLinks-Color/index.js b/src/components/SocialLinks-Color/index.js
index 441b8cad83a1..5fbf9b0d629d 100644
--- a/src/components/SocialLinks-Color/index.js
+++ b/src/components/SocialLinks-Color/index.js
@@ -16,7 +16,7 @@ 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"
@@ -24,10 +24,10 @@ const SocialLinksColor = () => {
             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>
diff --git a/src/components/SocialLinks/index.js b/src/components/SocialLinks/index.js
index 99d5e52eab92..f2780f742c3a 100644
--- a/src/components/SocialLinks/index.js
+++ b/src/components/SocialLinks/index.js
@@ -19,27 +19,27 @@ 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"
@@ -47,7 +47,7 @@ const SocialLinks = () => {
             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"
@@ -55,7 +55,7 @@ const SocialLinks = () => {
             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>
diff --git a/src/components/image.js b/src/components/image.js
index 8902f5e17418..6f5aff835d20 100644
--- a/src/components/image.js
+++ b/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>
     );
   }
diff --git a/src/components/service-mesh-patterns-Table/Table.js b/src/components/service-mesh-patterns-Table/Table.js
index 34223f4c3aa4..7b9ed7dc9d6b 100644
--- a/src/components/service-mesh-patterns-Table/Table.js
+++ b/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>
                       : <>
                       </>}
diff --git a/src/components/specs/data-card.js b/src/components/specs/data-card.js
index 1c7c350f7a7e..c5f5511b60ba 100644
--- a/src/components/specs/data-card.js
+++ b/src/components/specs/data-card.js
@@ -49,15 +49,15 @@ 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>
@@ -65,15 +65,15 @@ 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>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>
diff --git a/src/reusecore/Blockquote/Blockquote-image/index.js b/src/reusecore/Blockquote/Blockquote-image/index.js
index f5ebd3c6f32d..333a4730af07 100644
--- a/src/reusecore/Blockquote/Blockquote-image/index.js
+++ b/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>
diff --git a/src/sections/Cloud-Native-Catalog/catalog.js b/src/sections/Cloud-Native-Catalog/catalog.js
index d0a37bf0bef6..40a00a60a817 100644
--- a/src/sections/Cloud-Native-Catalog/catalog.js
+++ b/src/sections/Cloud-Native-Catalog/catalog.js
@@ -137,7 +137,7 @@ const Catalog = () => {
         <Row className="catalog">
           <Col md={6} className="catalog-image">
             <div className="image-wrapper">
-              <img src={isDark ? CatalogsDark : CatalogsLight} className="calalog-image" />
+              <img src={isDark ? CatalogsDark : CatalogsLight} className="calalog-image" loading="lazy" />
             </div>
           </Col>
           <Col md={6} className="catalog-detail">
@@ -158,14 +158,14 @@ const Catalog = () => {
           </Col>
           <Col md={6} className="catalog-image">
             <div className="image-wrapper">
-              <img src={Patterns} className="calalog-image" />
+              <img src={Patterns} className="calalog-image" loading="lazy" />
             </div>
           </Col>
         </Row>
         <Row className="catalog">
           <Col md={6} className="catalog-image">
             <div className="image-wrapper">
-              <img src={Wasm} className="calalog-image" />
+              <img src={Wasm} className="calalog-image" loading="lazy" />
             </div>
           </Col>
           <Col md={6} className="catalog-detail">
@@ -202,7 +202,7 @@ const Catalog = () => {
           </Col>
           <Col md={6} className="catalog-image">
             <div className="image-wrapper">
-              <img src={Opa} className="calalog-image" />
+              <img src={Opa} className="calalog-image" loading="lazy" />
             </div>
           </Col>
         </Row>
diff --git a/src/sections/Cloud-Native-Catalog/patterns.js b/src/sections/Cloud-Native-Catalog/patterns.js
index 8046dc48ef9f..971d32041b99 100644
--- a/src/sections/Cloud-Native-Catalog/patterns.js
+++ b/src/sections/Cloud-Native-Catalog/patterns.js
@@ -263,49 +263,49 @@ const Catalog = () => {
             <div className="container">
               <div id="carousel">
                 <div className="slide one">
-                  <img src={Mutual_tls} />
+                  <img src={Mutual_tls} loading="lazy" />
                 </div>
                 <div className="slide two">
-                  <img src={Retries} />
+                  <img src={Retries} loading="lazy" />
                 </div>
                 <div className="slide three">
-                  <img src={Traces} />
+                  <img src={Traces} loading="lazy" />
                 </div>
                 <div className="slide four">
-                  <img src={Denial} />
+                  <img src={Denial} loading="lazy" />
                 </div>
                 <div className="slide five">
-                  <img src={Correlate_event} />
+                  <img src={Correlate_event} loading="lazy" />
                 </div>
                 <div className="slide six">
-                  <img src={Only_wagent} />
+                  <img src={Only_wagent} loading="lazy" />
                 </div>
                 <div className="slide seven">
-                  <img src={Node_agent} />
+                  <img src={Node_agent} loading="lazy" />
                 </div>
                 <div className="slide eight">
-                  <img src={Single_tenant} />
+                  <img src={Single_tenant} loading="lazy" />
                 </div>
                 <div className="slide nine">
-                  <img src={Pre_provison} />
+                  <img src={Pre_provison} loading="lazy" />
                 </div>
                 <div className="slide ten">
-                  <img src={Circuit_breaker} />
+                  <img src={Circuit_breaker} loading="lazy" />
                 </div>
                 <div className="slide eleven">
-                  <img src={Retry_deadline} />
+                  <img src={Retry_deadline} loading="lazy" />
                 </div>
                 <div className="slide twelve">
-                  <img src={Singleton} />
+                  <img src={Singleton} loading="lazy" />
                 </div>
                 <div className="slide thirteen">
-                  <img src={Jwt_transformer} />
+                  <img src={Jwt_transformer} loading="lazy" />
                 </div>
                 <div className="slide fourteen">
-                  <img src={Multicluster} />
+                  <img src={Multicluster} loading="lazy" />
                 </div>
                 <div className="slide fifteen">
-                  <img src={Http_metrics} />
+                  <img src={Http_metrics} loading="lazy" />
                 </div>
               </div>
             </div>
diff --git a/src/sections/CloudNativeDeployments/features.js b/src/sections/CloudNativeDeployments/features.js
index 9d3077e358ab..d23f057c1293 100644
--- a/src/sections/CloudNativeDeployments/features.js
+++ b/src/sections/CloudNativeDeployments/features.js
@@ -152,7 +152,7 @@ const Feature = () => {
         <Row className="catalog">
           <Col md={6} className="diagram-image">
             <div className="image-wrapper">
-              <img src={meshery_designer} className="kubernetes-image" />
+              <img src={meshery_designer} className="kubernetes-image" loading="lazy" />
               {/* <StaticImage src={meshery_designer} alt="Meshery Designer" loading="lazy" /> */}
             </div>
           </Col>
@@ -176,14 +176,14 @@ const Feature = () => {
           </Col>
           <Col md={6} className="diagram-image">
             <div className="image-wrapper">
-              <img src={meshery_visualizer} className="kubernetes-image" />
+              <img src={meshery_visualizer} className="kubernetes-image" loading="lazy" />
             </div>
           </Col>
         </Row>
         <Row className="catalog">
           <Col md={6} className="catalog-image">
             <div className="image-wrapper">
-              <img src={isDark ? CatalogsDark : CatalogsLight} className="calalog-image" />
+              <img src={isDark ? CatalogsDark : CatalogsLight} className="calalog-image" loading="lazy" />
             </div>
           </Col>
           <Col md={6} className="catalog-detail">
diff --git a/src/sections/Community/Handbook/community.js b/src/sections/Community/Handbook/community.js
index 07460a413d6c..e3e8ab05f588 100644
--- a/src/sections/Community/Handbook/community.js
+++ b/src/sections/Community/Handbook/community.js
@@ -75,14 +75,14 @@ const CommunityGuide = () => {
               ideas.
             </p>
             <p>
-              <img className="logo" src={Point} alt="Point" />
+              <img className="logo" src={Point} alt="Point" loading="lazy" />
               <strong>Be honest -</strong> “A half-truth is a whole lie.” Being
               truthful allows you to reach a better agreement. As a result, be
               open and honest about who you are, what you do, and how you want
               to accomplish it.
             </p>
             <p>
-              <img className="logo" src={Point} alt="Point" />
+              <img className="logo" src={Point} alt="Point" loading="lazy" />
               <strong>Be respectful and inclusive -</strong> We are a diverse
               group of people with diverse backgrounds and opinions. We expect
               everyone to be civil and professional in their activities.
@@ -91,7 +91,7 @@ const CommunityGuide = () => {
               reasonable person.
             </p>
             <p>
-              <img className="logo" src={Point} alt="Point" />
+              <img className="logo" src={Point} alt="Point" loading="lazy" />
               <strong>Collaborate and Contribute -</strong> Members are expected
               to attend community and workgroup meetings, find ways to help,
               check up on our Github page regularly etc. Within the community
@@ -100,19 +100,19 @@ const CommunityGuide = () => {
             <p id="Resources">
               <h3> Resources </h3>
               <p>
-                <img className="logo" src={Point} alt="Point" />
+                <img className="logo" src={Point} alt="Point" loading="lazy" />
                 Be sure to access the resources{" "}
                 <a href="https://drive.google.com/drive/u/0/folders/0ABH8aabN4WAKUk9PVA">
                   community drive.
                 </a>{" "}
               </p>
               <p>
-                <img className="logo" src={Point} alt="Point" />
+                <img className="logo" src={Point} alt="Point" loading="lazy" />
                 Sign-up on the{" "}
                 <a href="https://layer5.io/subscribe">community mailer</a>.
               </p>
               <p>
-                <img className="logo" src={Point} alt="Point" />
+                <img className="logo" src={Point} alt="Point" loading="lazy" />
                 Ask for a copy of{" "}
                 <a href="https://layer5.io/books/the-enterprise-path-to-service-mesh-architectures">
                   The Enterprise Path to Service Mesh Architectures.
diff --git a/src/sections/Community/Handbook/connect.js b/src/sections/Community/Handbook/connect.js
index 6165234c1f43..1037819163ef 100644
--- a/src/sections/Community/Handbook/connect.js
+++ b/src/sections/Community/Handbook/connect.js
@@ -249,7 +249,7 @@ const Connect = () => {
                 <a href="https://twitter.com/smp_spec">@smp_spec</a>
               </p>
               <p className="channels-para">
-                <img className="channels-img" src={mail_icon} alt="mail" />
+                <img className="channels-img" src={mail_icon} alt="mail" loading="lazy" />
                 &nbsp;&nbsp;
                 <a href="mailto:community-managers@layer5.io">
                   Connect with our community managers for any inquiries or
@@ -261,6 +261,7 @@ const Connect = () => {
                   className="channels-img"
                   src={youtube_icon}
                   alt="youtube"
+                  loading="lazy"
                 />
                 &nbsp;&nbsp;
                 <a href="https://www.youtube.com/c/Layer5io?sub_confirmation=1">
@@ -268,7 +269,7 @@ const Connect = () => {
                 </a>
               </p>
               <p className="channels-para">
-                <img className="channels-img" src={github_icon} alt="github" />
+                <img className="channels-img" src={github_icon} alt="github" loading="lazy" />
                 &nbsp;&nbsp;
                 <a href="https://github.com/layer5io">
                   Discover our projects on GitHub
@@ -279,6 +280,7 @@ const Connect = () => {
                   className="channels-img"
                   src={linkedin_icon}
                   alt="linkedin"
+                  loading="lazy"
                 />
                 &nbsp;&nbsp;
                 <a href="https://www.linkedin.com/company/layer5">
@@ -286,14 +288,14 @@ const Connect = () => {
                 </a>
               </p>
               <p className="channels-para">
-                <img className="channels-img" src={docker_icon} alt="docker" />
+                <img className="channels-img" src={docker_icon} alt="docker" loading="lazy" />
                 &nbsp;&nbsp;
                 <a href="https://hub.docker.com/u/layer5/">
                   Take control with Docker deployment
                 </a>
               </p>
               <p className="channels-para">
-                <img className="channels-img" src={slack_icon} alt="slack" />
+                <img className="channels-img" src={slack_icon} alt="slack" loading="lazy" />
                 &nbsp;&nbsp;
                 <a href="https://slack.layer5.io/">
                   Communicate and collaborate with us on Slack
diff --git a/src/sections/Community/Handbook/contributor-journey.js b/src/sections/Community/Handbook/contributor-journey.js
index b911e326c6d1..d31bde9c1b7f 100644
--- a/src/sections/Community/Handbook/contributor-journey.js
+++ b/src/sections/Community/Handbook/contributor-journey.js
@@ -106,7 +106,7 @@ const Intro = () => {
                 <h2>Contributor's Journey</h2>
                 <div className="heading-start">
                   <h5>Start Here</h5>
-                  <img className="heading-start__arrow" src={longArrow} alt="longArrow" />
+                  <img className="heading-start__arrow" src={longArrow} alt="longArrow" loading="lazy" />
                 </div>
               </Col>
               <Col sm={12} lg={6}>
diff --git a/src/sections/Community/Handbook/mentorships.js b/src/sections/Community/Handbook/mentorships.js
index ab77dcc36d75..fd6c782fdaeb 100644
--- a/src/sections/Community/Handbook/mentorships.js
+++ b/src/sections/Community/Handbook/mentorships.js
@@ -140,7 +140,7 @@ const MentorshipPrograms = () => {
       <ConductWrapper>
         <Container>
 
-          {data.map((data) => {
+          {data.map((data, i) => {
             const { id, name, description, buttonLink, imageLink, imagePosition } = data;
             return (
               <div className={imagePosition} key={id}>
@@ -156,7 +156,7 @@ const MentorshipPrograms = () => {
                     <Col lg={6} md={6} sm={12} id="col2">
                       { isValidElement(imageLink)
                         ? imageLink
-                        :  <img src={imageLink} title="Click to know More about our partner" alt={name} />
+                        :  <img src={imageLink} title="Click to know More about our partner" alt={name} loading={i > 0 ? "lazy" : "eager"} />
                       }
                     </Col>
                   </Row>
diff --git a/src/sections/Community/Handbook/projects.js b/src/sections/Community/Handbook/projects.js
index 2055818485ed..8e9cde00ea8a 100644
--- a/src/sections/Community/Handbook/projects.js
+++ b/src/sections/Community/Handbook/projects.js
@@ -112,7 +112,7 @@ const Maintainer = () => {
                 {" "}
                 <h3>
                   <a href="https://layer5.io/cloud-native-management/meshery">
-                    <img className="project-title-icon" src={meshery} alt="Meshery" />
+                    <img className="project-title-icon" src={meshery} alt="Meshery" loading="lazy" />
                     &nbsp; Meshery
                   </a>
                 </h3>{" "}
@@ -121,8 +121,8 @@ const Maintainer = () => {
             </p>
             <p>
               Meshery and its components Meshery Operator{" "}
-              <img className="project-description-icon" src={mesheryoperatoricon} alt="Meshery Operator Icon" /> and MeshSync{" "}
-              <img className="project-description-icon" src={mesherysyncicon} alt="MeshSync icon" />
+              <img className="project-description-icon" src={mesheryoperatoricon} alt="Meshery Operator Icon" loading="lazy" /> and MeshSync{" "}
+              <img className="project-description-icon" src={mesherysyncicon} alt="MeshSync icon" loading="lazy" />
               <ul>
                 <li>
                   <h4>
@@ -188,6 +188,7 @@ const Maintainer = () => {
                       className="project-title-icon"
                       alt="cloud native performance"
                       src={servicemeshperformance}
+                      loading="lazy"
                     />
                     &nbsp; Cloud Native Performance{" "}
                   </a>
@@ -215,6 +216,7 @@ const Maintainer = () => {
                       className="project-title-icon"
                       alt="cloud native patterns"
                       src={PatternsLogo}
+                      loading="lazy"
                     />{" "}
                     &nbsp; Cloud Native Patterns{" "}
                   </a>
diff --git a/src/sections/Community/Handbook/recognition.js b/src/sections/Community/Handbook/recognition.js
index 83c5602f2f28..987a910b32b7 100644
--- a/src/sections/Community/Handbook/recognition.js
+++ b/src/sections/Community/Handbook/recognition.js
@@ -110,120 +110,120 @@ const RecognitionPage = () => {
             <ul style={badgeListStyle}>
               <p><b>Activity badges:</b></p>
               <li>
-                <img src={DesignPioneerLogo} style={badgeStyle} />
+                <img src={DesignPioneerLogo} style={badgeStyle} loading="lazy" />
                 <b>Design Pioneer</b> - awarded to the Layer5 cloud users when they create their first design.
               </li>
               <li>
-                <img src={ApplicationPioneerLogo} style={badgeStyle} />
+                <img src={ApplicationPioneerLogo} style={badgeStyle} loading="lazy" />
                 <b>Application Pioneer</b> - awarded to the Layer5 cloud users when they create their first application.
               </li>
               <li>
-                <img src={SharingIsCaringLogo} style={badgeStyle} />
+                <img src={SharingIsCaringLogo} style={badgeStyle} loading="lazy" />
                 <b>Sharing is Caring</b> - This badge is awarded upon first-time sharing one of your designs.
               </li>
               <li>
-                <img src={ShippedLogo} style={badgeStyle} />
+                <img src={ShippedLogo} style={badgeStyle} loading="lazy" />
                 <b>Shipped</b> - This badge is awarded upon the success of your first design deployment.
               </li>
               <li>
-                <img src={NeedForSpeedLogo} style={badgeStyle} />
+                <img src={NeedForSpeedLogo} style={badgeStyle} loading="lazy" />
                 <b>Need for Speed</b> - This badge is awarded upon successful execution of your first performance test.
               </li>
               <li>
-                <img src={HipHackerLogo} style={badgeStyle} />
+                <img src={HipHackerLogo} style={badgeStyle} loading="lazy" />
                 <b>Hip Hacker</b> - First Interactive Terminal Session - awarded the first time that you establish an interactive terminal session with a Kubernetes Pod.
               </li>
               <li>
-                <img src={StreamerLogo} style={badgeStyle} />
+                <img src={StreamerLogo} style={badgeStyle} loading="lazy" />
                 <b>Streamer</b> - First Log Streaming Session - awarded the first time that you stream logs from a Kubernetes Pod.
               </li>
               <li>
-                <img src={GitOPsWithFriendsLogo} style={badgeStyle} />
+                <img src={GitOPsWithFriendsLogo} style={badgeStyle} loading="lazy" />
                 <b>GitOps with Friends</b> - First Collaborator - awarded the first time a collaborator saves changes to one of your designs.
               </li>
               <li>
-                <img src={BringABuddyLogo} style={badgeStyle} />
+                <img src={BringABuddyLogo} style={badgeStyle} loading="lazy" />
                 <b>Bring a Buddy</b> - awarded to the users who invite someone to Layer5 cloud.
               </li>
               <li>
-                <img src={CodeCleanupCrewLogo} style={badgeStyle} />
+                <img src={CodeCleanupCrewLogo} style={badgeStyle} loading="lazy" />
                 <b>Code Cleanup Crew</b> - awarded to contributors who help maintain code quality and cleanliness.
               </li>
               <li>
-                <img src={SecuritySentinelLogo} style={badgeStyle} />
+                <img src={SecuritySentinelLogo} style={badgeStyle} loading="lazy" />
                 <b>Security Sentinel</b> - awarded to individuals who contribute to identifying and fixing security vulnerabilities.
               </li>
               <li>
-                <img src={LogevityLegendLogo} style={badgeStyle} />
+                <img src={LogevityLegendLogo} style={badgeStyle} loading="lazy" />
                 <b>Longevity Legend</b> - awarded for long-term, sustained contributions to the project over the years.
               </li>
               <li>
-                <img src={ReviewRockstarLogo} style={badgeStyle} />
+                <img src={ReviewRockstarLogo} style={badgeStyle} loading="lazy" />
                 <b>Review Rockstar</b> - awarded to individuals who provide thorough and valuable code reviews.
               </li>
               <li>
-                <img src={MeshmapSnapshotLogo} style={badgeStyle} />
+                <img src={MeshmapSnapshotLogo} style={badgeStyle} loading="lazy" />
                 <b>MeshMap Snapshot</b> - awarded to users upon creation of their first infrastructure screenshot directly in their pull request.
               </li>
               <li>
-                <img src={ContinuousContributorLogo} style={badgeStyle} />
+                <img src={ContinuousContributorLogo} style={badgeStyle} loading="lazy" />
                 <b>Continuous Contributor</b> - awarded to the community members who make consistent and impactful contributions for a long period of time in Layer5 projects in recognition and appreciation of their efforts.
               </li>
               <p><b>Projects:</b></p>
               <li>
-                <img src={ImageHubLogo} style={badgeStyle} />
+                <img src={ImageHubLogo} style={badgeStyle} loading="lazy" />
                 <b>Image Hub</b> - awarded to the community members who make consistent and impactful contributions to the Image Hub project in recognition and appreciation of their efforts.
               </li>
               <li>
-                <img src={meshmapLogo} style={badgeStyle} />
+                <img src={meshmapLogo} style={badgeStyle} loading="lazy" />
                 <b>MeshMap</b> - awarded to the community members who make consistent and impactful contributions to the <Link to="/cloud-native-management/meshmap">MeshMap</Link> project in recognition and appreciation of their efforts. Community members who earn this badge occasionally become a project maintainer.
               </li>
               <li>
-                <img src={ServiceMeshPerformance} style={badgeStyle} />
+                <img src={ServiceMeshPerformance} style={badgeStyle} loading="lazy" />
                 <b>Cloud Native Performance</b> - awarded to the community members who make consistent and impactful contributions to the Cloud Native Performance project. Community members who earn this badge occasionally become a project maintainer.
               </li>
               <li>
-                <img src={CommunityLogo} style={badgeStyle} />
+                <img src={CommunityLogo} style={badgeStyle} loading="lazy" />
                 <b>Community</b> - awarded to the community members who repeatedly engage in welcoming, encouraging, and supporting other Layer5 community members. Community members who earn this badge occasionally graduate to undertaking the Community Manager role.
               </li>
               <li>
-                <img src={MesheryLogo} style={badgeStyle} />
+                <img src={MesheryLogo} style={badgeStyle} loading="lazy" />
                 <b>Meshery</b> - awarded to the community members who make consistent and impactful contributions to the Meshery project. Community members who earn this badge occasionally become a project maintainer.
               </li>
               <li>
-                <img src={MesheryOperator} style={badgeStyle} />
+                <img src={MesheryOperator} style={badgeStyle} loading="lazy" />
                 <b>Meshery Operator</b> - awarded to the community members who make consistent and impactful contributions to Meshery Operator of the Meshery project in recognition and appreciation of their efforts.
               </li>
               <li>
-                <img src={PatternsLogo} style={badgeStyle} />
+                <img src={PatternsLogo} style={badgeStyle} loading="lazy" />
                 <b>Patterns</b> - awarded to the community members who make consistent and impactful contributions to the <Link to="/learn/service-mesh-books/service-mesh-patterns">Cloud Native Patterns</Link> project in recognition and appreciation of their efforts.
               </li>
               <li>
-                <img src={LandscapeGreen} style={badgeStyle} />
+                <img src={LandscapeGreen} style={badgeStyle} loading="lazy" />
                 <b>Landscape</b> - awarded to the community members who make consistent and impactful contributions to the layer5.io website.
               </li>
               <li>
-                <img src={writersLogo} style={badgeStyle} />
+                <img src={writersLogo} style={badgeStyle} loading="lazy" />
                 <b>Writer's Program</b> - awarded to the community members who make with two or more published writings whether in article, blog post, project documentation or other form in recognition and appreciation of their efforts.
               </li>
               <li>
-                <img src={NightHawkLogo} style={badgeStyle} />
+                <img src={NightHawkLogo} style={badgeStyle} loading="lazy" />
                 <b>Nighthawk</b> - awarded to the community members who make consistent and impactful contributions to the NightHawk project in recognition and appreciation of their efforts. Community members who earn this badge occasionally become a project maintainer.
               </li>
               <li>
-                <img src={uiuxrLogo} style={badgeStyle} />
+                <img src={uiuxrLogo} style={badgeStyle} loading="lazy" />
                 <b>UI/UX</b> - awarded to the community members who create or improve designs for visual aspects or user flow for any of the websites, flyers, promotions, Meshery UI, and so on in recognition and appreciation of their efforts.
               </li>
               <li>
-                <img src={MesheryCatalogLogo} style={badgeStyle} />
+                <img src={MesheryCatalogLogo} style={badgeStyle} loading="lazy" />
                 <b>Meshery Catalog</b> - awarded to the community members who make consistent and impactful contributions to the <a href="https://meshery.io/catalog">Meshery Catalog</a> of Meshery project in recognition and appreciation of their efforts.
               </li>
               <li>
-                <img src={DockerExtension} style={badgeStyle} />
+                <img src={DockerExtension} style={badgeStyle} loading="lazy" />
                 <b>Docker Extension</b> - awarded to the community members who make consistent and impactful contributions to the Docker Extension of meshery project in recognition and appreciation of their efforts.
               </li>
               <li>
-                <img src={DocsLogo} style={badgeStyle} />
+                <img src={DocsLogo} style={badgeStyle} loading="lazy" />
                 <b>Docs</b> - awarded to the community members who make consistent and impactful contributions to the <a href="https://docs.meshery.io/">Meshery docs</a> in recognition and appreciation of their efforts.
               </li>
             </ul>
diff --git a/src/sections/Community/Handbook/repository.js b/src/sections/Community/Handbook/repository.js
index 88be857bbb42..020f16dac584 100644
--- a/src/sections/Community/Handbook/repository.js
+++ b/src/sections/Community/Handbook/repository.js
@@ -157,7 +157,7 @@ const Repository = () => {
                           <tr>
                             <td>
                               <a href={site} target="_blank" rel="noreferrer">
-                                <img className="site-icon" src={image} alt="site-icon" />
+                                <img className="site-icon" src={image} alt="site-icon" loading="lazy" />
                               </a>
                             </td>
                             <td>{project}</td>
@@ -177,7 +177,7 @@ const Repository = () => {
                                 target="_blank"
                                 rel="noreferrer"
                               >
-                                <img className="github-icon" src={github} alt="github-icon" />
+                                <img className="github-icon" src={github} alt="github-icon" loading="lazy" />
                               </a>
                               <div className="accessRequired"> { accessRequired != "" ? accessRequired : ""}</div>
                             </td>
@@ -215,7 +215,7 @@ const Repository = () => {
                         <tbody key={project}>
                           <tr>
                             <td>
-                              <img className={siteIconClasses} src={image} alt="project" />&nbsp;{project} </td>
+                              <img className={siteIconClasses} src={image} alt="project" loading="lazy" />&nbsp;{project} </td>
                             <td>{language}</td>
                             <td>{description}</td>
                             <td>
@@ -234,7 +234,7 @@ const Repository = () => {
                                 target="_blank"
                                 rel="noreferrer"
                               >
-                                <img className="github-icon" src={github} alt="github-icon" />
+                                <img className="github-icon" src={github} alt="github-icon" loading="lazy" />
                               </a>
                               <div className="accessRequired"> { accessRequired != "" ? accessRequired : ""}</div>
                             </td>
diff --git a/src/sections/Community/Handbook/writing-program.js b/src/sections/Community/Handbook/writing-program.js
index 67881f8e10f5..2fd3b776943d 100644
--- a/src/sections/Community/Handbook/writing-program.js
+++ b/src/sections/Community/Handbook/writing-program.js
@@ -219,7 +219,7 @@ const Writers = () => {
                 <Col sm={12} md={6} lg={4}>
                   <Link className="project-card" to="/blog">
                     <div className="content_type">
-                      <img src={blog} alt="Blog" />
+                      <img src={blog} alt="Blog" loading="lazy" />
                       <h5>Blog</h5>
                       <p>Share Your Experience</p>
                     </div>
@@ -228,7 +228,7 @@ const Writers = () => {
                 <Col sm={12} md={6} lg={4}>
                   <Link className="project-card" to="/resources">
                     <div className="content_type">
-                      <img src={resources} alt="Resource" />
+                      <img src={resources} alt="Resource" loading="lazy" />
                       <h5>Resource</h5>
                       <p>Articles, Tutorials, Podcasts and More</p>
                     </div>
@@ -240,7 +240,7 @@ const Writers = () => {
                     to="/learn/service-mesh-workshops"
                   >
                     <div className="content_type">
-                      <img src={workshop} alt="Workshop" />
+                      <img src={workshop} alt="Workshop" loading="lazy" />
                       <h5>Workshop</h5>
                       <p>Deliver a Hands-on Learning Experience</p>
                     </div>
@@ -253,7 +253,7 @@ const Writers = () => {
                 <Col sm={12} md={6} lg={4}>
                   <Link className="project-card" to="/community/events">
                     <div className="content_type">
-                      <img src={event} alt="Event" />
+                      <img src={event} alt="Event" loading="lazy" />
                       <h5>Event</h5>
                       <p>Organize an Event</p>
                     </div>
@@ -262,7 +262,7 @@ const Writers = () => {
                 <Col sm={12} md={6} lg={4}>
                   <Link className="project-card" to="/community/events">
                     <div className="content_type">
-                      <img src={talks} alt="Talks" />
+                      <img src={talks} alt="Talks" loading="lazy" />
                       <h5>Talks</h5>
                       <p>Talk About Anything Cloud Native</p>
                     </div>
@@ -274,7 +274,7 @@ const Writers = () => {
                     to="/cloud-native-management/meshery"
                   >
                     <div className="content_type">
-                      <img src={videos} alt="Videos" />
+                      <img src={videos} alt="Videos" loading="lazy" />
                       <h5>Recorded Videos</h5>
                       <p>Product Videos, Reviews or Demo</p>
                     </div>
diff --git a/src/sections/Community/Member-single/index.js b/src/sections/Community/Member-single/index.js
index a9a9554c08fd..08c2afe03b8b 100644
--- a/src/sections/Community/Member-single/index.js
+++ b/src/sections/Community/Member-single/index.js
@@ -94,6 +94,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={mesheryLogo}
                                 alt="Meshery logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -108,6 +109,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={smpLogo}
                                 alt="Service Mesh Peformance logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -122,6 +124,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={imageHubLogo}
                                 alt="Image Hublogo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -138,6 +141,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={landscapeLogo}
                                 alt="Service Mesh Landscape logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -154,6 +158,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={communityLogo}
                                 alt="Community logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -170,6 +175,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={docsLogo}
                                 alt="Docs logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -184,6 +190,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={mesheryCatalogLogo}
                                 alt="Meshery Catalog logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -200,6 +207,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={meshMapLogo}
                                 alt="MeshMap Logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -214,6 +222,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={dockerExtensionLogo}
                                 alt="Docker Extension logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -230,6 +239,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={NighthawkLogo}
                                 alt="Nighthawk logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -246,6 +256,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={mesheryOperatorLogo}
                                 alt="Meshery Operator logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -262,6 +273,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={patternsLogo}
                                 alt="Patterns Logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -278,6 +290,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={uiuxrLogo}
                                 alt="UI/UX'er Logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
@@ -292,6 +305,7 @@ const MemberSingle = ({ frontmatter }) => {
                                 className="profile-social-links"
                                 src={writerIcon}
                                 alt="Writer Program Logo"
+                                loading="lazy"
                               />
                             </Link>
                           </li>
diff --git a/src/sections/Community/Meshmates/index.js b/src/sections/Community/Meshmates/index.js
index 8314125625d8..20fd12a42912 100644
--- a/src/sections/Community/Meshmates/index.js
+++ b/src/sections/Community/Meshmates/index.js
@@ -92,35 +92,35 @@ const Meshmates = () => {
               <p>After pairing up on the <a href="https://discuss.layer5.io/c/community/12">Layer5 discussion forum</a>, the community Slack’s video chat or Google Hangouts are both available for your use as tools for getting to know one another. While getting acquainted and onboarding into the community, we suggest the following goals: </p>
               <table>
                 <tr>
-                  <td className="icon"><img alt="icon" src={c_icon} /></td>
+                  <td className="icon"><img alt="icon" src={c_icon} loading="lazy" /></td>
                   <td className="feature">
                     <h4> Get familiar with all of the projects </h4>
                     <p> Spend time understanding each of the Layer5 initiatives through high level overviews available in the community drive and in discussion with your MeshMate. </p>
                   </td>
                 </tr>
                 <tr>
-                  <td className="icon"><img alt="icon" src={c_icon} /></td>
+                  <td className="icon"><img alt="icon" src={c_icon} loading="lazy" /></td>
                   <td className="feature">
                     <h4> Identify your area of interest </h4>
                     <p> Use time with your MeshMate to familiarize with the architecture and technologies used in the projects. Inform your MeshMate of your current skills and what skills you would like to develop. </p>
                   </td>
                 </tr>
                 <tr>
-                  <td className="icon"><img alt="icon" src={c_icon} /></td>
+                  <td className="icon"><img alt="icon" src={c_icon} loading="lazy" /></td>
                   <td className="feature">
                     <h4> Run Meshery </h4>
                     <p> Put on your user hat and walk-through all of Meshery’s features and functions as a user. </p>
                   </td>
                 </tr>
                 <tr>
-                  <td className="icon"><img alt="icon" src={c_icon} /></td>
+                  <td className="icon"><img alt="icon" src={c_icon} loading="lazy" /></td>
                   <td className="feature">
                     <h4> Build Meshery </h4>
                     <p> Confirm that you have a usable development environment. </p>
                   </td>
                 </tr>
                 <tr>
-                  <td className="icon"><img alt="icon" src={c_icon} /></td>
+                  <td className="icon"><img alt="icon" src={c_icon} loading="lazy" /></td>
                   <td className="feature">
                     <h4> Contribute </h4>
                     <p> Grab an open issue or suggest a new one. </p>
diff --git a/src/sections/Community/Newcomers-guide/index.js b/src/sections/Community/Newcomers-guide/index.js
index e0a43154023c..218ffbf8fa82 100644
--- a/src/sections/Community/Newcomers-guide/index.js
+++ b/src/sections/Community/Newcomers-guide/index.js
@@ -43,7 +43,7 @@ const NewcomersGuide = () => {
               <h2>Contributor's Journey</h2>
               <div className="heading-start">
                 <h4>Start Here</h4>
-                <img className="heading-start__arrow" src={longArrow} />
+                <img className="heading-start__arrow" src={longArrow} loading="lazy" />
               </div>
             </Col>
             <Col sm={12} lg={6}>
diff --git a/src/sections/Company/Brand/Brand-components/brand-guide.js b/src/sections/Company/Brand/Brand-components/brand-guide.js
index 6ebf23eb99ef..60c13ff4f215 100644
--- a/src/sections/Company/Brand/Brand-components/brand-guide.js
+++ b/src/sections/Company/Brand/Brand-components/brand-guide.js
@@ -44,7 +44,7 @@ const BrandGuide = () => {
             <Col xs={12}>
               <Row className="bookmarks">
                 <Link to={BrandGuidePDF}>
-                  <img className="bookmarks" src={BrandGuideImg} alt="Layer5 Brand Guide" />
+                  <img className="bookmarks" src={BrandGuideImg} alt="Layer5 Brand Guide" loading="lazy" />
                 </Link>
               </Row>
             </Col>
diff --git a/src/sections/Company/Brand/Brand-components/community.js b/src/sections/Company/Brand/Brand-components/community.js
index 211245498602..e53a68a7fcbb 100644
--- a/src/sections/Company/Brand/Brand-components/community.js
+++ b/src/sections/Company/Brand/Brand-components/community.js
@@ -49,10 +49,10 @@ const CommunityBrand = () => {
         </Col>
         <Row className="ImgDiv">
           <Col xs={12} sm={3}>
-            <img src={MeshMateLogo} alt="MeshMate Logo"/>
+            <img src={MeshMateLogo} alt="MeshMate Logo" loading="lazy" />
           </Col>
           <Col xs={12} sm={3} className="logo">
-            <img src={MeshMateLogoLight} alt="MeshMate Logo Light"/>
+            <img src={MeshMateLogoLight} alt="MeshMate Logo Light" loading="lazy" />
           </Col>
         </Row>
       </Row>
diff --git a/src/sections/Company/Brand/Brand-components/imagehub.js b/src/sections/Company/Brand/Brand-components/imagehub.js
index 2fc72bb15a04..ba11aff908be 100644
--- a/src/sections/Company/Brand/Brand-components/imagehub.js
+++ b/src/sections/Company/Brand/Brand-components/imagehub.js
@@ -44,10 +44,10 @@ const ImageHubBrand = () => {
         <SRLWrapper>
           <Row Vcenter className="ImgDiv">
             <Col xs={12} sm={3}>
-              <img src={ImageHub} alt="ImageHub Logo"/>
+              <img src={ImageHub} alt="ImageHub Logo" loading="lazy" />
             </Col>
             <Col xs={12} sm={3} className="logo">
-              <img src={ImageHubWhite} alt="ImageHubWhite Logo"/>
+              <img src={ImageHubWhite} alt="ImageHubWhite Logo" loading="lazy" />
             </Col>
           </Row>
         </SRLWrapper>
diff --git a/src/sections/Company/Brand/Brand-components/layer5.js b/src/sections/Company/Brand/Brand-components/layer5.js
index 97cda37563be..2179a3376aeb 100644
--- a/src/sections/Company/Brand/Brand-components/layer5.js
+++ b/src/sections/Company/Brand/Brand-components/layer5.js
@@ -56,11 +56,11 @@ const Layer5Brand = () => {
           <SRLWrapper>
             <Row Vcenter className="Layer5Logos">
               <Col xs={12} sm={6}>
-                <img src={Layer5WhiteBg} alt="Layer5 Logo" />
+                <img src={Layer5WhiteBg} alt="Layer5 Logo" loading="lazy" />
                   Primary Logo: broadly, and majorly applicable
               </Col>
               <Col xs={12} sm={6}>
-                <img src={Layer5Icon} alt="Layer5 Logo" className="Layer5Icon" />
+                <img src={Layer5Icon} alt="Layer5 Logo" className="Layer5Icon" loading="lazy" />
                   Layer5 Icon: suited for square-shaped display
               </Col>
             </Row>
@@ -107,7 +107,7 @@ const Layer5Brand = () => {
             </p>
             <Row className="bookmarks">
               <Link to={BookmarksPDF}>
-                <img className="bookmarks" src={Bookmarks} alt="Layer5 and Meshery Bookmarks" />
+                <img className="bookmarks" src={Bookmarks} alt="Layer5 and Meshery Bookmarks" loading="lazy" />
               </Link>
             </Row>
           </Col>
diff --git a/src/sections/Company/Brand/Brand-components/meshery-operator.js b/src/sections/Company/Brand/Brand-components/meshery-operator.js
index 53d4a1d9e22d..f9c3ddae9b48 100644
--- a/src/sections/Company/Brand/Brand-components/meshery-operator.js
+++ b/src/sections/Company/Brand/Brand-components/meshery-operator.js
@@ -51,10 +51,10 @@ const MesheryOperatorBrand = () => {
           <SRLWrapper>
             <Row Vcenter className="ImgDiv">
               <Col xs={12} sm={4}>
-                <img src={MesheryOperatorDark} alt="MesheryOperatorDark Logo"/>
+                <img src={MesheryOperatorDark} alt="MesheryOperatorDark Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4} className="logo">
-                <img src={MesheryOperator} alt="MesheryOperator Logo"/>
+                <img src={MesheryOperator} alt="MesheryOperator Logo" loading="lazy" />
               </Col>
             </Row>
           </SRLWrapper>
diff --git a/src/sections/Company/Brand/Brand-components/meshery.js b/src/sections/Company/Brand/Brand-components/meshery.js
index 2923fdfef4dc..d899db7209ea 100644
--- a/src/sections/Company/Brand/Brand-components/meshery.js
+++ b/src/sections/Company/Brand/Brand-components/meshery.js
@@ -46,18 +46,18 @@ const MesheryBrand = () => {
         <SRLWrapper>
           <Row Vcenter className="ImgDiv">
             <Col xs={12} sm={4}>
-              <img src={MeshDarkText} alt="MesheryDark Logo"/>
+              <img src={MeshDarkText} alt="MesheryDark Logo" loading="lazy" />
             </Col>
             <Col xs={12} sm={4}>
-              <img src={MeshLogoLightTextSide} alt="MesheryLightTextSide Logo"/>
+              <img src={MeshLogoLightTextSide} alt="MesheryLightTextSide Logo" loading="lazy" />
             </Col>
           </Row>
           <Row Vcenter className="ImgDiv">
             <Col xs={12} sm={4}>
-              <img src={MeshLogoLightText} alt="MesheryLightText Logo"/>
+              <img src={MeshLogoLightText} alt="MesheryLightText Logo" loading="lazy" />
             </Col>
             <Col xs={12} sm={4}>
-              <img src={MeshLogoOnly} alt="Meshery Logo" />
+              <img src={MeshLogoOnly} alt="Meshery Logo" loading="lazy" />
             </Col>
           </Row>
         </SRLWrapper>
diff --git a/src/sections/Company/Brand/Brand-components/meshmap.js b/src/sections/Company/Brand/Brand-components/meshmap.js
index 53632bfb0c03..20be80e59d2f 100644
--- a/src/sections/Company/Brand/Brand-components/meshmap.js
+++ b/src/sections/Company/Brand/Brand-components/meshmap.js
@@ -52,13 +52,13 @@ const MeshMapBrand = () => {
           <SRLWrapper>
             <Row Vcenter className="ImgDiv">
               <Col xs={12} sm={4}>
-                <img src={MeshMap} alt="MeshMap Logo"/>
+                <img src={MeshMap} alt="MeshMap Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4}>
-                <img src={MeshMapIcon} alt="MeshMapLight Icon"/>
+                <img src={MeshMapIcon} alt="MeshMapLight Icon" loading="lazy" />
               </Col>
               <Col xs={12} sm={4}>
-                <img src={MeshMapTitle} alt="MeshMapTitle Text"/>
+                <img src={MeshMapTitle} alt="MeshMapTitle Text" loading="lazy" />
               </Col>
             </Row>
           </SRLWrapper>
diff --git a/src/sections/Company/Brand/Brand-components/meshmark.js b/src/sections/Company/Brand/Brand-components/meshmark.js
index 5f88c02bbfa2..d8a493b31e45 100644
--- a/src/sections/Company/Brand/Brand-components/meshmark.js
+++ b/src/sections/Company/Brand/Brand-components/meshmark.js
@@ -58,43 +58,43 @@ const MeshMarkBrand = () => {
           <SRLWrapper>
             <Row Vcenter className="ImgDiv smp-logo">
               <Col xs={12} sm={4}>
-                <img src={MeshmarkDark} alt="MeshmarkDark Logo"/>
+                <img src={MeshmarkDark} alt="MeshmarkDark Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4}>
                 <div className="logo">
-                  <img src={MeshmarkWhite} alt="MeshMarkWhite Logo"/>
+                  <img src={MeshmarkWhite} alt="MeshMarkWhite Logo" loading="lazy" />
                 </div>
               </Col>
               <Col xs={12} sm={4}>
                 <div className="logo">
-                  <img src={MeshmarkLight} alt="MeshmarkLightLogo"/>
+                  <img src={MeshmarkLight} alt="MeshmarkLightLogo" loading="lazy" />
                 </div>
               </Col>
             </Row>
             <Row Vcenter className="ImgDiv MeshMark-logo">
               <Col xs={12} sm={4}>
-                <img src={MeshmarkDarkTextSide} alt="MeshMarkDarkTextSide Logo"/>
+                <img src={MeshmarkDarkTextSide} alt="MeshMarkDarkTextSide Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4}>
                 <div className="logo">
-                  <img src={MeshmarkWhiteTextSide} alt="MeshMarkWhiteTextSide Logo"/>
+                  <img src={MeshmarkWhiteTextSide} alt="MeshMarkWhiteTextSide Logo" loading="lazy" />
                 </div>
               </Col>
               <Col xs={12} sm={4}>
                 <div className="logo">
-                  <img src={MeshmarkLightTextSide} alt="MeshmarkLightTextSide Logo"/>
+                  <img src={MeshmarkLightTextSide} alt="MeshmarkLightTextSide Logo" loading="lazy" />
                 </div>
               </Col>
             </Row>
             <Row Vcenter className="ImgDiv smp-logo">
               <Col xs={12} sm={4}>
-                <img src={MeshmarkTextLight} alt="MeshmarkTextLight Logo"/>
+                <img src={MeshmarkTextLight} alt="MeshmarkTextLight Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4}>
-                <img src={MeshmarkTextBlue} alt="MeshMarkTextBlue Logo"/>
+                <img src={MeshmarkTextBlue} alt="MeshMarkTextBlue Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4}>
-                <img src={MeshmarkTextDark} alt="MeshmarkTextDark Logo"/>
+                <img src={MeshmarkTextDark} alt="MeshmarkTextDark Logo" loading="lazy" />
               </Col>
             </Row>
           </SRLWrapper>
diff --git a/src/sections/Company/Brand/Brand-components/meshmaster.js b/src/sections/Company/Brand/Brand-components/meshmaster.js
index e35905215f73..4541c269a9b6 100644
--- a/src/sections/Company/Brand/Brand-components/meshmaster.js
+++ b/src/sections/Company/Brand/Brand-components/meshmaster.js
@@ -44,13 +44,13 @@ const MeshMasterBrand = () => {
         <SRLWrapper>
           <Row Vcenter className="ImgDiv">
             <Col xs={12} sm={4}>
-              <img src={MeshMasterFull} alt="Meshmaster Full Logo"/>
+              <img src={MeshMasterFull} alt="Meshmaster Full Logo" loading="lazy" />
             </Col>
             <Col xs={12} sm={4}>
-              <img src={MeshMasterIcon} alt="Meshmaster Icon"/>
+              <img src={MeshMasterIcon} alt="Meshmaster Icon" loading="lazy" />
             </Col>
             <Col xs={12} sm={4}>
-              <img src={MeshMasterText} alt="Meshmaster Text"/>
+              <img src={MeshMasterText} alt="Meshmaster Text" loading="lazy" />
             </Col>
 
           </Row>
diff --git a/src/sections/Company/Brand/Brand-components/meshsync.js b/src/sections/Company/Brand/Brand-components/meshsync.js
index 7fb6b83b70cb..004c4d651777 100644
--- a/src/sections/Company/Brand/Brand-components/meshsync.js
+++ b/src/sections/Company/Brand/Brand-components/meshsync.js
@@ -51,10 +51,10 @@ const MeshSyncBrand = () => {
           <SRLWrapper>
             <Row Vcenter className="ImgDiv">
               <Col xs={12} sm={4} className="logo">
-                <img src={MeshSync} alt="MeshSync Logo"/>
+                <img src={MeshSync} alt="MeshSync Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4} className="logo">
-                <img src={MeshSyncLight} alt="MeshSyncLight Logo"/>
+                <img src={MeshSyncLight} alt="MeshSyncLight Logo" loading="lazy" />
               </Col>
             </Row>
           </SRLWrapper>
diff --git a/src/sections/Company/Brand/Brand-components/nighthawk.js b/src/sections/Company/Brand/Brand-components/nighthawk.js
index c79ac3f66d4c..88a0dcd54594 100644
--- a/src/sections/Company/Brand/Brand-components/nighthawk.js
+++ b/src/sections/Company/Brand/Brand-components/nighthawk.js
@@ -39,13 +39,13 @@ const Nighthawk = () => {
         </Col>
         <Row Vcenter className="ImgDiv">
           <Col xs={12} sm={4}>
-            <img src={GNHWithName} alt="Nighthawk-with-name Logo" />
+            <img src={GNHWithName} alt="Nighthawk-with-name Logo" loading="lazy" />
           </Col>
           <Col xs={12} sm={4}>
-            <img src={GNH} alt="Nighthawk Logo" />
+            <img src={GNH} alt="Nighthawk Logo" loading="lazy" />
           </Col>
           <Col xs={12} sm={4}>
-            <img src={GNHNameOnly} alt="Nighthawk-name-only Logo" />
+            <img src={GNHNameOnly} alt="Nighthawk-name-only Logo" loading="lazy" />
           </Col>
         </Row>
       </Row>
diff --git a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
index e2b2d8ee2653..702c24d6df3e 100644
--- a/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
+++ b/src/sections/Company/Brand/Brand-components/servicemeshpatterns.js
@@ -44,16 +44,16 @@ const ServiceMeshPatterns = () => {
         <SRLWrapper>
           <Row Vcenter className="ImgDiv smp-logo">
             <Col xs={12} sm={4}>
-              <img src={SmpLogo} alt="Smp Logo"/>
+              <img src={SmpLogo} alt="Smp Logo" loading="lazy" />
             </Col>
             <Col xs={12} sm={4}>
               <div className="logo">
-                <img src={SmpWhite} alt="SmpWhite Logo"/>
+                <img src={SmpWhite} alt="SmpWhite Logo" loading="lazy" />
               </div>
             </Col>
             <Col xs={12} sm={4}>
               <div className="logo">
-                <img src={SmpTxt} alt="SmpTxt Logo"/>
+                <img src={SmpTxt} alt="SmpTxt Logo" loading="lazy" />
               </div>
             </Col>
           </Row>
diff --git a/src/sections/Company/Brand/Brand-components/smp.js b/src/sections/Company/Brand/Brand-components/smp.js
index 56ef30abb36e..00651903cfe2 100644
--- a/src/sections/Company/Brand/Brand-components/smp.js
+++ b/src/sections/Company/Brand/Brand-components/smp.js
@@ -55,31 +55,31 @@ const SMPBrand = () => {
           <SRLWrapper>
             <Row Vcenter className="ImgDiv smp-logo">
               <Col xs={12} sm={4}>
-                <img src={SmpDark} alt="SmpDark Logo"/>
+                <img src={SmpDark} alt="SmpDark Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4}>
                 <div className="logo">
-                  <img src={SmpWhite} alt="SmpWhite Logo"/>
+                  <img src={SmpWhite} alt="SmpWhite Logo" loading="lazy" />
                 </div>
               </Col>
               <Col xs={12} sm={4}>
                 <div className="logo">
-                  <img src={SmpLight} alt="SmpLight Logo"/>
+                  <img src={SmpLight} alt="SmpLight Logo" loading="lazy" />
                 </div>
               </Col>
             </Row>
             <Row Vcenter className="ImgDiv smp-logo">
               <Col xs={12} sm={4}>
-                <img src={SmPDarkTextSide} alt="SmpDarkTextSide Logo"/>
+                <img src={SmPDarkTextSide} alt="SmpDarkTextSide Logo" loading="lazy" />
               </Col>
               <Col xs={12} sm={4}>
                 <div className="logo">
-                  <img src={SmPWhiteTextSide} alt="SmPWhiteTextSide Logo"/>
+                  <img src={SmPWhiteTextSide} alt="SmPWhiteTextSide Logo" loading="lazy" />
                 </div>
               </Col>
               <Col xs={12} sm={4}>
                 <div className="logo">
-                  <img src={SmPLightTextSide} alt="SmPLightTextSide Logo"/>
+                  <img src={SmPLightTextSide} alt="SmPLightTextSide Logo" loading="lazy" />
                 </div>
               </Col>
             </Row>
diff --git a/src/sections/Company/Brand/Brand-components/social-backgrounds.js b/src/sections/Company/Brand/Brand-components/social-backgrounds.js
index 337df577d487..f1fbc7ec6a66 100644
--- a/src/sections/Company/Brand/Brand-components/social-backgrounds.js
+++ b/src/sections/Company/Brand/Brand-components/social-backgrounds.js
@@ -30,7 +30,7 @@ const SocialBackgrounds = () => {
       <Row>
         <Row Vcenter className="ImgDiv">
           <Col xs={12} className="social-backgrounds">
-            <img src={SocialBackgroundImg} alt="Layer5 Social backgrounds" />
+            <img src={SocialBackgroundImg} alt="Layer5 Social backgrounds" loading="lazy" />
           </Col>
         </Row>
       </Row>
diff --git a/src/sections/Company/Brand/Brand-components/stickfigures.js b/src/sections/Company/Brand/Brand-components/stickfigures.js
index 847ae204b202..885eee212dbc 100644
--- a/src/sections/Company/Brand/Brand-components/stickfigures.js
+++ b/src/sections/Company/Brand/Brand-components/stickfigures.js
@@ -36,7 +36,7 @@ const StickFigures = () => {
         </Col>
         <Row Vcenter className="ImgDiv">
           <Col xs={12} className="stick-figure">
-            <img src={SFL} alt="Layer5 Mascot, Five" />
+            <img src={SFL} alt="Layer5 Mascot, Five" loading="lazy" />
           </Col>
         </Row>
       </Row>
diff --git a/src/sections/Company/News-grid/press.js b/src/sections/Company/News-grid/press.js
index 0e523337f36a..13397d8880c6 100644
--- a/src/sections/Company/News-grid/press.js
+++ b/src/sections/Company/News-grid/press.js
@@ -92,7 +92,7 @@ const Press = () => {
               <div className="press_card">
                 <h5>Brand Kit</h5>
                 <p>Get our brand, logo assets and more.</p>
-                <img src={FiveIcon} alt="Five Logo" height={30} /> <br />
+                <img src={FiveIcon} alt="Five Logo" height={30} loading="lazy" /> <br />
                 <Link to="/brand">
                   <Button secondary title="Layer5 brand kit" external={true} />
                 </Link>
diff --git a/src/sections/Company/WhoWeAre/index.js b/src/sections/Company/WhoWeAre/index.js
index 49a356d286d1..57b1c837f7f0 100644
--- a/src/sections/Company/WhoWeAre/index.js
+++ b/src/sections/Company/WhoWeAre/index.js
@@ -28,25 +28,25 @@ const WhoWeAre = () => {
       <Row className="row">
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Cloud Native Leaders" />
+            <img src={checkCircle} alt="Cloud Native Leaders" loading="lazy" />
             <p>Cloud Native Leaders</p>
           </div>
         </Col>
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Meshery" />
+            <img src={checkCircle} alt="Meshery" loading="lazy" />
             <p>CNCF TOC Contributors</p>
           </div>
         </Col>
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Docker Captain" />
+            <img src={checkCircle} alt="Docker Captain" loading="lazy" />
             <p>Docker Captains</p>
           </div>
         </Col>
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Linkerd" />
+            <img src={checkCircle} alt="Linkerd" loading="lazy" />
             <p>Cloud Native Ambassadors</p>
           </div>
         </Col>
@@ -54,7 +54,7 @@ const WhoWeAre = () => {
       <Row className="second-row">
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Service Mesh Interface Maintainers" />
+            <img src={checkCircle} alt="Service Mesh Interface Maintainers" loading="lazy" />
             <p>Service Mesh Interface Maintainers</p>
           </div>
         </Col>
@@ -62,19 +62,19 @@ const WhoWeAre = () => {
       <Row className="row"> */}
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Service Mesh Performance Maintainers" />
+            <img src={checkCircle} alt="Service Mesh Performance Maintainers" loading="lazy" />
             <p>Service Mesh Performance Maintainers</p>
           </div>
         </Col>
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Service Mesh Authors and Trainers" />
+            <img src={checkCircle} alt="Service Mesh Authors and Trainers" loading="lazy" />
             <p>Service Mesh Authors</p>
           </div>
         </Col>
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Meshery Creators" />
+            <img src={checkCircle} alt="Meshery Creators" loading="lazy" />
             <p>Meshery Creators</p>
           </div>
         </Col>
@@ -82,19 +82,19 @@ const WhoWeAre = () => {
       <Row className="third-row">
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="CNCF Service Mesh Working Group" />
+            <img src={checkCircle} alt="CNCF Service Mesh Working Group" loading="lazy" />
             <p>CNCF Service Mesh Working Group Chairs</p>
           </div>
         </Col>
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="Service Mesh Authors and Trainers" />
+            <img src={checkCircle} alt="Service Mesh Authors and Trainers" loading="lazy" />
             <p>Kubernetes Certified Administrators</p>
           </div>
         </Col>
         <Col xs={12} sm={6} md={6} lg={3} className="col">
           <div className="item">
-            <img src={checkCircle} alt="CNCF Special Interest Group Network Chair" />
+            <img src={checkCircle} alt="CNCF Special Interest Group Network Chair" loading="lazy" />
             <p>CNCF Special Interest Group Network Chairs</p>
           </div>
         </Col>
diff --git a/src/sections/Developer-Infrastructure/features.js b/src/sections/Developer-Infrastructure/features.js
index 035253a8c16e..0722ff399a3a 100644
--- a/src/sections/Developer-Infrastructure/features.js
+++ b/src/sections/Developer-Infrastructure/features.js
@@ -132,7 +132,7 @@ const Feature = () => {
           </Col> */}
           <Col md={6} className="diagram-image">
             <div className="image-wrapper">
-              <img src={whiteboard} alt="Kubernetes Diagrams for anything" className="kubernetes-image" />
+              <img src={whiteboard} alt="Kubernetes Diagrams for anything" className="kubernetes-image" loading="lazy" />
             </div>
           </Col>
           <Col md={6} className="catalog-detail">
@@ -155,7 +155,7 @@ const Feature = () => {
           </Col>
           <Col md={6} className="catalog-image">
             <div className="image-wrapper">
-              <img src={orchestration_svg} className="calalog-image" />
+              <img src={orchestration_svg} className="calalog-image" loading="lazy" />
             </div>
           </Col>
         </Row>
diff --git a/src/sections/General/Footer/index.js b/src/sections/General/Footer/index.js
index fd2d9e2f0901..eec6ab0b4073 100644
--- a/src/sections/General/Footer/index.js
+++ b/src/sections/General/Footer/index.js
@@ -77,12 +77,13 @@ const Footer = ({ location }) => {
         className="section__particle"
         src={bubblesElement}
         alt="Layer5, the cloud native management company"
+        loading="lazy"
       />
       <Container>
         <Row className="footer-head">
           <Col className="footer_logo-icons" sm={3}>
             <Link to="/">
-              <img src={logo} className="footer-logo" alt="logo" />
+              <img src={logo} className="footer-logo" alt="logo" loading="lazy" />
             </Link>
           </Col>
           <Col className="footer_logo-icons" sm={9}>
diff --git a/src/sections/Home/Playground-home/index.js b/src/sections/Home/Playground-home/index.js
index bd2df1029335..4714b3dc32fd 100644
--- a/src/sections/Home/Playground-home/index.js
+++ b/src/sections/Home/Playground-home/index.js
@@ -229,19 +229,19 @@ const MeshmapVisualizerViews = () => {
             <div className="line position-line-down">
               <div className="line-primary animation-down-scroll">
                 <div className="box">
-                  <img className="boxImg" src={prometheus} alt="" />
+                  <img className="boxImg" src={prometheus} alt="" loading="lazy" />
                   <div>Prometheus</div>
                 </div>
                 <div className="box">
-                  <img className="boxImg" src={argocd} alt="" />
+                  <img className="boxImg" src={argocd} alt="" loading="lazy" />
                   <div className="boxText">Argo CD</div>
                 </div>
                 <div className="box">
-                  <img className="boxImg" src={cilium} alt="" />
+                  <img className="boxImg" src={cilium} alt="" loading="lazy" />
                   <div>Cilium</div>
                 </div>
                 <div className="box">
-                  <img className="boxImg" src={prometheus} alt="" />
+                  <img className="boxImg" src={prometheus} alt="" loading="lazy" />
                   <div>Prometheus</div>
                 </div>
               </div>
@@ -250,19 +250,19 @@ const MeshmapVisualizerViews = () => {
             <div className="line position-line-up">
               <div className="line-primary animation-up-scroll">
                 <div className="box">
-                  <img className="boxImg" src={kubernetes} alt="" />
+                  <img className="boxImg" src={kubernetes} alt="" loading="lazy" />
                   <div>Kubernetes</div>
                 </div>
                 <div className="box">
-                  <img className="boxImg" src={keda} alt="" />
+                  <img className="boxImg" src={keda} alt="" loading="lazy" />
                   <div>Keda</div>
                 </div>
                 <div className="box">
-                  <img className="boxImg" src={linkerd} alt="" />
+                  <img className="boxImg" src={linkerd} alt="" loading="lazy" />
                   <div>Linkerd</div>
                 </div>
                 <div className="box">
-                  <img className="boxImg" src={kubernetes} alt="" />
+                  <img className="boxImg" src={kubernetes} alt="" loading="lazy" />
                   <div>Kubernetes</div>
                 </div>
               </div>
diff --git a/src/sections/Home/Service-mesh-focussed/index.js b/src/sections/Home/Service-mesh-focussed/index.js
index 5bdc03fb0473..c25ade7a8f0a 100644
--- a/src/sections/Home/Service-mesh-focussed/index.js
+++ b/src/sections/Home/Service-mesh-focussed/index.js
@@ -28,7 +28,7 @@ const ServiceMeshFocused = ({ bookName }) => {
                 <StaticImage src={ServiceMeshFocusedImage} className="book" alt="The-Enterprise-Path-to-Service-Mesh-Architectures" />
               </Col>
               <Col xs={12} sm={6} lg={6}>
-                <img src={BlockQuoteImage} className="quote-icon filter-mode" alt="Quote from book" />
+                <img src={BlockQuoteImage} className="quote-icon filter-mode" alt="Quote from book" loading="lazy" />
                 <p className="quote">
               "Diverse microservices patterns and technologies, together with the requirements of given microservice applications, provide myriad opportunities for service mesh differentiation and specialization - including meshes native to specific cloud platforms. This will lead to a world where many           enterprises use multiple service mesh products, whether separately or together."
                 </p>
@@ -44,7 +44,7 @@ const ServiceMeshFocused = ({ bookName }) => {
                 <StaticImage src={ServiceMeshPatternsImage} className="book" alt="The-Enterprise-Path-to-Service-Mesh-Architectures" />
               </Col>
               <Col xs={12} sm={6} lg={6}>
-                <img src={BlockQuoteImage} className="quote-icon filter-mode" alt="Quote from book" />
+                <img src={BlockQuoteImage} className="quote-icon filter-mode" alt="Quote from book" loading="lazy" />
                 <p className="quote">
               "A service mesh is a layer in your infrastructure that facilitates communication between services… and so much more. Its value is enormous, and the value you derive from one is very much related to what role you play in the design, implementation, and operations of your cloud native applications and infrastructure."
                 </p>
diff --git a/src/sections/Landscape/ServiceMeshTimeline.js b/src/sections/Landscape/ServiceMeshTimeline.js
index b93cda0202e9..437d5a1dc57e 100644
--- a/src/sections/Landscape/ServiceMeshTimeline.js
+++ b/src/sections/Landscape/ServiceMeshTimeline.js
@@ -45,10 +45,10 @@ const ServiceMeshTimeline = () => {
       >
         {mesh.icon ?
           <div className={`meshtitle-img-${mesh.timeline_order % 2}`}>
-            <img src={isDark ? mesh?.darkIcon || mesh.icon : mesh.icon} alt={mesh.name} className={mesh.name === "Vulcand" ? "vulcan-img" : ""} />
+            <img src={isDark ? mesh?.darkIcon || mesh.icon : mesh.icon} alt={mesh.name} className={mesh.name === "Vulcand" ? "vulcan-img" : ""} loading="lazy" />
           </div>
           : <div className={`meshtitle-img-${mesh.timeline_order % 2}`}>
-            <img src={ServiceMeshIcon} alt={mesh.name} />
+            <img src={ServiceMeshIcon} alt={mesh.name} loading="lazy" />
           </div>
         }
         <h3 className={`vertical-timeline-element-title title-${mesh.timeline_order % 2}`}>{mesh.name}</h3>
diff --git a/src/sections/Landscape/index.js b/src/sections/Landscape/index.js
index ff2b56c9d360..cf48285b2f4c 100644
--- a/src/sections/Landscape/index.js
+++ b/src/sections/Landscape/index.js
@@ -119,21 +119,22 @@ const LandscapeGrid = () => {
               <div className="Legend">
                 <span>Legend:</span>
                 <div className="Landscape">
-                  <img alt="Full" src={passingMark} />
+                  <img alt="Full" src={passingMark} loading="lazy" />
                   Fully Compatible
                 </div>
                 <div>
-                  <img alt="Half" src={halfMark} />
+                  <img alt="Half" src={halfMark} loading="lazy" />
                   Partially Compatible
                 </div>
                 <div>
-                  <img alt="None" src={failingMark} />
+                  <img alt="None" src={failingMark} loading="lazy" />
                   Incompatible
                 </div>
               </div>
               <div className="AboutLandscape">
                 <img src={landscape}
                   alt="Service Mesh Landscape"
+                  loading="lazy"
                 />
                 <div>
                   <p>The Layer5 Service Mesh Landscape is a community-curated collection of service mesh projects.
diff --git a/src/sections/Learn/LearnPage-Sections/books.js b/src/sections/Learn/LearnPage-Sections/books.js
index c95e3414a899..caffd496a063 100644
--- a/src/sections/Learn/LearnPage-Sections/books.js
+++ b/src/sections/Learn/LearnPage-Sections/books.js
@@ -136,7 +136,7 @@ const BooksSection = () => {
             <div className="books-card" key={id}>
               <Link className="books-page_link" to={fields.slug} >
                 <div className="books-image">
-                  <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />
+                  <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} loading="lazy" />
                 </div>
                 <div className="books-details">
                   <h2>{frontmatter.title}</h2>
diff --git a/src/sections/Learn/LearnPage-Sections/learn.js b/src/sections/Learn/LearnPage-Sections/learn.js
index 8fe9d6268718..2b4141375302 100644
--- a/src/sections/Learn/LearnPage-Sections/learn.js
+++ b/src/sections/Learn/LearnPage-Sections/learn.js
@@ -180,7 +180,7 @@ const LearnSection = () => {
   return (
     <LearnSectionWrapper>
       <div className="learn-particle-img">
-        <img src={Meshery_Logo} alt="Meshery Logo"/>
+        <img src={Meshery_Logo} alt="Meshery Logo" loading="lazy" />
       </div>
       <div>
         <h1 className="learn-heading"><span>Meshery - </span> Learn how to manage Kubernetes</h1>
@@ -196,7 +196,7 @@ const LearnSection = () => {
                 <Button secondary title="Managing the performance of your microservices"/>
               </Link>
             </Col>
-            <img src={OReillyLogo} alt="OReilly Logo"/>
+            <img src={OReillyLogo} alt="OReilly Logo" loading="lazy" />
           </Row>
         </Container>
         <div className="learn-cards-section">
diff --git a/src/sections/Learn/LearnPage-Sections/workshops.js b/src/sections/Learn/LearnPage-Sections/workshops.js
index 976904dc233b..85f2ed4a1900 100644
--- a/src/sections/Learn/LearnPage-Sections/workshops.js
+++ b/src/sections/Learn/LearnPage-Sections/workshops.js
@@ -254,7 +254,7 @@ const WorkshopsSection = () => {
               <Col xs={12} sm={6} xl={4} className="workshops-card" key={index}>
                 <Link to={fields.slug} >
                   <div className="workshop-thumbnails">
-                    <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />
+                    <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} loading="lazy" />
                   </div>
                 </Link>
               </Col>
@@ -268,7 +268,7 @@ const WorkshopsSection = () => {
             feedbackData.map((data, index) => {
               return (
                 <Col key={index} className="feedbackCol">
-                  <img className="blockquoteImg" src={BlockQouteImage} alt="Quote-Image" />
+                  <img className="blockquoteImg" src={BlockQouteImage} alt="Quote-Image" loading="lazy" />
                   <p>{data.feedback}</p>
                   <h3>{data.workshop}</h3>
                   <h5>{data.studnt_name}</h5>
diff --git a/src/sections/Learn/Workshop-grid/index.js b/src/sections/Learn/Workshop-grid/index.js
index a668699c3c80..1c32065b120e 100644
--- a/src/sections/Learn/Workshop-grid/index.js
+++ b/src/sections/Learn/Workshop-grid/index.js
@@ -97,7 +97,7 @@ const WorkshopsPage = () => {
                       <div className="social-icons">
                         {frontmatter.slack && frontmatter.status === "delivered" && content && ID === id ?
                           <a href={frontmatter.slack} target = "_blank" rel="noreferrer" className="links">
-                            <img src={Slack} alt="Slack"/>
+                            <img src={Slack} alt="Slack" loading="lazy" />
                                                         Slack
                           </a> : ""}
                       </div>
@@ -117,7 +117,7 @@ const WorkshopsPage = () => {
               ))}
             </Row>
             <Row className="rqst-workshop">
-              <img src={WorkshopImage} alt="WorkshopImage" className="bottom-image" />
+              <img src={WorkshopImage} alt="WorkshopImage" className="bottom-image" loading="lazy" />
               <Button primary url="mailto:support@layer5.io" external={true}>
                                 Request A Workshop
               </Button>
diff --git a/src/sections/Learn/Workshop-single/index.js b/src/sections/Learn/Workshop-single/index.js
index 1898542a9232..e6467364a172 100644
--- a/src/sections/Learn/Workshop-single/index.js
+++ b/src/sections/Learn/Workshop-single/index.js
@@ -36,27 +36,27 @@ const WorkshopSinglePage = ({ frontmatter, body }) => {
           <div className="social-icons">
             {frontmatter.slack && frontmatter.status === "delivered" ?
               <a href={frontmatter.slack} target = "_blank" rel="noreferrer" className="links">
-                <img src={Slack} alt="Slack"/>
+                <img src={Slack} alt="Slack" loading="lazy" />
                                 Slack
               </a> : ""}
             {frontmatter.slides && frontmatter.status === "delivered" ?
               <a href={frontmatter.slides} target = "_blank" rel="noreferrer" className="links">
-                <img src={Slide} alt="Slide"/>
+                <img src={Slide} alt="Slide" loading="lazy" />
                                 Slides
               </a> : ""}
             {frontmatter.eurl && frontmatter.status === "delivered" ?
               <a href={frontmatter.eurl} target = "_blank" rel="noreferrer" className="links">
-                <img src={LinkIcon} alt="Link"/>
+                <img src={LinkIcon} alt="Link" loading="lazy" />
                                 Link
               </a> : ""}
             {frontmatter.labs && frontmatter.status === "delivered" ?
               <a href={frontmatter.labs} target = "_blank" rel="noreferrer" className="links">
-                <img src={Lab} alt="Lab"/>
+                <img src={Lab} alt="Lab" loading="lazy" />
                                 Labs
               </a> : ""}
             {frontmatter.video && frontmatter.status === "delivered" ?
               <a href={frontmatter.video} target = "_blank" rel="noreferrer" className="links">
-                <img src={Youtube} alt="Youtube video"/>
+                <img src={Youtube} alt="Youtube video" loading="lazy" />
                                 Video
               </a> : ""}
           </div>
diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
index 46ce4c2f1ba4..651137c46615 100644
--- a/src/sections/Meshery/Features-section/index.js
+++ b/src/sections/Meshery/Features-section/index.js
@@ -68,7 +68,7 @@ const FeaturesSection = () => {
             <Col xs={12} xl={8} className="smp-section-caraousel">
               <Slider {...settings}>
                 <div>
-                  <img src={Slide1} alt="Slide 1" />
+                  <img src={Slide1} alt="Slide 1" loading="lazy" />
                 </div>
                 <div>
                   <StaticImage src={slide2Path} alt="Slide 2" loading="lazy" />
diff --git a/src/sections/Meshery/How-meshery-works/feature/index.js b/src/sections/Meshery/How-meshery-works/feature/index.js
index 1318ed8dafeb..33dddaef743e 100644
--- a/src/sections/Meshery/How-meshery-works/feature/index.js
+++ b/src/sections/Meshery/How-meshery-works/feature/index.js
@@ -21,7 +21,7 @@ export default function Feature({
         <div className="icon">
           {React.isValidElement(icon)
             ? icon
-            : <img src={icon} alt="title"/>
+            : <img src={icon} alt="title" loading="lazy" />
           }
         </div>
         <div className="text">
diff --git a/src/sections/Meshery/How-meshery-works/specs/index.js b/src/sections/Meshery/How-meshery-works/specs/index.js
index ad23f749bfd8..6344b149e5c1 100644
--- a/src/sections/Meshery/How-meshery-works/specs/index.js
+++ b/src/sections/Meshery/How-meshery-works/specs/index.js
@@ -46,8 +46,8 @@ const HowMesheryWorksSpecs = () => {
           </Col>
         </Row> */}
         <div className="find-kubernetes">
-          <img className="green-bubble" src={GreenBubble} alt="bubble" />
-          <img className="yellow-bubble" src={YellowBubble} alt="bubble" />
+          <img className="green-bubble" src={GreenBubble} alt="bubble" loading="lazy" />
+          <img className="yellow-bubble" src={YellowBubble} alt="bubble" loading="lazy" />
           <div className="content">
             <h3>Assess the Performance and Manage your cloud native infrastructure</h3>
             <p>Ensuring optimal functionality and seamless operations is crucial for all infrastructure.</p>
diff --git a/src/sections/Meshery/Meshery-integrations/Card.js b/src/sections/Meshery/Meshery-integrations/Card.js
index c5531eca4000..f7e70af2e117 100644
--- a/src/sections/Meshery/Meshery-integrations/Card.js
+++ b/src/sections/Meshery/Meshery-integrations/Card.js
@@ -9,7 +9,7 @@ const Card = () => {
   return (
     <IntegrationCard>
       <div className="container">
-        <img src={MissingIntegration} alt="missing integration icon" />
+        <img src={MissingIntegration} alt="missing integration icon" loading="lazy" />
         <h2>Missing an Integration?</h2>
         <p>Meshery is an extensible  platform with many purpose-built extension points. Use Meshery’s REST API or its GraphQL API both of which allow you to connect to any Kubernetes-native app.</p>
         <Button
@@ -20,7 +20,7 @@ const Card = () => {
         />
       </div>
       <div className="container">
-        <img src={ListIntegration} alt="List your integration icon" />
+        <img src={ListIntegration} alt="List your integration icon" loading="lazy" />
         <h2>Want your app listed?</h2>
         <p>Learn more about submitting an integration and partnership opportunities.</p>
         <ContactFormModal callout_text="Contact Us" form_header="Send Us An Email" />
diff --git a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/ComponentsGrid.js b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/ComponentsGrid.js
index e1bf17205dbe..f95afba407d2 100644
--- a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/ComponentsGrid.js
+++ b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/ComponentsGrid.js
@@ -46,7 +46,7 @@ const ComponentsGrid = ({ frontmatter }) => {
         {validComponents.map((item) => (
           <div key={item.id} className="maincontainer">
             <div className="componentimg">
-              <img src={item.colorIcon.publicURL} alt={item.name} />
+              <img src={item.colorIcon.publicURL} alt={item.name} loading="lazy" />
             </div>
             <p className="items">{item.name.replaceAll("-", " ")}</p>
             {/* <div className="textcontent">
diff --git a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/cta-performance.js b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/cta-performance.js
index 3b08c8ed3abf..1b3015ec8a4e 100644
--- a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/cta-performance.js
+++ b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/cta-performance.js
@@ -77,7 +77,7 @@ const PerformanceCTA = ({ category }) => {
       <Container>
         <div className="CTAbody">
           <div>
-            <img className="logo" src={SMPLogo} />
+            <img className="logo" src={SMPLogo} loading="lazy" />
           </div>
           <div className="text">
             <h2><span>Cloud Native Performance</span></h2>
diff --git a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/howItWork.js b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/howItWork.js
index d217d6bf4adb..5fdd47301364 100644
--- a/src/sections/Meshery/Meshery-integrations/Individual-Integrations/howItWork.js
+++ b/src/sections/Meshery/Meshery-integrations/Individual-Integrations/howItWork.js
@@ -203,7 +203,7 @@ const HowIntegrationWorks = ({ name, howitworks, howitworksdetails, slides }) =>
     customPaging: (i) => {
       return (
         <a>
-          <img src={slides[i].publicURL} alt={`Slide ${i}`} />
+          <img src={slides[i].publicURL} alt={`Slide ${i}`} loading="lazy" />
         </a>
       );
     },
@@ -236,7 +236,7 @@ const HowIntegrationWorks = ({ name, howitworks, howitworksdetails, slides }) =>
               <Slider {...settings}>
                 {slides.map((slide, index) => (
                   <div key={index}>
-                    <img src={slide.publicURL} alt={`Slide ${index + 1}`} />
+                    <img src={slide.publicURL} alt={`Slide ${index + 1}`} loading="lazy" />
                   </div>
                 ))}
               </Slider>
diff --git a/src/sections/Meshery/Meshery-platforms/index.js b/src/sections/Meshery/Meshery-platforms/index.js
index b9c06b6320d6..f8099b755268 100644
--- a/src/sections/Meshery/Meshery-platforms/index.js
+++ b/src/sections/Meshery/Meshery-platforms/index.js
@@ -228,7 +228,7 @@ const MesheryPlatforms = () => {
                 className={currentPlatform.name && currentPlatform.name === supported_platforms[index].name
                   ? "single-platform single-platform-selected " : "single-platform "}
                 onClick={() => changeCurrentPlatform(index)}>
-                <img src={platform.icon} alt={platform.name} />
+                <img src={platform.icon} alt={platform.name} loading="lazy" />
               </Button>
             </Col>
           ))}
@@ -241,7 +241,7 @@ const MesheryPlatforms = () => {
         <Row Hcenter className="step-2">
           <Col>
             <h2><span>Step 2:</span> Manage your mesh</h2>
-            <img src={MesheryLogo} alt="Meshery" className="meshery-logo" />
+            <img src={MesheryLogo} alt="Meshery" className="meshery-logo" loading="lazy" />
           </Col>
         </Row>
       </div>
diff --git a/src/sections/Meshery/meshery-operator/index.js b/src/sections/Meshery/meshery-operator/index.js
index c3bdb516bd58..a8d301b67b6b 100644
--- a/src/sections/Meshery/meshery-operator/index.js
+++ b/src/sections/Meshery/meshery-operator/index.js
@@ -74,12 +74,12 @@ const MesheryOperatorPage = () => {
               >
                 <div>
                   <a href={Deployment}>
-                    <img className="logo" src={Deployment} />
+                    <img className="logo" src={Deployment} loading="lazy" />
                   </a>
                 </div>
                 <div>
                   <a href={Initialization}>
-                    <img className="logo" src={Initialization} />
+                    <img className="logo" src={Initialization} loading="lazy" />
                   </a>
                 </div>
               </Slider>
diff --git a/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-work.js b/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-work.js
index c32c501342d6..98cd41d66299 100644
--- a/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-work.js
+++ b/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-work.js
@@ -75,7 +75,7 @@ const CollaborationFeatureWork = () => {
   return (
     <CollaborationFeatureWrapper>
       <div className="world-image">
-        <img className={imageInView ? "visible" : ""} src={WorldImg} alt="" ref={locatorRef} />
+        <img className={imageInView ? "visible" : ""} src={WorldImg} alt="" ref={locatorRef} loading="lazy" />
         {/* <img className={imageInView ? "visible" : ""} src={World1} alt="" ref={locatorRef} />
         <img className={imageInView ? "visible" : ""} src={World2} alt="" ref={locatorRef} />
         <img className={imageInView ? "visible" : ""} src={World3} alt="" ref={locatorRef} />
diff --git a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
index 1cb1e20f7a42..8258f1dfccea 100644
--- a/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
+++ b/src/sections/Meshmap/Meshmap-design/Meshmap_Mobile_swiper/MeshmapMobileSwiper.js
@@ -49,7 +49,7 @@ const Card = ({ title, description, img, readMoreLink }) => {
     <div className="card">
       <h2>{title}</h2>
       <p>{description}</p>
-      <img style={{ border: "1px solid #444444", borderRadius: "10px" }} src={img} alt="" />
+      <img style={{ border: "1px solid #444444", borderRadius: "10px" }} src={img} alt="" loading="lazy" />
       {/* <a href={readMoreLink}>Read More</a> */}
     </div>
   );
diff --git a/src/sections/Meshmap/Meshmap-design/meshmap-design-features-carousel.js b/src/sections/Meshmap/Meshmap-design/meshmap-design-features-carousel.js
index c075bf55952a..abfb24aef553 100644
--- a/src/sections/Meshmap/Meshmap-design/meshmap-design-features-carousel.js
+++ b/src/sections/Meshmap/Meshmap-design/meshmap-design-features-carousel.js
@@ -156,6 +156,7 @@ export default function MeshmapDesignFeatureCarousel() {
                 // // height="90%"
                 style={{ border: "1px solid #444444", marginTop: "8px", borderRadius: "20px" }}
                 src={content.img}
+                loading="lazy"
               />
             </div>
           </PopOutCard>
diff --git a/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js b/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
index 9048f5507915..f4dc6dc9b62b 100644
--- a/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
+++ b/src/sections/Meshmap/Meshmap-design/meshmap-design-integrations.js
@@ -131,7 +131,7 @@ const MeshmapIntegrationsSection = () => {
           </h1>
         </div>
         <div>
-          <img className="underline-img" src={UnderlineImg} />
+          <img className="underline-img" src={UnderlineImg} loading="lazy" />
         </div>
         <div>
           <h4>
diff --git a/src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-features.js b/src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-features.js
index 246c194eeb16..da09327daef7 100644
--- a/src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-features.js
+++ b/src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-features.js
@@ -145,8 +145,8 @@ const MeshmapVisualizerFeatures = () => {
           <Col sm={12} md={6} lg={4}>
             <div className={(isHovered && hoveredFeature != "Feature1") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(1)} onMouseOut={handleMouseOut}>
               <div className="feature-image">
-                <img src={ApplicationImportBoxes} alt="Application Import" style={{ position: "absolute" }} />
-                <img src={ApplicationImportArrows} alt="" className={hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image"} />
+                <img src={ApplicationImportBoxes} alt="Application Import" style={{ position: "absolute" }} loading="lazy" />
+                <img src={ApplicationImportArrows} alt="" className={hoveredFeature == "Feature1" ? "secondary-image-visible" : "secondary-image"} loading="lazy" />
               </div>
               <h3>Application Import</h3>
               <p>Import your existing Kubernetes, Helm, or Docker Compose applications.</p>
@@ -155,8 +155,8 @@ const MeshmapVisualizerFeatures = () => {
           <Col sm={12} md={6} lg={4}>
             <div className={(isHovered && hoveredFeature != "Feature2") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(2)} onMouseOut={handleMouseOut}>
               <div className="feature-image">
-                <img src={PerformanceMetrics} alt="Performance Metrics" style={{ position: "absolute" }} />
-                <img src={PerformanceMetricsGraph} alt="" className={hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image"} />
+                <img src={PerformanceMetrics} alt="Performance Metrics" style={{ position: "absolute" }} loading="lazy" />
+                <img src={PerformanceMetricsGraph} alt="" className={hoveredFeature == "Feature2" ? "secondary-image-visible" : "secondary-image"} loading="lazy" />
               </div>
               <h3>Real-time performance metrics</h3>
               <p>Monitor your clusters performing in action, set alerts and work with object-specific metrics.</p>
@@ -165,8 +165,8 @@ const MeshmapVisualizerFeatures = () => {
           <Col sm={12} md={6} lg={4}>
             <div className={(isHovered && hoveredFeature != "Feature3") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(3)} onMouseOut={handleMouseOut}>
               <div className="feature-image">
-                <img src={InteractiveTerminal} alt="Interactive Terminal" style={{ position: "absolute", width: "80%", zIndex: "0" }} />
-                <img src={InteractiveTerminalCode} alt="" className={hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image"} style={{ position: "relative", width: "80%", zIndex: "10" }} />
+                <img src={InteractiveTerminal} alt="Interactive Terminal" style={{ position: "absolute", width: "80%", zIndex: "0" }} loading="lazy" />
+                <img src={InteractiveTerminalCode} alt="" className={hoveredFeature == "Feature3" ? "secondary-image-visible" : "secondary-image"} style={{ position: "relative", width: "80%", zIndex: "10" }} loading="lazy" />
               </div>
               <h3>Interactive Terminal</h3>
               <p>Establish sessions with one or more pods at a time.</p>
@@ -175,8 +175,8 @@ const MeshmapVisualizerFeatures = () => {
           <Col sm={12} md={6} lg={4}>
             <div className={(isHovered && hoveredFeature != "Feature4") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(4)} onMouseOut={handleMouseOut}>
               <div className="feature-image">
-                <img src={TimelineDVRClock} alt="Timeline" style={{ position: "absolute", width: "80%" }} />
-                <img src={TimelineDVR} alt="" className={hoveredFeature == "Feature4" ? "secondary-image-visible" : "secondary-image"} style={{ width: "80%" }} />
+                <img src={TimelineDVRClock} alt="Timeline" style={{ position: "absolute", width: "80%" }} loading="lazy" />
+                <img src={TimelineDVR} alt="" className={hoveredFeature == "Feature4" ? "secondary-image-visible" : "secondary-image"} style={{ width: "80%" }} loading="lazy" />
               </div>
               <h3>Timeline (DVR)</h3>
               <p>Playback service transactions. Scrub over the history of changes to your deployments.</p>
@@ -185,7 +185,7 @@ const MeshmapVisualizerFeatures = () => {
           <Col sm={12} md={6} lg={4}>
             <div className={(isHovered && hoveredFeature != "Feature5") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(5)} onMouseOut={handleMouseOut}>
               <div className="feature-image">
-                <img src={isDark ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} />
+                <img src={isDark ? ServicePerformanceGearDark : ServicePerformanceGearLight} alt="Service Performance" style={{ position: "absolute", zIndex: "0" }} loading="lazy" />
                 <ServicePerformanceMeter alt="" className={hoveredFeature == "Feature5" ? "meter-visible" : "secondary-image"}
                   style={{ height: "auto", width: "70%",position: "relative", zIndex: "10", transformOrigin: "center center" }}
                 />
@@ -197,8 +197,8 @@ const MeshmapVisualizerFeatures = () => {
           <Col sm={12} md={6} lg={4}>
             <div className={(isHovered && hoveredFeature != "Feature6") ? "project__block__inner darken" : "project__block__inner"} onMouseOver={() => handleMouseOver(6)} onMouseOut={handleMouseOut}>
               <div className="feature-image">
-                <img src={LogStream} alt="Log Stream" style={{ position: "absolute" }} />
-                <img src={LogStreamSearch} alt="" className={hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image"} />
+                <img src={LogStream} alt="Log Stream" style={{ position: "absolute" }} loading="lazy" />
+                <img src={LogStreamSearch} alt="" className={hoveredFeature == "Feature6" ? "secondary-image-visible" : "secondary-image"} loading="lazy" />
               </div>
               <h3>Log Stream</h3>
               <p>Stream and filter through the logs using keywords for multiple Kubernetes Pods simultaneously.</p>
diff --git a/src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-views.js b/src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-views.js
index 0c0671f7f8e1..b6504557370f 100644
--- a/src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-views.js
+++ b/src/sections/Meshmap/Meshmap-visualize/meshmap-visualize-views.js
@@ -126,7 +126,7 @@ const MeshmapVisualizerViews = () => {
       <div className="views-section">
         <div className="hero-image" ref={imageRef}>
           <VisualizerViews className={imageInView ? "visible" : "not-visible"} alt="" style={{ position: "absolute", top: "0%" }}/>
-          <img className={imageInView ? "lines-visible" : "not-visible"} src={VisualizerViewsLines} alt="" />
+          <img className={imageInView ? "lines-visible" : "not-visible"} src={VisualizerViewsLines} alt="" loading="lazy" />
         </div>
         <div className="hero-text">
           <h1><span>Discover more with intuitive zoom levels</span></h1>
diff --git a/src/sections/Meshmap/index.js b/src/sections/Meshmap/index.js
index 60b3e1219f9f..36a4900622bc 100644
--- a/src/sections/Meshmap/index.js
+++ b/src/sections/Meshmap/index.js
@@ -57,6 +57,7 @@ const Meshmap = (props) => {
                       src={designerImage}
                       alt="Designer Mode"
                       className="designer-img modes-image"
+                      loading="lazy"
                     />
                   ),
                 },
@@ -69,6 +70,7 @@ const Meshmap = (props) => {
                       src={visualizerImage}
                       alt="Visualizer Mode"
                       className="modes-image"
+                      loading="lazy"
                     />
                   ),
                 },
@@ -147,7 +149,7 @@ const Meshmap = (props) => {
                   description: "Designer and Visualizer live side-by-side, so all design work, from ideation to operation, can be found in one place.",
                   imgContent: (
                     <>
-                      <img id="avatar-1" src={Avatar1} alt="" />
+                      <img id="avatar-1" src={Avatar1} alt="" loading="lazy" />
                       <Collab1 id="collaborate-image1" alt="collaborate-image1" />
                     </>
                   )
@@ -162,7 +164,7 @@ const Meshmap = (props) => {
                   description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you’re working in the office or remotely.",
                   imgContent: (
                     <>
-                      <img id="avatar-2" src={Avatar2} alt="avatar-2" />
+                      <img id="avatar-2" src={Avatar2} alt="avatar-2" loading="lazy" />
                       <Collab2 id="collaborate-image2" alt="collaborate-image2" />
                     </>
                   )
@@ -172,7 +174,7 @@ const Meshmap = (props) => {
                   description: "Build an iterative design flow with live collaboration that keeps you in the loop whether you’re working in the office or remotely.",
                   imgContent: (
                     <>
-                      <img id="avatar-3" src={Avatar3} alt="avatar-3" />
+                      <img id="avatar-3" src={Avatar3} alt="avatar-3" loading="lazy" />
                       <Collab3 id="collaborate-image3" alt="collaborate-image3" />
                     </>
                   )
@@ -186,7 +188,7 @@ const Meshmap = (props) => {
                   description: "MeshMap is an end-to-end management platform, here to help teams understand problems, explore options, and build solutions—together.",
                   imgContent: (
                     <>
-                      <img id="avatar-3" src={Avatar3} alt="avatar-3" />
+                      <img id="avatar-3" src={Avatar3} alt="avatar-3" loading="lazy" />
                       <Collab4 id="collaborate-image4" alt="collaborate-image4" />
                     </>
                   )
diff --git a/src/sections/Meshmap/meshmap-catalog.js b/src/sections/Meshmap/meshmap-catalog.js
index dbc17ec04a6a..f4b39ac6f52f 100644
--- a/src/sections/Meshmap/meshmap-catalog.js
+++ b/src/sections/Meshmap/meshmap-catalog.js
@@ -443,19 +443,19 @@ const Catalog = () => {
           {/* Right Section */}
           <section className="services svg-cont">
             <div>
-              <img src={Patterns} />
+              <img src={Patterns} loading="lazy" />
               <p>Cloud Native Patterns</p>
             </div>
             <div>
-              <img src={Ebpf} />
+              <img src={Ebpf} loading="lazy" />
               <p className="ebpf-text">eBPF Programs</p>
             </div>
             <div>
-              <img src={Wasm} />
+              <img src={Wasm} loading="lazy" />
               <p>WASM Filters</p>
             </div>
             <div>
-              <img src={Opa} />
+              <img src={Opa} loading="lazy" />
               <p>OPA Policies</p>
             </div>
           </section>
@@ -467,49 +467,49 @@ const Catalog = () => {
             <div className="container">
               <div id="carousel">
                 <div className="slide one">
-                  <img src={Mutual_tls} />
+                  <img src={Mutual_tls} loading="lazy" />
                 </div>
                 <div className="slide two">
-                  <img src={Retries} />
+                  <img src={Retries} loading="lazy" />
                 </div>
                 <div className="slide three">
-                  <img src={Traces} />
+                  <img src={Traces} loading="lazy" />
                 </div>
                 <div className="slide four">
-                  <img src={Denial} />
+                  <img src={Denial} loading="lazy" />
                 </div>
                 <div className="slide five">
-                  <img src={Correlate_event} />
+                  <img src={Correlate_event} loading="lazy" />
                 </div>
                 <div className="slide six">
-                  <img src={Only_wagent} />
+                  <img src={Only_wagent} loading="lazy" />
                 </div>
                 <div className="slide seven">
-                  <img src={Node_agent} />
+                  <img src={Node_agent} loading="lazy" />
                 </div>
                 <div className="slide eight">
-                  <img src={Single_tenant} />
+                  <img src={Single_tenant} loading="lazy" />
                 </div>
                 <div className="slide nine">
-                  <img src={Pre_provison} />
+                  <img src={Pre_provison} loading="lazy" />
                 </div>
                 <div className="slide ten">
-                  <img src={Circuit_breaker} />
+                  <img src={Circuit_breaker} loading="lazy" />
                 </div>
                 <div className="slide eleven">
-                  <img src={Retry_deadline} />
+                  <img src={Retry_deadline} loading="lazy" />
                 </div>
                 <div className="slide twelve">
-                  <img src={Singleton} />
+                  <img src={Singleton} loading="lazy" />
                 </div>
                 <div className="slide thirteen">
-                  <img src={Jwt_transformer} />
+                  <img src={Jwt_transformer} loading="lazy" />
                 </div>
                 <div className="slide fourteen">
-                  <img src={Multicluster} />
+                  <img src={Multicluster} loading="lazy" />
                 </div>
                 <div className="slide fifteen">
-                  <img src={Http_metrics} />
+                  <img src={Http_metrics} loading="lazy" />
                 </div>
               </div>
             </div>
diff --git a/src/sections/Meshmap/meshmap-modes.js b/src/sections/Meshmap/meshmap-modes.js
index 247ed3214421..c0210b456e38 100644
--- a/src/sections/Meshmap/meshmap-modes.js
+++ b/src/sections/Meshmap/meshmap-modes.js
@@ -261,7 +261,7 @@ const MeshmapModes = () => {
           </div>
           <div className="content">
             <h1>Discover and model your cloud native deployments</h1>
-            <img src={designerImage} alt="MeshMap Designer" onClick={() => setDesignerEnlarged(!designerEnlarged)} className={`designer-img ${designerEnlarged ? "big" : "small"}`} />
+            <img src={designerImage} alt="MeshMap Designer" onClick={() => setDesignerEnlarged(!designerEnlarged)} className={`designer-img ${designerEnlarged ? "big" : "small"}`} loading="lazy" />
             <p>
               Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components. Using GitOps? Integrate advanced performance analysis into your pipeline.
             </p>
@@ -274,7 +274,7 @@ const MeshmapModes = () => {
           </div>
           <div className="content">
             <h1>Apply patterns and manage many Kubernetes clusters</h1>
-            <img src={visualizerImage} alt="MeshMap Visualizer" onClick={() => setVizEnlarged(!vizEnlarged)} className={vizEnlarged ? "big" : "small"} />
+            <img src={visualizerImage} alt="MeshMap Visualizer" onClick={() => setVizEnlarged(!vizEnlarged)} className={vizEnlarged ? "big" : "small"} loading="lazy" />
             <p>
               Deploy designs, apply patterns, manage and operate your deployments in real-time. Bring all your Kubernetes clusters under a common point of management. Interactively connect to terminal sessions or initiate and search log streams from your containers.
             </p>
diff --git a/src/sections/Meshmap/meshmap-platform.js b/src/sections/Meshmap/meshmap-platform.js
index 29176ff9cfbd..83081ef81201 100644
--- a/src/sections/Meshmap/meshmap-platform.js
+++ b/src/sections/Meshmap/meshmap-platform.js
@@ -131,6 +131,7 @@ const Platform = () => {
                   src={SelfHosted}
                   alt="MeshMap Self-hosted"
                   className="modes-image"
+                  loading="lazy"
                 />
               ),
             },
@@ -143,6 +144,7 @@ const Platform = () => {
                   src={CloudHosted}
                   alt="MeshMap Cloud"
                   className="modes-image"
+                  loading="lazy"
                 />
               ),
             },
@@ -153,14 +155,14 @@ const Platform = () => {
       <div className="blocks">
         <div className="block block--left">
           <h1>Self-Hosted</h1>
-          <img src={SelfHosted} alt="MeshMap Self-hosted" />
+          <img src={SelfHosted} alt="MeshMap Self-hosted" loading="lazy" />
           <p>
             Keep your MeshMap designs internal to your workplace. Get remote support from Layer5 when you need it.
           </p>
         </div>
         <div className="block block--right">
           <h1>Cloud</h1>
-          <img src={CloudHosted} alt="MeshMap Cloud" />
+          <img src={CloudHosted} alt="MeshMap Cloud" loading="lazy" />
           <p>
             Connect to Layer5 Cloud and have your MeshMap designs versioned and available for team sharing and real-time collaboration.
           </p>
diff --git a/src/sections/Meshmap/signup-form.js b/src/sections/Meshmap/signup-form.js
index 081d79737872..d63ce1a0b493 100644
--- a/src/sections/Meshmap/signup-form.js
+++ b/src/sections/Meshmap/signup-form.js
@@ -52,7 +52,8 @@ const SignupForm = ({ targetRef }) => {
                   src="https://www.youtube.com/embed/034nVaQUyME?si=Xip0JqrwiG2QY5vp"
                   allow="autoplay"
                   style={{ border: "0" }}
-                  allowfullscreen
+                  allowFullScreen
+                  loading="lazy"
                 />
               </div>
             </Col>
diff --git a/src/sections/Partners/index.js b/src/sections/Partners/index.js
index e4be9cb38134..289476c4be5f 100644
--- a/src/sections/Partners/index.js
+++ b/src/sections/Partners/index.js
@@ -60,7 +60,7 @@ const Partner = () => {
                 <Col xs={5} sm={3} lg={3} className="custom-col mob-col">
                   <div className="img1">
                     <a href={partner.imageRoute} target="_blank" rel="noopener noreferrer">
-                      <img src={partner.imageLink} title="Click to know More about our partner" alt={partner.name} />
+                      <img src={partner.imageLink} title="Click to know More about our partner" alt={partner.name} loading="lazy" />
                     </a>
                   </div>
                 </Col>
@@ -111,7 +111,7 @@ const Partner = () => {
                     <a href={partner.imageRoute} target="_blank" rel="noopener noreferrer">
                       { isValidElement(partner.imageLink)
                         ? partner.imageLink
-                        :  <img src={partner.imageLink} title="Click to know More about our partner" alt={partner.name} />
+                        :  <img src={partner.imageLink} title="Click to know More about our partner" alt={partner.name} loading="lazy" />
                       }
 
                     </a>
diff --git a/src/sections/Playground/playground-features.js b/src/sections/Playground/playground-features.js
index f4b83a2bdb60..5652e29d89e7 100644
--- a/src/sections/Playground/playground-features.js
+++ b/src/sections/Playground/playground-features.js
@@ -92,7 +92,7 @@ const PlaygroundFeatures = () => {
           </Button>
         </div>
         <div className="feature-image" style={{ scale: "1" }}>
-          <img src={whiteboard_svg} />
+          <img src={whiteboard_svg} loading="lazy" />
         </div>
       </div>
 
@@ -105,7 +105,7 @@ const PlaygroundFeatures = () => {
           </Button>
         </div>
         <div className="feature-image" style={{ scale: "1" }}>
-          <img src={comments_svg} />
+          <img src={comments_svg} loading="lazy" />
         </div>
       </div>
 
diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js
index 3d4e735ea0d6..dc52b51a9e72 100644
--- a/src/sections/Pricing/comparison.js
+++ b/src/sections/Pricing/comparison.js
@@ -182,7 +182,7 @@ const Comparison = () => {
                 <>
                   <tr key={x.id} >
                     <td className="categories" >
-                      <img src={x.icon} height={45} className="category-icon" alt={x.category} />
+                      <img src={x.icon} height={45} className="category-icon" alt={x.category} loading="lazy" />
                       <h3 className="category">{x.category}</h3></td>
                     <td></td>
                     <td></td>
diff --git a/src/sections/Products/index.js b/src/sections/Products/index.js
index fd98430b29bf..4f0bb05597f7 100644
--- a/src/sections/Products/index.js
+++ b/src/sections/Products/index.js
@@ -116,7 +116,7 @@ const options = [
     featured: false,
     monthlyprice: 15.99,
     yearlyprice: 180,
-    pricing_coming_soon: <img src={comingSoon}></img>,
+    pricing_coming_soon: <img src={comingSoon} loading="lazy"></img>,
     byline: "Everything in Team, plus:",
     button: ["Coming Soon", ""],
     summary: [
@@ -231,12 +231,12 @@ const index = () => {
                 <>
                   <div className="card" key={card.id}>
                     <div className="card_head">
-                      <img src={card.logo} alt="" className="logo" />
+                      <img src={card.logo} alt="" className="logo" loading="lazy" />
                       <div className="title">{card.title}</div>
                       <div className="iconss">
                         {/* <div> */}
                         {card.icon.map((curr_icon) => (
-                          <img src={curr_icon} alt="" key={curr_icon} />
+                          <img src={curr_icon} alt="" key={curr_icon} loading="lazy" />
                         ))}
                         {/* </div> */}
                       </div>
@@ -257,8 +257,8 @@ const index = () => {
             </div>
           </div>
           <div className="freeTry">
-            <img className="bgSvgLeft" src={isDark ? darkbgSvg : lightbgSvg} alt="" />
-            <img className="bgSvgRight" src={isDark ? darkbgSvg : lightbgSvg} alt="" />
+            <img className="bgSvgLeft" src={isDark ? darkbgSvg : lightbgSvg} alt="" loading="lazy" />
+            <img className="bgSvgRight" src={isDark ? darkbgSvg : lightbgSvg} alt="" loading="lazy" />
             <div className="headers rotate gap">
               <h1 className="header-heading">
                 Unlock Your <span>Potential </span> with Free Tier Account!
diff --git a/src/sections/Projects/Image-Hub/index.js b/src/sections/Projects/Image-Hub/index.js
index a0adb10d1fe7..32fdc49e2f12 100644
--- a/src/sections/Projects/Image-Hub/index.js
+++ b/src/sections/Projects/Image-Hub/index.js
@@ -54,12 +54,12 @@ const ImageHubPage = () => {
             >
               <div>
                 <a href={imagehubslider1}>
-                  <img src={imagehubslider1} alt="Consul Service Mesh Architecture" />
+                  <img src={imagehubslider1} alt="Consul Service Mesh Architecture" loading="lazy" />
                 </a>
               </div>
               <div>
                 <a href={imagehubslider2}>
-                  <img src={imagehubslider2} alt="Image Hub on Consul with WASM and Meshery" />
+                  <img src={imagehubslider2} alt="Image Hub on Consul with WASM and Meshery" loading="lazy" />
                 </a>
               </div>
             </Slider>
diff --git a/src/sections/Projects/Nighthawk/index.js b/src/sections/Projects/Nighthawk/index.js
index 2dde5ab179b3..9a30cbc4fa47 100644
--- a/src/sections/Projects/Nighthawk/index.js
+++ b/src/sections/Projects/Nighthawk/index.js
@@ -119,7 +119,7 @@ const Projects = () => {
                 </div>
                 <div className="card">
                   <div className="circle">
-                    <img src={cloud} alt="cloud image" />
+                    <img src={cloud} alt="cloud image" loading="lazy" />
                   </div>
                   <h2>Nighthawk Distribution</h2>
                   <p>Stable builds available for:</p>
@@ -138,7 +138,7 @@ const Projects = () => {
                 </div>
                 <div className="card">
                   <div className="circle">
-                    <img src={cpu} alt="cpu image" />
+                    <img src={cpu} alt="cpu image" loading="lazy" />
                   </div>
                   <h2>SCHEDULING AND ANALYSIS</h2>
                   <p>Nighthawk integrates with <Link to="/meshery">Meshery</Link> and provides you with the ability to schedule performance tests or insert them into your CI pipeline.</p>
@@ -153,7 +153,7 @@ const Projects = () => {
           <Row>
             <Col lg={6} md={6} sm={12}>
               <div className="text">
-                <img src={distributedPerf} className="distributedPerf" alt="Cloud Native Distributed Performance Management" />
+                <img src={distributedPerf} className="distributedPerf" alt="Cloud Native Distributed Performance Management" loading="lazy" />
                 <h2>Standards-based, distributed performance management</h2>
                 <p>Nighthawk will provide generally-available distributions of Nighthawk under different architectures and platforms and easy-to-use tooling for installation and operation. This will include creating distributions of Nighthawk as well as augmenting existing tooling, Meshery, to retrieve these arch-specific packages and update their deployments.</p>
               </div>
@@ -210,7 +210,7 @@ const Projects = () => {
         </div>
       </Container>
       <div className="callout">
-        <img src={cncf} alt="cncf logo" />
+        <img src={cncf} alt="cncf logo" loading="lazy" />
         <p> Participate in the state of the art. <br />
           Join us in the Cloud Native Computing Foundation's Service Mesh Working Group.</p>
         <Button primary title="Join Us" url="/community/calendar#meetings" />
diff --git a/src/sections/Projects/SMI/index.js b/src/sections/Projects/SMI/index.js
index 169d3f177416..3b67ad75f4f4 100644
--- a/src/sections/Projects/SMI/index.js
+++ b/src/sections/Projects/SMI/index.js
@@ -55,7 +55,7 @@ const SMIPage = () => {
                       {feature.services.map((service, index) => (
                         <table className="table" key={index}>
                           <tr>
-                            <td className="icon"><img src={c_icon} /></td>
+                            <td className="icon"><img src={c_icon} loading="lazy" /></td>
                             <td><p>{service.content}</p></td>
                           </tr>
                         </table>
@@ -99,6 +99,7 @@ const SMIPage = () => {
           <div className="smiResults">
             <img src={smiLogo}
               alt="Service Mesh Landscape"
+              loading="lazy"
             />
             <div>
               <p>
diff --git a/src/sections/Projects/SMP/index.js b/src/sections/Projects/SMP/index.js
index ac272f4032c6..f2cd1f89975c 100644
--- a/src/sections/Projects/SMP/index.js
+++ b/src/sections/Projects/SMP/index.js
@@ -69,7 +69,7 @@ const SMPPage = () => {
             <h3>SMP is a collaborative effort of Layer5, UT Austin, Intel, Red Hat, HashiCorp, Google and The Linux Foundation.</h3>
             <Row>
               <Col lg={6}>
-                <img src={example} className="smp-example" alt="example: smp in action"></img>
+                <img src={example} className="smp-example" alt="example: smp in action" loading="lazy"></img>
               </Col>
               <Col className="features" lg={6}>
                 <h1> SMP accounts for details of:</h1>
diff --git a/src/sections/Projects/Sistent/components/modal/index.js b/src/sections/Projects/Sistent/components/modal/index.js
index b62eccfcc11b..7cb49c4e7097 100644
--- a/src/sections/Projects/Sistent/components/modal/index.js
+++ b/src/sections/Projects/Sistent/components/modal/index.js
@@ -92,6 +92,7 @@ export const SistentModal = () => {
                 width="100%"
                 src={isDark ? ConfirmationDarkBg : ConfirmationBg}
                 alt="confirmation"
+                loading="lazy"
               />
             </Col>
           </Row>
diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js
index 070d0eab6e2a..972e5e079e2b 100644
--- a/src/sections/Projects/Sistent/identity/color/code.js
+++ b/src/sections/Projects/Sistent/identity/color/code.js
@@ -95,6 +95,7 @@ const ColorCode = () => {
                 width="100%"
                 src={isDark ? BrandColorsDark : BrandColors}
                 alt="Brand colors"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -105,6 +106,7 @@ const ColorCode = () => {
                 width="100%"
                 src={isDark ? GreyscaleColorsDark : GreyscaleColors}
                 alt="Greyscale colors"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -115,6 +117,7 @@ const ColorCode = () => {
                 width="100%"
                 src={isDark ? FunctionColorsDark : FunctionColors}
                 alt="Function colors"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -133,6 +136,7 @@ const ColorCode = () => {
                 width="100%"
                 src={isDark ? BgColorsDark : BgColors}
                 alt="Background colors"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -143,6 +147,7 @@ const ColorCode = () => {
                 width="100%"
                 src={isDark ? TextColorsDark : TextColors}
                 alt="Text colors"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -153,6 +158,7 @@ const ColorCode = () => {
                 width="100%"
                 src={isDark ? BorderColorsDark : BorderColors}
                 alt="Border colors"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -167,6 +173,7 @@ const ColorCode = () => {
                 width="100%"
                 src={isDark ? ComponentColorsDark : ComponentColors}
                 alt="Border colors"
+                loading="lazy"
               />
             </Col>
           </Row>
diff --git a/src/sections/Projects/Sistent/identity/color/guidance.js b/src/sections/Projects/Sistent/identity/color/guidance.js
index cf45bfa217bb..d702ece76c5e 100644
--- a/src/sections/Projects/Sistent/identity/color/guidance.js
+++ b/src/sections/Projects/Sistent/identity/color/guidance.js
@@ -96,6 +96,7 @@ const ColorGuidance = () => {
               <img
                 src={isDark ? TonalPalettesDark : TonalPalettes}
                 alt="Tonal Palettes"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -163,7 +164,7 @@ const ColorGuidance = () => {
           </p>
           <Row className="image-container" Hcenter>
             <Col md={8} lg={8} sm={12}>
-              <img src={ContextVisuals5} alt="Context Visuals" />
+              <img src={ContextVisuals5} alt="Context Visuals" loading="lazy" />
             </Col>
           </Row>
           <h3>The Role of Color Tokens</h3>
@@ -211,6 +212,7 @@ const ColorGuidance = () => {
                 width="100%"
                 src={isDark ? ContextVisuals6Dark : ContextVisuals6}
                 alt="Context Visuals"
+                loading="lazy"
               />
             </Col>
           </Row>
diff --git a/src/sections/Projects/Sistent/identity/color/index.js b/src/sections/Projects/Sistent/identity/color/index.js
index b226e78bd53c..6a74f65cfc42 100644
--- a/src/sections/Projects/Sistent/identity/color/index.js
+++ b/src/sections/Projects/Sistent/identity/color/index.js
@@ -144,6 +144,7 @@ const SistentIdentityColor = () => {
               <img
                 src={isDark ? TonalPalleteDark : TonalPallete}
                 alt="Tonal Palette"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -177,7 +178,7 @@ const SistentIdentityColor = () => {
           </p>
           <Row Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
-              <img src={ContextVisuals1} alt="Context Visuals" />
+              <img src={ContextVisuals1} alt="Context Visuals" loading="lazy" />
             </Col>
           </Row>
           <p>
@@ -201,7 +202,7 @@ const SistentIdentityColor = () => {
           </ul>
           <Row Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
-              <img src={ContextVisuals2} alt="Context Visuals" />
+              <img src={ContextVisuals2} alt="Context Visuals" loading="lazy" />
             </Col>
           </Row>
           <a id="Green Color Accessbility">
@@ -229,7 +230,7 @@ const SistentIdentityColor = () => {
           </p>
           <Row Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
-              <img src={ContextVisuals3} alt="Context Visuals" />
+              <img src={ContextVisuals3} alt="Context Visuals" loading="lazy" />
             </Col>
           </Row>
           <h3>Dark Theme</h3>
@@ -240,7 +241,7 @@ const SistentIdentityColor = () => {
           </p>
           <Row Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
-              <img src={ContextVisuals4} alt="Context Visuals" />
+              <img src={ContextVisuals4} alt="Context Visuals" loading="lazy" />
             </Col>
           </Row>
           <p>
diff --git a/src/sections/Projects/Sistent/identity/spacing/guidance.js b/src/sections/Projects/Sistent/identity/spacing/guidance.js
index 773d2b7008b8..6071bb3c2f79 100644
--- a/src/sections/Projects/Sistent/identity/spacing/guidance.js
+++ b/src/sections/Projects/Sistent/identity/spacing/guidance.js
@@ -104,6 +104,7 @@ export const SpacingGuidance = () => {
               <img
                 src={isDark ? SpaceTokenTable2Dark : SpaceTokenTable2}
                 alt="Space Token Table"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -128,6 +129,7 @@ export const SpacingGuidance = () => {
               <img
                 src={isDark ? SpaceTokenTable3Dark : SpaceTokenTable3}
                 alt="Space Token Table"
+                loading="lazy"
               />
             </Col>
           </Row>
diff --git a/src/sections/Projects/Sistent/identity/spacing/index.js b/src/sections/Projects/Sistent/identity/spacing/index.js
index 29aad9b33bbf..b9ebea83bec5 100644
--- a/src/sections/Projects/Sistent/identity/spacing/index.js
+++ b/src/sections/Projects/Sistent/identity/spacing/index.js
@@ -125,6 +125,7 @@ const SistentIdentitySpacing = () => {
               <img
                 src={isDark ? SpaceTokenTable1Dark : SpaceTokenTable1}
                 alt="Space Token Table"
+                loading="lazy"
               />
             </Col>
           </Row>
diff --git a/src/sections/Projects/Sistent/identity/typography/code.js b/src/sections/Projects/Sistent/identity/typography/code.js
index 159daa3eeca8..1692fab161b1 100644
--- a/src/sections/Projects/Sistent/identity/typography/code.js
+++ b/src/sections/Projects/Sistent/identity/typography/code.js
@@ -86,6 +86,7 @@ const TypographyCode = () => {
               <img
                 src={isDark ? TypeTable1Dark : TypeTable1}
                 alt="Type Table"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -102,6 +103,7 @@ const TypographyCode = () => {
               <img
                 src={isDark ? TypeTable2Dark : TypeTable2}
                 alt="Type Table"
+                loading="lazy"
               />
             </Col>
           </Row>
diff --git a/src/sections/Projects/Sistent/identity/typography/guidance.js b/src/sections/Projects/Sistent/identity/typography/guidance.js
index 931e8b392f3c..e2061c5bef3c 100644
--- a/src/sections/Projects/Sistent/identity/typography/guidance.js
+++ b/src/sections/Projects/Sistent/identity/typography/guidance.js
@@ -91,6 +91,7 @@ const TypographyGuidance = () => {
               <img
                 src={isDark ? TypeScale2Dark : TypeScale2}
                 alt="Type Scale"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -105,6 +106,7 @@ const TypographyGuidance = () => {
               <img
                 src={isDark ? TypeScale3Dark : TypeScale3}
                 alt="Type Scale"
+                loading="lazy"
               />
             </Col>
           </Row>
diff --git a/src/sections/Projects/Sistent/identity/typography/index.js b/src/sections/Projects/Sistent/identity/typography/index.js
index fe8fcec67acd..c88a4ba10ad3 100644
--- a/src/sections/Projects/Sistent/identity/typography/index.js
+++ b/src/sections/Projects/Sistent/identity/typography/index.js
@@ -132,6 +132,7 @@ const SistentTypography = () => {
               <img
                 src={isDark ? TypeScale1Dark : TypeScale1}
                 alt="Type Scale"
+                loading="lazy"
               />
             </Col>
           </Row>
@@ -160,7 +161,7 @@ const SistentTypography = () => {
           </p>
           <Row Hcenter className="image-container">
             <Col md={8} lg={8} sm={12}>
-              <img src={isDark ? FontPairDark : FontPair} alt="Font Pair" />
+              <img src={isDark ? FontPairDark : FontPair} alt="Font Pair" loading="lazy" />
             </Col>
           </Row>
         </div>
diff --git a/src/sections/SeeYou/index.js b/src/sections/SeeYou/index.js
index 0130d8df640d..045991d666da 100644
--- a/src/sections/SeeYou/index.js
+++ b/src/sections/SeeYou/index.js
@@ -18,22 +18,22 @@ const SeeYou = () => {
         Take the work out of teamwork.
         </div>
         <div >
-          <img className={"square"} src={square} alt={""}/>
+          <img className={"square"} src={square} alt={""} loading="lazy"/>
         </div>
         <div >
-          <img className={"pentagon"} src={pentagon} alt={""}/>
+          <img className={"pentagon"} src={pentagon} alt={""} loading="lazy"/>
         </div>
         <div >
-          <img className={"hexagon"} src={hexagon} alt={""}/>
+          <img className={"hexagon"} src={hexagon} alt={""} loading="lazy"/>
         </div>
         <div >
-          <img className={"heptagon"} src={octagon} alt={""}/>
+          <img className={"heptagon"} src={octagon} alt={""} loading="lazy"/>
         </div>
         <div >
-          <img className={"cursor_1"} src={cursor_1} alt={""}/>
+          <img className={"cursor_1"} src={cursor_1} alt={""} loading="lazy"/>
         </div>
         <div >
-          <img className={"cursor_2"} src={cursor_2} alt={""}/>
+          <img className={"cursor_2"} src={cursor_2} alt={""} loading="lazy"/>
         </div>
 
         <div>
diff --git a/src/sections/SolutionHero/index.js b/src/sections/SolutionHero/index.js
index 2c3baa3b9a75..b191ab8f44c2 100644
--- a/src/sections/SolutionHero/index.js
+++ b/src/sections/SolutionHero/index.js
@@ -44,7 +44,7 @@ const FeatureHero = (props) => {
           </Button>
         </div>
         <div className={"whiteboard-image"}>
-          <img id={"whiteboard-svg"} src={props.data.image} alt={""} />
+          <img id={"whiteboard-svg"} src={props.data.image} alt={""} loading="lazy" />
         </div>
       </Container>
     </FeatureHeroWrapper>
diff --git a/src/sections/gitops/PerformanceManagementPage.js b/src/sections/gitops/PerformanceManagementPage.js
index bec431b1c251..f2a047818eef 100644
--- a/src/sections/gitops/PerformanceManagementPage.js
+++ b/src/sections/gitops/PerformanceManagementPage.js
@@ -37,7 +37,7 @@ const PerformanceManagementPage = () => {
       <ContentContainerWrapper>
         <ContentRow>
           <ColumnContainer >
-            <img src={SMPconfig} className="code-screenshot" alt="SMPconfig" width={605} height={740} />
+            <img src={SMPconfig} className="code-screenshot" alt="SMPconfig" width={605} height={740} loading="lazy" />
           </ColumnContainer>
           <ColumnContainer>
             <Heading>A sample configuration of the action</Heading>
@@ -49,7 +49,7 @@ const PerformanceManagementPage = () => {
         <ContentRow>
           <ColumnContainer>
             <GithubLogo className="stack-logo" />
-            <img src={Cone} className="meshmap-stack-cone" />
+            <img src={Cone} className="meshmap-stack-cone" loading="lazy" />
           </ColumnContainer>
 
           <TextColumn>
@@ -67,7 +67,7 @@ const PerformanceManagementPage = () => {
             <Heading>A sample configuration <br/> of the action</Heading>
           </TextColumn>
           <ColumnContainer >
-            <img src={SMPconfig} className="code-screenshot" alt="SMPconfig" width={605} height={740} />
+            <img src={SMPconfig} className="code-screenshot" alt="SMPconfig" width={605} height={740} loading="lazy" />
           </ColumnContainer>
         </ContentRow>
       </ContentContainerWrapper>
@@ -75,7 +75,7 @@ const PerformanceManagementPage = () => {
       <ContentContainerWrapper>
         <ContentRow>
           <ColumnContainer >
-            <img src={SMPTestconfig} className="code-screenshot" alt="SMPTestconfig" width={605} height={740} />
+            <img src={SMPTestconfig} className="code-screenshot" alt="SMPTestconfig" width={605} height={740} loading="lazy" />
           </ColumnContainer>
           <TextColumn>
             <Heading>Define your test <br /> configuration in an SMP compatible configuration file</Heading>
diff --git a/src/sections/gitops/SnapshotPage.js b/src/sections/gitops/SnapshotPage.js
index 64a2a3e674ba..fa76f30b98ea 100644
--- a/src/sections/gitops/SnapshotPage.js
+++ b/src/sections/gitops/SnapshotPage.js
@@ -34,7 +34,7 @@ const SnapshotPage = () => {
       <ContentContainerWrapper>
         <ContentRow>
           <ColumnContainer >
-            <img src={GithubActionComment} className="screenshot" alt="GithubActionComment" width={530} height={375} />
+            <img src={GithubActionComment} className="screenshot" alt="GithubActionComment" width={530} height={375} loading="lazy" />
           </ColumnContainer>
           <ColumnContainer>
             <Heading>See your deployment <br/> before you merge.</Heading>
@@ -53,7 +53,7 @@ const SnapshotPage = () => {
 
           <ColumnContainer>
             <MeshMapStack className="stack-logo" />
-            <img src={Cone} className="meshmap-stack-cone" />
+            <img src={Cone} className="meshmap-stack-cone" loading="lazy" />
           </ColumnContainer>
         </ContentRow>
       </ContentContainerWrapper>
diff --git a/src/sections/gitops/index.js b/src/sections/gitops/index.js
index 0546e370ed0b..7a7f577159ba 100644
--- a/src/sections/gitops/index.js
+++ b/src/sections/gitops/index.js
@@ -66,7 +66,7 @@ const GitOpsPage = () => {
           </Col>
           <Col className="hero-image" lg={6} md={6} xs={12} sm={10}>
             <div className="image-container">
-              <img src={isDark ? Github_Dark : Github_Light} className="logo" />
+              <img src={isDark ? Github_Dark : Github_Light} className="logo" loading="lazy" />
             </div>
           </Col>
         </Row>
@@ -87,7 +87,7 @@ const GitOpsPage = () => {
           <Col className="hero-image" lg={6} md={6} xs={12} sm={10} >
             <div className="image-container" >
               <MeshMapStack className="logo" />
-              <img src={Cone} className="cone-image" />
+              <img src={Cone} className="cone-image" loading="lazy" />
             </div>
           </Col>
         </Row>
@@ -107,8 +107,8 @@ const GitOpsPage = () => {
           </Col>
           <Col lg={6} md={6} className="hero-image" style={{ display: "flex", justifyContent: "flex-end" }} >
             <div className="image-container" >
-              <img src={isDark ? SmpLogo_light : SmpLogo_dark} className="logo" />
-              <img src={Cone} className="cone-image" />
+              <img src={isDark ? SmpLogo_light : SmpLogo_dark} className="logo" loading="lazy" />
+              <img src={Cone} className="cone-image" loading="lazy" />
             </div>
           </Col>
         </Row>
diff --git a/src/sections/kubernetes-multi-cluster/features.js b/src/sections/kubernetes-multi-cluster/features.js
index dd07032e73f2..2e12cb32ecae 100644
--- a/src/sections/kubernetes-multi-cluster/features.js
+++ b/src/sections/kubernetes-multi-cluster/features.js
@@ -157,14 +157,14 @@ const Feature = () => {
           </Col>
           <Col md={6} className="catalog-image">
             <div className="image-wrapper">
-              <img src={meshery_operator} className="calalog-image" />
+              <img src={meshery_operator} className="calalog-image" loading="lazy" />
             </div>
           </Col>
         </Row>
         <Row className="catalog">
           <Col md={6} className="catalog-image">
             <div className="image-wrapper">
-              <img src={meshsync} className="calalog-image" />
+              <img src={meshsync} className="calalog-image" loading="lazy" />
             </div>
           </Col>
           <Col md={6} className="catalog-detail">
diff --git a/src/sections/meshmap-cta/index.js b/src/sections/meshmap-cta/index.js
index 8949f1cfc8ec..2e339e25d525 100644
--- a/src/sections/meshmap-cta/index.js
+++ b/src/sections/meshmap-cta/index.js
@@ -96,8 +96,8 @@ const MeshMapCTA = () => {
       <Container>
         <div className="CTAbody">
           <div>
-            <img className="rotate" src={Locator} />
-            <img className="surface" src={MesherySurface} />
+            <img className="rotate" src={Locator} loading="lazy" />
+            <img className="surface" src={MesherySurface} loading="lazy" />
           </div>
           <div className="text">
             <h2><span>MeshMap</span> is here!</h2>